Fab — accessibility

Keyboard

  • Tab reaches the Fab after the page content (it is portalled to the end of <body>); Enter / Space runs the action.

ARIA

  • Round Fab: aria-label and title = the primary's label („Nový kontakt").
  • Extended Fab: the visible label is the accessible name; no aria-label.
  • Disabled (or loading) = native disabled.
  • On desktop no Fab is rendered at all — the bar's primary Button is the only element with that name (no duplicate for screen readers).

Focus

  • :focus-visible draws a 2 px --accent outline with a 2 px offset.

Contrast

  • --fg-on-accent on --accent — the same pair as the primary Button.

Known limits

  • The Fab covers content while scrolling (by design); at the end of a list the content ends above the Fab lane.

Source: docs/button/fab.a11y.md · GitLab