Skip to content

a11y(progress): expose metric explanations without non-interactive tab stops #672

Description

@seonghobae

Problem

Protected develop@2c328875e00e86537df3e965170be80532571cad exposes three progress-summary explanations only through HTML title attributes. PR #634 tried to make the static .meta-value-card containers focusable with tabindex="0" and role="note", but that creates sequential keyboard stops with no interaction to perform.

W3C WAI's keyboard guidance uses tabindex="0" on normally static elements when the element is being used for interaction and pairs that focusability with keyboard event handling: https://www.w3.org/WAI/tips/developing/ . The repaired #634 branch therefore removes the non-interactive tab stops rather than promoting them as an accessibility fix.

Buyer-visible acceptance

Provide the calculation/help text through a real, keyboard-operable disclosure/help control or another semantic presentation that does not add inert elements to the Tab sequence. Preserve the visible metric labels and values.

RED must demonstrate, in a real browser, that a keyboard-only user cannot currently expose the duration-weighting explanation and that the accessibility tree does not expose an equivalent operable help path.

GREEN must demonstrate on the same exact head:

  • Tab reaches only an actual control, not the static metric card;
  • Enter/Space exposes the matching explanation and the same control can dismiss it without moving focus;
  • accessible name/description identifies which metric the help belongs to;
  • screen-reader/accessibility-tree output includes the explanation while the visible UI remains understandable without relying on title;
  • focus indicator is visible and meets the existing product focus contract;
  • normal, loading/empty where applicable, responsive desktop/tablet/mobile layouts do not clip or overlap the disclosure;
  • KO/EN/JA/ZH/VI/ES/DE/FR text expansion/CJK wrapping/font fallback are verified through the product translation-resource boundary rather than a new hard-coded JS catalog;
  • Playwright E2E asserts behavior, not just source attributes, and current-head screenshots cover the material states.

Delivery Gate

Intentionality: PASS — help is tied to understanding weighted progress.
Functionality: RED until keyboard-operable disclosure exists.
Content fit: PASS — no new decorative card or template section is required.
Resilience: RED until responsive/keyboard states are exercised.
Evidence: RED until current-head browser/accessibility evidence exists.
Uniqueness: N/A; preserve ScopeWeave's current visual language instead of introducing generic tooltip chrome.

Lineage

#634 is being reduced to protected-base equivalence because its implementation is not a valid accessibility delta. A successor may reference this issue, but do not close this issue merely because source attributes exist; require the browser RED→GREEN above.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions