JavaScript A11Y Components

⚠️ Deprecated — Do Not Use for New Projects

This package is deprecated and is no longer actively maintained. It will not receive continued support, updates, or fixes. Please do not use this package in new development.

📦 npm Registry Deprecation (Maintainers)

To mark published versions as deprecated on npm, run:

npm deprecate "@stierpm/a11y-components@*" "This package is deprecated and no longer maintained. Do not use in new projects."

A collection of front-end JavaScript libraries that adhere ceremoniously with WCAG guidelines. This package provides accessible, keyboard-navigable UI components including accordions and tab content with full ARIA support and responsive design capabilities.

🏷️ Keywords

accessibility, a11y, accordion, wcag, frontend, javascript

🐛 Issues & Support

Found a bug or have a feature request? Please open an issue on GitHub.

👤 Author

Philip Stier

1. Installation
2. Accordion
3. Tab Content

Installation

npm install @stierpm/a11y-components

Accordion

Features

• 🌟 Fully accessible implementation
• ⌨️ Keyboard navigation support
• 📱 Responsive design
• 🎨 Customizable styling
• 🔄 Toggle state management

Basic Usage

HTML

<div class="accordion">
    <h3 class="accordion__heading">
        <button id="accordion-trigger-01" class="accordion__trigger" aria-expanded="false" aria-controls="accordion-section-01>
            Accordion Section
        </button>
    </h3>

    <div id="accordion-section-01" class="accordion__content" role="region" aria-labelledby="accordion-trigger-01">
        <p>This is the accordion content.</p>
    </div>
</div>

JavaScript

import { A11yAccordion } from '@stierpm/a11y-components';

document.addEventListener('DOMContentLoaded', function() { 
    document.querySelectorAll('.accordion').forEach(accordion => {
        new A11yAccordion(accordion, {options});
    });
});

Options

| Option | Type | Default | Description | |--------|------|----------------------------------------|-------------| | triggerSelector | string | '.accordion__trigger[aria-controls]' | CSS selector for accordion trigger buttons | | contentSelector | string | '.accordion__content' | CSS selector for accordion content panels | | expandedClass | string | 'is-expanded' | CSS class applied to expanded trigger buttons |

Required HTML Attributes

• aria-expanded on trigger button (automatically managed by the component)
• aria-controls on trigger button (must match content panel's ID)
• id on content panel (must match trigger's aria-controls value)
• aria-labelledby on content panel (must match trigger button's ID)
• role="region" on content panel

Keyboard Support

• Enter or Space: Toggle accordion section
• Mouse click: Toggle accordion section

Tab Content

Features

• 🌟 Fully accessible implementation
• ⌨️ Keyboard navigation support
• 📱 Responsive design
• 🎨 Customizable styling
• 🔄 Tab state management

Basic Usage

HTML

<div class="tab-content">
  <div role="tablist" class="tab-content__navigation"></div>

  <div id="tab-content-01"
       class="tab-content__group is-expanded"
       role="tabpanel"
       aria-labelledby="tab-tab-content-01">
    <button type="button"
            id="tab-tab-content-01"
            class="tab-content__trigger is-expanded"
            role="tab"
            aria-haspopup="true"
            aria-selected="true"
            aria-expanded="true"
            aria-controls="tab-content-01">
      Tab 01
    </button>

    <div class="tab-content__content">
      <p>Text content goes here - Tab 01</p>
    </div>
  </div>
</div>

JavaScript

import { A11yTabContent } from '@stierpm/a11y-components';

document.addEventListener('DOMContentLoaded', function() { 
    document.querySelectorAll('.tab-content').forEach(tabContent => {
        new A11yTabContent(tabContent);
    });
});

Options

| Option | Type | Default | Description | |----------------------|---------|------------------------------|-----------------------------------------------------| | navigationSelector | string | '.tab-content__navigation' | CSS selector for desktop navigation | | groupSelector | string | '.tab-content__group' | CSS selector for tab groups | | triggerSelector | string | '.tab-content__trigger' | CSS selector for tab buttons | | expandedClass | string | is-expanded | CSS selector for showing expanded groups | | breakpoint | integer | 768 | Media breakpoint at which tabs switch to accordions |

Required HTML Attributes

• role="tablist" on tab container
• role="tab" on each tab button
• role="tabpanel" on each content panel
• aria-selected on tab buttons (automatically managed by the component)
• aria-controls on tab buttons (must match panel's ID)
• id on content panels (must match tab's aria-controls value)
• aria-labelledby on content panels (must match tab button's ID)
• tabindex on tab buttons (automatically managed by the component)

Keyboard Support

• Arrow Left/Right: Navigate between tabs
• Home: Move to first tab
• End: Move to last tab
• Enter or Space: Activate focused tab
• Mouse click: Activate tab