Aten Design Group -- JavaScript Components

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

🐛 Issues & Support

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

👤 Author

Philip Stier - Tech Lead, Senior Developer

1. Installation
2. Accordion
3. Tab Content
4. Menu
5. Sticky
6. Modal

Installation

npm install @atendesign/javascript-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 { Accordion } from '@atendesign/javascript-components';

document.addEventListener('DOMContentLoaded', function() { 
    document.querySelectorAll('.accordion').forEach(accordion => {
        const accordionComponent = new Accordion(accordion, {options});
        accordionComponent.init();
    });
});

Options

| Option | Type | Default | Description | |--------|------|----------------------------------------|-------------| | selectors.trigger | string | '.accordion__trigger[aria-controls]' | CSS selector for accordion trigger buttons | | classes.expanded | string | 'is-expanded' | CSS class applied to expanded accordion state |

Custom Options Example

const accordionComponent = new Accordion(accordionElement, {
    selectors: {
        trigger: '.my-accordion__trigger[aria-controls]',
    },
    classes: {
        expanded: 'is-open',
    },
});

accordionComponent.init();

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 { TabContent } from '@atendesign/javascript-components';

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

Options

| Option | Type | Default | Description | |----------------------|---------|------------------------------|-----------------------------------------------------| | selectors.navigation | string | '.tab-content__navigation' | CSS selector for desktop tab navigation container | | selectors.group | string | '.tab-content__group' | CSS selector for tab groups | | selectors.trigger | string | '.tab-content__trigger' | CSS selector for tab trigger buttons | | classes.expanded | string | 'is-expanded' | CSS class applied to expanded tabs/groups | | breakpoint | number | 768 | Media breakpoint where tabs switch to accordions |

Custom Options Example

const tabContentComponent = new TabContent(tabContentElement, {
    selectors: {
        navigation: '.my-tabs__navigation',
        group: '.my-tabs__group',
        trigger: '.my-tabs__trigger',
    },
    classes: {
        expanded: 'is-open',
    },
    breakpoint: 1024,
});

tabContentComponent.init();

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

Menu

Features

• 🌟 Fully accessible implementation
• ⌨️ Keyboard navigation support
• 📱 Responsive design (desktop/mobile state)
• 🎨 Customizable styling
• 🔄 Submenu expand/collapse management
• 🖱️ Click-outside to close

Basic Usage

HTML

<nav class="menu">
  <ul class="menu__items">
    <li class="menu__item">
      <a class="menu__link" href="#">Home</a>
    </li>
    <li class="menu__item">
      <button class="menu__dropdown-trigger" aria-expanded="false">About</button>
      <div class="menu__dropdown">
        <ul class="menu__items">
          <li class="menu__item">
            <a class="menu__link" href="#">Our Team</a>
          </li>
          <li class="menu__item">
            <a class="menu__link" href="#">Our Story</a>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu__item">
      <a class="menu__link" href="#">Services</a>
    </li>
  </ul>
</nav>

JavaScript

import { Menu } from '@atendesign/javascript-components';

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.menu').forEach(menu => {
        const menuComponent = new Menu(menu);
        menuComponent.mount();
    });
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | selectors.trigger | string | '.menu__dropdown-trigger' | CSS selector for dropdown trigger buttons | | selectors.items | string | '.menu__items' | CSS selector for the menu items container | | selectors.item | string | '.menu__item' | CSS selector for individual menu items | | selectors.link | string | '.menu__link' | CSS selector for menu item links | | selectors.dropdown | string | '.menu__dropdown' | CSS selector for dropdown containers | | classes.expanded | string | 'is-expanded' | CSS class applied to expanded dropdown state | | breakpoint | number | 768 | Viewport width (px) at which the menu switches between mobile and desktop behaviour |

Custom Options Example

const menuComponent = new Menu(menuElement, {
    selectors: {
        trigger: '.my-menu__dropdown-trigger',
        items: '.my-menu__items',
        item: '.my-menu__item',
        link: '.my-menu__link',
        dropdown: '.my-menu__dropdown',
    },
    classes: {
        expanded: 'is-open',
    },
    breakpoint: 1024,
});

menuComponent.mount();

Required HTML Attributes

• aria-expanded on dropdown trigger buttons (automatically managed by the component)

Keyboard Support

| Key | Action | |-----|--------| | Enter or Space | Expand focused submenu and move focus to its first item | | Arrow Down | Expand submenu (focus first item) or move to the next sibling item | | Arrow Up | Expand submenu (focus last item) or move to the previous sibling item | | Arrow Right | When inside a submenu, collapse it and move focus to the next top-level item | | Arrow Left | When inside a submenu, collapse it and move focus to the previous top-level item | | Escape | Collapse the open submenu and return focus to its trigger | | Home | Close all submenus and focus the first top-level menu item | | End | Close all submenus and focus the last top-level menu item | | Mouse click | Toggle submenu / close all when clicking outside the menu |

