ember-aria-utilities
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

ember-aria-utilities

CI npm version

ARIA utilities for helping create some of the more complex ARIA design patterns. Follows https://www.w3.org/TR/wai-aria-practices/

Compatibility

  • ember-source v4.8 or above
  • ember-auto-import v2 or above
  • ember-cli classic build, embroider safe and optimized builds
  • typescript v4.5.2 or above

For testing

  • @ember/test-helpers v3.3 or above

Installation

ember install ember-aria-utilities

{{aria-grid}}

This library provides keyboard interaction for grids based on the ARIA Grid design pattern. This benefits people that interact with grids via keyboard or methods other than a mouse. This includes people such as power users and people that can’t use a mouse. The keyboard interactions make it easier to navigate large data sets.

Interactive Example

This example allows you to try out the keyboard interactions as outlined in §Keyboard Interaction.

Name
Function
Username
Jenny Judova
Engineer
n/a
Preston Sego
Software Artificer
@nullvoxpopuli
Zoë Bijl
Rambling Accessibility Engineer
@zoe

Keyboard Interaction

Keyboard Interaction
Key Function
Arrow Keys Moves focus to the adjacent cell. If there is no adjacent cell in the pressed direction focus doesn’t move.
Ctrl+Arrow Keys Moves focus to the outer most cell in the pressed direction. If there is no adjacent cell in the pressed direction focus doesn’t move.

Note: If focus is on a cell inside the “body” and Ctrl+Up Arrow is pressed. Focus will move move to the top most cell in the “body”. A second press is needed to move into the column headers.

Note: There is no such difference between a “data cell” and a “row header”.

Home Moves focus to the first cell in the row that contains focus.
End Moves focus to the last cell in the row that contains focus.
Ctrl+Home Moves focus to the first cell in the first row.
Ctr+End Moves focus to the last cell in the last row.

Future Support

Future updates will allow for selection of cells/rows. Also included is the following keyboard support.

Keyboard Interaction
Key Function
PageUp Moves focus to the last cell in the last row.
PageDown Moves focus to the last cell in the last row.
Related links

How to apply

{{aria-grid}} provides you the keyboard interaction. The component it’s applied to will need to have all the appropriate ARIA roles, states, and properties as outlined in the authoring practices.

<div role="grid" {{aria-grid}}>
  <div role="row">
    <div tabindex="-1" role="columnheader">Name</div>
    <div tabindex="-1" role="columnheader">Function</div>
    <div tabindex="-1" role="columnheader">Username</div>
  </div>
  <div role="row">
    <div tabindex="-1" role="cell">Jenny Judova</div>
    <div tabindex="-1" role="cell">Engineer</div>
    <div tabindex="-1" role="cell">n/a</div>
  </div>
  <div role="row">
    <div tabindex="-1" role="cell">Preston Sego</div>
    <div tabindex="-1" role="cell">Software Artificer</div>
    <div tabindex="-1" role="cell">@nullvoxpopuli</div>
  </div>
  <div role="row">
    <div tabindex="-1" role="cell">Zoë Bijl</div>
    <div tabindex="-1" role="cell">Rambling Accessibility Engineer</div>
    <div tabindex="-1" role="cell">@zoe</div>
  </div>
</div>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
3.0.01latest

Version History

VersionDownloads (Last 7 Days)Published
3.0.01
2.3.10
2.3.00
2.2.14
2.2.00
2.1.00
2.0.50
2.0.40
2.0.30
2.0.20
1.0.11

Package Sidebar

Install

npm i ember-aria-utilities

Weekly Downloads

1

Version

3.0.0

License

MIT

Unpacked Size

99 kB

Total Files

18

Last publish

Collaborators

  • kellyselden
  • crowdstrike-publisher