GeezerVison

Options

Note: if the viewport is too narrow, the Widget displays as an Accordion and changing its width won't switch "behavior"

Semantic

Progressive enhancement

The Widget is markup-agnostic, eliminating the need for jump-links.

The document remains meaningful even without JavaScript support.

A11Y

First class support for screen-reader users

ARIA controls the rendering of their non-visual experience.

Headings functioning as tabs facilitate easier navigation through the Widget for screen reader users.

First class support for keyboard users

Users can navigate through accordion headings using the up/down arrow keys.

They can skip the entire Widget or access its first tab/header directly.

State Management

Reloading, bookmarking, or sharing a page preserves the state of the panels.

Text selection

Adjacent headings are not selected when users select a heading (tab) and its related content (panel). This is possible because headings are not siblings, unlike headings in a "regular" tablist.

Adaptive

Responsiveness

The widget transforms into an Accordion when its width cannot accommodate all the tabs.
This adaptive feature prevents layout issues on narrow viewports, within fluid containers, and with large font-size settings.

Internationalization (i18n)

The widget adjusts to different languages (e.g., "Technischer Support" versus "Tech Support").

The widget adheres to the directionality of the text (tabs will switch direction accordingly). Icon positioning will also respect the script direction.

For TabPanel

tab

When focus moves to the tabs, places focus on the active "tab" element.
When the tabs contain the focus, moves focus to the next element in the page tab sequence outside the tabs, which is typically either the first focusable element inside the tab panel or the tab panel itself.

Left Arrow

Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab and activates the newly focused tab.

Right Arrow

Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab and activates the newly focused tab.

home

Moves focus to the first tab and activates the newly focused tab.

end

Moves focus to the last tab and activates the newly focused tab.

esc

Toggle a skip link that offers to either bypass the Widget or to bring focus back on the first header.

For Accordion

enter space

When focus is on the Accordion header for a collapsed panel, expands the panel.

When focus is on the Accordion header for an expanded panel, collapses the panel.

tab

Moves focus to the next focusable element; all focusable elements in the Accordion are included in the page tab sequence.

shift + tab

Moves focus to the previous focusable element; all focusable elements in the Accordion are included in the page tab sequence.

Down Arrow

If focus is on an Accordion header, moves focus to the next Accordion header.

If focus is on the last Accordion header, either does nothing or moves focus to the first Accordion header.

Up Arrow

If focus is on an Accordion header, moves focus to the previous Accordion header.

If focus is on the first Accordion header, either does nothing or moves focus to the last Accordion header.

home

When focus is on an Accordion header, moves focus to the first Accordion header.

end

When focus is on an Accordion header, moves focus to the last Accordion header.

esc

Toggle a skip link that offers to either bypass the Widget or to bring focus back on the first header.

Browser Support

This library relies on ResizeObserver but we have a polyfill for browsers that don't support it—as the table below shows.

"Old School"

Download the latest release of tabpanelwidget-x.x.x.zip which includes:

• The minified Script
• The minified Polyfill
• A stylesheet (.scss) that contains "variables"
• A minified stylesheet that is the output of the above file

Setup

Wrap your headings and their relevant content inside a div (or else) to which you apply the class tpw-widget.

Add a data- attribute (data-tpw-id) if you want to make your widget "bookmark-friendly" / "share-friendly"; its value must be unique.

<!-- .tpw-widget -->
<!-- This wrapper can be anything (article/div/dl/whatever) -->
<div class="tpw-widget" data-tpw-id="example" data-tpw-hist="">
    <!--
    You CAN use any (and as many) headings (h2/h3/h4/h5/h6)
    You MUST use the SAME heading level throughout a Widget
    You CAN use a <dl> but it has to be made of dt/dd pairs
    "tpw-selected" dictates which panel(s) should be opened
    -->
    <h3 class="tpw-selected">Lorem</h3>
    <!--
    Whatever you put in between the headings is wrapped by
    the script inside <div>s to become the panels' content
    -->
    <p>...</p>
    <ul>...</ul>
    <blockquote>...</blockquote>
    <h3>Ipsum</h3>
    ...
    <h3>Dolor</h3>
    ...
    <h3>Sit Amet</h3>
    ...
</div>
<!-- /.tpw-widget -->

Include the stylesheet in the head of your document:

<link href="/PATH_TO_FILE/tabpanelwidget.min.css" rel="stylesheet" />

Include this before </body>:

