npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aria-tabs

v0.0.2

Published

Accessible, responsive, themeable, small footprint tabs web component

Downloads

3

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

schrotieschrotie

Keywords

browserjavascriptweb-components

Readme

aria-tabs

Accessible, responsive, themeable, small footprint tabs web component

Demonstration

<aria-tabs> is a customizable tabs web-component/custom-element. Simply load the script, e.g. in your document's <head> and add checkboxes to your document.

Okay, it's probably not that simple. AriaTabs is a class that handles the ARIA (i.e. accessibility) aspect of tabs. <aria-tabs> comes with two themes:

  • classic
    looks basically like a classical tabs, just themed and with some gradients
  • material
    is a material design tabs variant

Each comes with a simple theming interface. Decide which one to use. If you are happy with the look and feel just include the respective file, add you colors and enjoy:

  • aria-tabsClassic.mjs
  • aria-tabsMaterial.mjs

What File to Load

You only need to load one file. Which one that is depends on your specific needs. As noted above, <aria-tabs> comes with two pre-built themes. Thus first you should decide which theme to choose or if you want to build your own customized variant.

The pre-built dist (distribution) files are in the NPM package but not in the GitHub sources. If you loaded the latter you need to do npm i; npm run build to get them.

If you build your own, you should import AriaTabs from '.../src/aria-tabs.mjs' and do your own build. If you build a web application with static source code (as opposed to a page that is dynamically assembled by server side rendering) you should import the source version of your chosen themed tabs and have a custom build for your app.

If you want to use a pre-build tabs decide which and next decide which build to load. Each theme comes with three builds. <aria-tabs> uses the ShadowQuery micro library to simplify web component implementation. Two builds bundle it, one doesn't. If you use more stuff that also needs ShadowQuery use the version where it's not bundled. That way you don't have to load it multiple times.

  • *.min.mjs minified EcmaScript Module without ShadowQuery
  • *.min.js minified ES6 script file with ShadowQuery bundled - use for all modern browsers except Edge
  • *.IE.min.js babel-transpiled ES5 for IE (and possibly Edge?) with ShadowQuery bundled

File sizes (gzipped): the minified tabs without ShadowQuery are ~4K, with ShadowQuery ~6K and transpiled with ShadowQuery ~16K.

Deployment & Polyfills

Older versions of current browsers and IE don't fully support web components and may miss modern language features. For the former you need to load a polyfill, for the latter you need to load the transpiled <aria-tabs>.

In addition I strongly recommend that you load the polyfills only where required and don't load transpiled code for browsers that don't need it! Transpiled means that the code went through babel. The code is twice as big and slower than the native ES6 ... and simply won't work in at least some modern browsers.

Theming & Customization

If you want to theme/customize aria-tabs you'll need to write your own component and inherit from the AriaTabs base class. In your constructor you can - and should - pass a template to the AriaTabs contructor. That way you can generate the custom DOM you need, along with your styles. Please check the default template exported by aria-tabs.mjs and check the (really simple) implementation of aria-tabsClassic.mjs and aria-tabsMaterial.mjs to learn how this is done.

In addition the are some methods you may want to override in order to get you custom style for all aspects of the tabs:

  • get deleteButtonTemplate() to create a custom delete button on the tabs
  • get tabTemplate() to customize tab DOM
  • renderTabs(labels) chances are, if you want a custom tab template, that template also requires custom initialization. Check the implementation of aria-tabsMaterial.mjs for an example. You don't need get tabTemplate() if you implement rendeTabs(labels)

Note on IE

If you want to support IE you will need to coax the ShadyCSS polyfill to actually handle your component. If you just need a custom main template, just define your component as shown in aria-tabsClassic.mjs and you're fine. If you need more, check aria-tabsMaterial.mjs. It uses the iniCss export from aria-tabs.mjs to handle that.

API

Attributes

  • data-deletable
    makes all tabs deletable if attribute is present
  • data-persistent
    will show last opened tab (index!) when re-opening page. Pass a string that will be used as an ID for the persistent data. Uses localStorage.
  • data-manual
    when present, arrow key navigation will not activate but just focus tabs, activation then happens with space or enter key (useful for tabs that load additional content like whole sub-applcations)
  • data-delay
    optional delay when navigating with arrow keys - ignored when data-manual
  • data-label
    on the tab-panels, sets the title of the tab-button

Several attributes on the associated DOM are set automatically for accessibility support.

property

aria-tabs automatically initializes several properties - for its own use and for inheriting (customized) tabs.

DOM accessors

  • tablist
  • scrollButton
  • tabs
  • panels

Attribute readers for the respective data-... attributes

  • delay
  • manual

events

None so far.

CSS custom properties

These are specific to the theme you use for the box. The shipped themes support the following:

  • --aria-tabs-bg-off
    background color of inactive tab button
  • --aria-tabs-bg-on
    background color of active tab button
  • --aria-tabs-fg-off
    text color of inactive tab button
  • --aria-tabs-fg-on
    text color of active tab button
  • --aria-tabs-flex
    flex mode of tablist when not scrolling (space-between, space-around, start, end, center ...)
  • --aria-tabs-highlight-on
    highlight color for active tab
  • --aria-tabs-highlight-sel
    highlight color for focussed tab
  • --aria-tabs-border
    border around tab buttons and panels
  • --aria-tabs-shadow
    shadow of tab buttons and panels

Method

Public methods should be considered protected - they are there to allow inheriting classes to customize certain aspects of aria-tabs.

  • initialize()
    On first rendering and on the change of certain attributes, initialize is called. If you overwrite this method in an inherited class you'll most likely need to call super.initialize() in your initialize - before, after, or in between your initialization code
  • get tabTemplate()
    returns the template (string) for the tab-buttons
  • renderTabs(labels) if you want a custom tabTemplate you likely need custom initialization of the tab buttons. Check aria-tabsMaterial.mjs on how to do this.
  • get deleteButtonTemplate()
    returns the template for tab-delete buttons
  • delete(tab) delete a tab

Accessibility features

See W3C example.