Lifecycle Methods

| Method | Description | |--------|-------------| | mount() | Attaches all event listeners and initialises the responsive media query | | destroy() | Removes all event listeners and cleans up the component |

Sticky

Features

• 🌟 Scroll-aware positioning bounded within a parent container
• ⚡ Optimised with requestAnimationFrame throttling — one update per frame
• 📐 ResizeObserver keeps layout measurements accurate after DOM reflow
• 🎨 Customizable class names and top-spacing
• 🔄 Three-state lifecycle: default → stuck → bottom

Basic Usage

HTML

<div class="sticky-parent">
  <aside class="sticky-element">
    I stick within my parent!
  </aside>
  <div class="sticky-content">
    <!-- tall content -->
  </div>
</div>

CSS

/* The parent receives position: relative automatically if not already set. */
.sticky-element.is-stuck {
  position: absolute;
}

.sticky-element.is-bottom {
  position: absolute;
  bottom: 0;
}

JavaScript

import { Sticky } from '@atendesign/javascript-components';

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.is-sticky').forEach(el => {
        const stickyComponent = new Sticky(el);
        stickyComponent.mount();
    });
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | topSpacing | number | 40 | Gap in pixels between the viewport top and the stuck element | | classes.stuck | string | 'is-stuck' | CSS class applied when the element is in the sticky (viewport-tracking) state | | classes.bottom | string | 'is-bottom' | CSS class applied when the element has reached the bottom boundary of its parent |

Custom Options Example

const stickyComponent = new Sticky(el, {
    topSpacing: 80,
    classes: {
        stuck: 'is-pinned',
        bottom: 'is-anchored',
    },
});

stickyComponent.mount();

How It Works

The element transitions between three states as the page scrolls:

| State | Condition | Description | |-------|-----------|-------------| | default | Before the sticky zone | Element stays in its natural document position | | stuck | Inside the sticky zone | Tracks the viewport via position: absolute + an inline top offset | | bottom | Past the parent's boundary | Anchored to the parent's bottom edge |

Lifecycle Methods

| Method | Description | |--------|-------------| | mount() | Caches layout values, attaches scroll and resize listeners, and applies the initial state | | destroy() | Removes the scroll listener and disconnects the ResizeObserver |

Modal

Features

• 🌟 Fully accessible implementation
• ⌨️ Full keyboard support with focus trapping
• 🔒 Body scroll locked while open
• 🖱️ Overlay click to close
• 🔄 Focus restored to the triggering element on close
• 📌 Modal relocated to <body> on mount for reliable fixed positioning

Basic Usage

HTML

<button type="button" aria-controls="my-modal" aria-expanded="false">
  Open Modal
</button>

<div id="my-modal"
     class="modal"
     role="dialog"
     aria-modal="true"
     aria-labelledby="my-modal-title"
     aria-hidden="true">
  <div class="modal__overlay">
    <div class="modal__dialog">
      <button type="button" class="modal__close" aria-label="Close modal">Close</button>
      <h2 id="my-modal-title">Modal Title</h2>
      <p>Modal content goes here.</p>
    </div>
  </div>
</div>

JavaScript

import { Modal } from '@atendesign/javascript-components';

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.modal').forEach(modal => {
        const modalComponent = new Modal(modal);
        modalComponent.mount();
    });
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | selectors.trigger | string | '[aria-controls="{id}"]' | CSS selector for trigger buttons (scoped to the whole document) | | selectors.closeButton | string | '.modal__close' | CSS selector for close buttons inside the modal | | selectors.overlay | string | '.modal__overlay' | CSS selector for the overlay element; clicking it closes the modal | | classes.expanded | string | 'is-expanded' | CSS class applied to the modal element when it is open |

Custom Options Example

const modalComponent = new Modal(modalElement, {
    selectors: {
        trigger: '.my-open-button',
        closeButton: '.my-modal__close',
        overlay: '.my-modal__overlay',
    },
    classes: {
        expanded: 'is-open',
    },
});

modalComponent.mount();

Required HTML Attributes

• id on the modal element (must match each trigger's aria-controls value)
• role="dialog" on the modal element
• aria-modal="true" on the modal element
• aria-labelledby on the modal element (should reference the dialog heading's ID)
• aria-hidden="true" on the modal element (automatically managed by the component)
• aria-controls on trigger buttons (must match the modal element's ID)
• aria-expanded on trigger buttons (automatically managed by the component)
• aria-label or visible label on each close button

Keyboard Support

| Key | Action | |-----|--------| | Escape | Close the modal and return focus to the triggering element | | Tab | Move focus to the next focusable element; wraps from last to first | | Shift+Tab | Move focus to the previous focusable element; wraps from first to last |

Lifecycle Methods

| Method | Description | |--------|-------------| | mount() | Relocates the modal to <body>, caches internal elements, and attaches all event listeners | | destroy() | Removes all event listeners attached by mount() |