<script src="/PATH_TO_FILE/tabpanelwidget.min.js"></script>
<script>
  // remove this if you do not want to serve the polyfill
  if (!window.ResizeObserver) {
    const script = document.createElement("script")
    script.src = "/PATH_TO_FILE/tabpanelwidget-polyfill.min.js"
    document.head.appendChild(src)
  }
  // Instantiate TabPanelWidget
  Tabpanelwidget.autoinstall();
</script>

Or you may choose to load all files from CDN:

<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/tabpanelwidget.min.css" rel="stylesheet" />

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/tabpanelwidget.min.js"></script>
<script>
  // remove this if you do not want to serve the polyfill
  if (!window.ResizeObserver) {
    const script = document.createElement("script")
    script.src = "//cdn.jsdelivr.net/npm/[email protected]/dist/tabpanelwidget-polyfill.min.js"
    document.head.appendChild(src)
  }
  // Instantiate TabPanelWidget
  Tabpanelwidget.autoinstall();
</script>

The above will attach the script to all containers with the class tpw-widget.

Usage

Classes

"Out-of-the-box", the Widget will appear as shown in the Demo section but a few classes give you different options.

All classes are meant to be applied to the Widget (the wrapper) with the exception of tpw-selected which, applied to a "heading" (or multiple headings in the case of an Accordion), will let you arbitrarily choose which panel(s) to open by default (the one(s) associated with that/those heading(s)).

Data- Attributes

These attributes are optional. They are meant to make the widget "bookmark-friendly". This means users will be able to bookmark a page, or share a URL, and have the state of the panels saved at the same time.

• data-tpw-id: the value of this attribute must be unique
• data-tpw-hist: if this attribute is not present or if its value is empty, clicking on the browser's forward/back buttons will have no effect on the widget. If the value is push (i.e. data-tpw-hist="push") then using the browser's forward/back buttons will navigate through the panels as they have been opened and closed by the user.

• This feature only works with the "Vanilla" script
  (open an issue on GitHub if you want this feature to be ported to Vue, React, etc.).
• We do not recommend using this feature if your HTML document uses named anchors (as it may make the page fail to scroll to those anchors).
• We do not recommend using push unless you use the widget as a single page web site, in which each panel represents a different page.

"Variables"

tabpanelwidget.min.css is the output of tabpanelwidget.scss. The latter contains variables that will let you customize the Widget's tabs, headers, and panels (their color, background, border, border-radius, padding, margin, etc.).

The comments in the SCSS file contain a great deal of information; make sure to check them out!.

"Vanilla"

import * as Tabpanelwidget from "tabpanelwidget"
import "tabpanelwidget/dist/tabpanelwidget.min.css"

// find all .tpw-widget in page and install them
Tabpanelwidget.autoinstall()

// or specify element to install (and uninstall)
const el = document.querySelector('#my-element')
// keep in mind install completes asynchronously so uninstall is returned by promise
const uninstall = await Tabpanelwidget.install(el)
// or worse, can use a callback as second arg (make sure you don't call uninstall before it's set in this case):
// let uninstall; Tabpanelwidget.install(el, _uninstall => (uninstall = _uninstall))
// later...
if (uninstall) uninstall()

"Vue.js"

<script>
import VueTabpanelwidget from "tabpanelwidget/vue"
import "tabpanelwidget/dist/tabpanelwidget.min.css"

Vue.use(VueTabpanelwidget)
// or Vue.component("Tabpanelwidget", VueTabpanelwidget)
// or in component, components: { VueTabpanelwidget, ... }

<Tabpanelwidget :heading="2" :mode="accordion" :selected-idxs="[1]" :tabs="['a', 'b', 'c']" rtl animate skin="pills" icon-style="fancy" centered disconnected icons-at-the-end rounded>
  <template v-slot:panel-0="">
    override content for panel 0
  </template>
</Tabpanelwidget>

React

import ReactTabpanelwidget from "tabpanelwidget/react"
import "tabpanelwidget/dist/tabpanelwidget.min.css"

<ReactTabpanelwidget heading={2} mode={'accordion'} selected-idxs={[1]} rtl animate skin={'pills'} icon-style={'fancy'} centered disconnected icons-at-the-end rounded>
  <ReactTabpanelwidget.Heading>heading 1</ReactTabpanelwidget.Heading>
  <ReactTabpanelwidget.Panel>panel 1</ReactTabpanelwidget.Panel>
</ReactTabpanelwidget>

Angular

Coming soon! Even sooner if we receive a PR ;)