https://github.com/hokulea/aria-voyager

Navigation patterns for various aria roles and features.
https://github.com/hokulea/aria-voyager

agnostic aria ember navigation universal

Last synced: 8 months ago
JSON representation

Navigation patterns for various aria roles and features.

• Host: GitHub
• URL: https://github.com/hokulea/aria-voyager
• Owner: hokulea
• License: mit
• Created: 2024-07-14T20:21:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-11T19:44:35.000Z (8 months ago)
• Last Synced: 2025-04-11T20:34:30.135Z (8 months ago)
• Topics: agnostic, aria, ember, navigation, universal
• Language: TypeScript
• Homepage:
• Size: 2.11 MB
• Stars: 3
• Watchers: 0
• Forks: 2
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ARIA Voyager

[![Test Coverage](https://api.codeclimate.com/v1/badges/6bd88c10540e66d94e2a/test_coverage)](https://codeclimate.com/github/hokulea/aria-voyager/test_coverage)

[![Maintainability](https://api.codeclimate.com/v1/badges/6bd88c10540e66d94e2a/maintainability)](https://codeclimate.com/github/hokulea/aria-voyager/maintainability)

_Canoe vessel that navigates your aria._

A framework agnostic / universal package that implements navigation patterns for

various aria roles and features.

## BYOM: Bring Your Own Markup

... and this library will make it interactive, according to applicable [ARIA

patterns](https://www.w3.org/WAI/ARIA/apg/patterns/). This library does not

apply styling, it will operate on the accessibility tree.

## Supported Roles and Features

  

    Role

    Navigation Patterns

    Features

    Behavior

  

  

    

      listbox



      Focus Strategy:


      

      aria-activedescendant

      

    

    

      ✅ ArrowUp (prev)


      ✅ ArrowDown (next)


      ✅ Home (first)


      ✅ End (last)


      ✅ Pointer Navigation

    

    

      ✅ Disabled


      ✅ Scroll into view


      ✅ Single selection


      ✅ Multi selection


      ❌ Checked


    

    

      -

    

  

  

    

      menu



      Focus Strategy:


      Roving tabindex

    

    

      ✅ ArrowUp (prev)


      ✅ ArrowDown (next)


      ✅ ArrowRight / Enter (expand)


      ✅ ArrowLeft / Esc (collapse)


      ✅ Home (first)


      ✅ End (last)


      ✅ Pointer Navigation

    

    

      ✅ Disabled


      ✅ role="menuitem"


      ❌ role="menuitemcheckbox"


      ❌ role="menuitemradio"

    

    

      ❌ Hover Behavior


    

  

  

    

      tablist



      Focus Strategy:


      Roving tabindex

    

    

      ✅ ArrowRight / ArrowUp (prev)


      ✅ ArrowLeft / ArrowDown (next)


      ✅ Home (first)


      ✅ End (last)


      ✅ Pointer Navigation

    

    

      ✅ Disabled


      ✅ Orientation


      ✅ Single selection


      ❌ Multi selection


    

    

      ✅ Manual (with spacebar) / Automatic Selection


    

  

## Packages

See each package for instructions

- [`aria-voyager`](./packages/aria-voyager/README.md) - universal / framework agnostic package

- [`ember-aria-voyager`](./packages/ember-aria-voyager/package/README.md) - bindings for ember.js