Skip to content

fix(Breadcrumbs): expose collapsed-items count and aria-expanded on expander#634

Open
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/breadcrumbs-collapsed-a11y-614
Open

fix(Breadcrumbs): expose collapsed-items count and aria-expanded on expander#634
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/breadcrumbs-collapsed-a11y-614

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Description

Collapsed breadcrumb items are invisible to screen readers: the ellipsis hardcodes aria-hidden="true" and is non-interactive, so truncated levels are unreachable by AT and there is no disclosure path to reveal them.

This PR makes the ellipsis an optional disclosure toggle and exposes the hidden-item count:

  • BreadcrumbsEllipsis gains an interactive prop. When set, aria-hidden is no longer hardcoded and the attrs expose aria-expanded (false collapsed / true expanded), an aria-label announcing the hidden count (new locale key Breadcrumbs.expand, e.g. "Show 3 more breadcrumbs"), role="button"/tabindex="0" when not rendered as a native button, and click + Enter/Space activation. The accessible name stays stable while the disclosure is open. Non-interactive behavior is unchanged.
  • BreadcrumbsRoot tracks disclosure state (expanded) and hiddenCount in its context; when expanded, the visibility watcher reveals all collapsed content and keeps the ellipsis visible so it can serve as the collapse toggle.
  • BreadcrumbsItem now exposes aria-hidden="true" in its slot attrs while collapsed, so renderless consumers that keep collapsed items rendered still remove them from the a11y tree.
  • Added Breadcrumbs.expand to the built-in English messages.

Tests

  • Interactive ellipsis exposes aria-expanded, count label, role/tabindex, and activation handlers; native as="button" omits the redundant ones
  • Click and Enter/Space toggle aria-expanded
  • Locale override for the disclosure label
  • Expanding reveals all collapsed items and hiddenCount returns when collapsed again
  • Collapsed items expose aria-hidden="true" in slot attrs

All 76 Breadcrumbs tests pass; lint and typecheck clean.

Closes #614

@github-actions

github-actions Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Changeset found — this change will be included in the next release. Thanks!

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Breadcrumbs: collapsed items vanish from the a11y tree with no disclosure path

1 participant