Skip to content

fix(core/breadcrumb): add missing aria-label to next items dropdown button of breadcrumb #2683

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lakshmi-priya-b wants to merge 3 commits into
base: main
Choose a base branch
from
+40 −1
Open

fix(core/breadcrumb): add missing aria-label to next items dropdown button of breadcrumb #2683

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
358adb1
fix(core/breadcrumb): add missing aria-label to next items dropdown b…
lakshmi-priya-b Jul 30, 2026
b1ada79
update accessibility test to render and validate next-items button ar…
lakshmi-priya-b Aug 5, 2026
5f8beb4
update accessibility test
lakshmi-priya-b Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/core/src/components/breadcrumb/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@ export class Breadcrumb extends Mixin(...DefaultMixins) {
variant="tertiary"
enableTopLayer={this.enableTopLayer}
aria-current="page"
aria-label={`Show ${labelLastItem.label ?? labelLastItem.innerText}`}

@coderabbitai coderabbitai Bot Aug 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Add the required changeset.

This change modifies consumer-visible accessibility behavior in packages/core. Add a changeset with the relevant package scope, or explicitly justify why the change is internal-only. Include migration guidance if this is a major release change.

As per path instructions, changesets are required for accessibility and other consumer-relevant behavior changes.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/core/src/components/breadcrumb/breadcrumb.tsx` at line 211, Add a
changeset for the consumer-visible accessibility update in the core package,
describing the breadcrumb aria-label behavior change and assigning the
appropriate release impact. If this requires a major release, include migration
guidance; otherwise, keep the changeset scoped to the relevant package.

Source: Path instructions

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Reuse BreadcrumbItem's text fallback.

BreadcrumbItem.render() in packages/core/src/components/breadcrumb-item/breadcrumb-item.tsx uses label ?? hostElement.textContent?.trim(). This code uses innerText instead. When the last item uses slotted text and becomes invisible, innerText can omit that text. The dropdown can then expose aria-label="Show " or a different name.

Compute one trimmed fallback and reuse it for the label at Line 206 and this aria-label. Add a regression case with slotted text.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/core/src/components/breadcrumb/breadcrumb.tsx` at line 211, Update
the last-item breadcrumb rendering to use the same trimmed text fallback as
BreadcrumbItem.render(), preferring label and then
hostElement.textContent?.trim() rather than innerText. Compute this fallback
once and reuse it for both the label at the surrounding render logic and the
aria-label, and add a regression case covering slotted text when the item is
invisible.

>
<ix-icon
slot="button-label"
Expand Down
33 changes: 33 additions & 0 deletions packages/core/src/components/breadcrumb/test/breadcrumb.ct.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,18 @@
import { Locator } from '@playwright/test';
import { regressionTest, expect } from '@utils/test';

regressionTest('accessibility', async ({ mount, makeAxeBuilder }) => {
await mount(`
<ix-breadcrumb>
<ix-breadcrumb-item label="Item 1" breadcrumb-key="item-1"></ix-breadcrumb-item>
<ix-breadcrumb-item label="Item 2" breadcrumb-key="item-2"></ix-breadcrumb-item>
<ix-breadcrumb-item label="Item 3" breadcrumb-key="item-3"></ix-breadcrumb-item>
</ix-breadcrumb>`);

const results = await makeAxeBuilder().analyze();
expect(results.violations).toEqual([]);
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.

regressionTest('renders', async ({ mount, page }) => {
await mount(`
<ix-breadcrumb>
Expand Down Expand Up @@ -223,3 +235,24 @@ regressionTest.describe('keyboard navigation', () => {
await expect(item2).toHaveVisibleFocus();
});
});

regressionTest(
'should set aria-label on next dropdown button matching last item label',
async ({ mount, page }) => {
await mount(`
<ix-breadcrumb>
<ix-breadcrumb-item label="Item 1" breadcrumb-key="item-1"></ix-breadcrumb-item>
<ix-breadcrumb-item label="Item 2" breadcrumb-key="item-2"></ix-breadcrumb-item>
<ix-breadcrumb-item label="Item 3" breadcrumb-key="item-3"></ix-breadcrumb-item>
</ix-breadcrumb>`);

const breadcrumb = page.locator('ix-breadcrumb');
await breadcrumb.evaluate((bc: HTMLIxBreadcrumbElement) => {
bc.nextItems = [{ label: 'Next Item 1', breadcrumbKey: 'next-item-1' }];
});

const nextButton = breadcrumb.locator('ix-dropdown-button.next-button');
await expect(nextButton).toBeVisible();
await expect(nextButton).toHaveAttribute('aria-label', 'Show Item 3');
}
);
Loading