Skip to content

@studiohyperdrive/ngx-layout: WAI-ARIA/WCAG compliance for configurable layout #265

@IbenTesara

Description

@IbenTesara

The NgxConfigurableLayoutComponent allows for a drag-and-drop mechanism to re-order items in the configurable layout.

However, this makes it incompliant with WAI-ARIA/WCAG without a keyboard based alternative. As WCAG/WAI-ARIA does not provide a fixed pattern to handle this, we decided to use the same pattern as dragon-drop, which was checked by several AT solutions.

This means that we use the following approach:

  1. We provide a live-region with updates for screen readers

  2. We use the following keyboard interactions
    - Using Tab to navigate to the item
    - Use Enter or Space to select an item
    - Use the arrow keys to move the item
    - Use Enter or Space to place an item
    - Use ESC to stop the move

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestngx-layout@studiohyperdrive/ngx-layout

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions