ni / ni/nimble

Address breadcrumb `aria-current` issues

Open
#2,228 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

tech debt
Dominant language
TypeScript
Stars
39
Forks
14
Avg merge
1d 16h
Merged PRs (30d)
13

Description

🧹 Tech Debt

FAST's breadcrumb has logic for updating aria-current on breadcrumb items, but there are multiple issues with it:

  1. The logic assumes that the last breadcrumb item (the one for the current page) has href='' set on it. The Nimble breadcrumb documentation and Storybook example do not state or follow that convention.

    • If href is not set, aria-current does not get set.
    • Note that the breadcrumb item template bakes in this assumption by not rendering a link when its href is ''. This is reasonable, given that href='' indicates the current page, and the breadcrumb item for the current page should render as non-interactive text.
  2. The code queries into the shadowRoots of child BreadcrumbItems.

  3. The code is only run when slotted items change. It does not respond to changes in those slotted breadcrumbs' href values or changes in their children,. We need to consider the implications and ensure all valid use patterns result in aria-current being set correctly.

  4. The logic implies that breadcrumb items support native a elements as content (as an alternative to setting an href directly on the breadcrumb item). Nimble breadcrumb items do not support that.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the breadcrumb.ts aria-current logic linked in the issue, then compare it with the Nimble breadcrumb documentation and Storybook example. Trace valid href, slotted-content, and child-change patterns; done means every supported current-page pattern sets aria-current without querying child shadow roots.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.