facebook / facebook/astryx

ProgressBar: focusable target marks live inside a presentational descendant subtree

Open
#6,219 0 comments 0 reactions 0 assignees View on GitHub
accessibility bug
Dominant language
TypeScript
Stars
13k
Forks
1.1k
Avg merge
1d 15h
Merged PRs (30d)
690

Description

## Description

`ProgressBar` renders every labeled target mark as a `tabIndex={0}` Tooltip trigger inside the element with `role="progressbar"`.

WAI-ARIA defines progressbar descendants as presentational. A keyboard-focusable descendant inside that subtree therefore has no stable interactive role or ownership model: keyboard users can tab to the mark, but assistive technology may flatten or omit the mark while its tooltip label is exposed only through `aria-describedby`.

Target marks need an interaction owner outside the progressbar’s presentational descendant subtree, or a non-interactive presentation whose information is exposed through the progressbar itself.

## Reproduction

1. Render ``.
2. Tab to the mark.
3. Inspect the DOM and accessibility tree.
4. Observe a focusable, role-free Tooltip trigger nested inside `role="progressbar"`, whose descendants are defined as presentational.

## Astryx Version

Current `main` (`@astryxdesign/core@0.5.4`).

## Environment

Chrome on macOS; keyboard, DOM, and Chromium accessibility-tree inspection.

Normative reference: https://www.w3.org/TR/wai-aria-1.2/#progressbar

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.