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 all commits
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
5 changes: 4 additions & 1 deletion packages/core/src/components/breadcrumb/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,8 @@ export class Breadcrumb extends Mixin(...DefaultMixins) {

override render() {
const labelLastItem = this.items?.[this.items.length - 1];
const labelLastItemText =
labelLastItem?.label ?? labelLastItem?.textContent?.trim();

this.inheritAriaAttributes['aria-label'] =
this.inheritAriaAttributes['aria-label'] ?? 'Breadcrumbs';
Expand Down Expand Up @@ -203,11 +205,12 @@ export class Breadcrumb extends Mixin(...DefaultMixins) {

{this.shouldRenderNextDropdown && (
<ix-dropdown-button
label={labelLastItem.label ?? labelLastItem.innerText}
label={labelLastItemText}
class="next-button"
variant="tertiary"
enableTopLayer={this.enableTopLayer}
aria-current="page"
aria-label={`Show ${labelLastItemText} next items`}
Comment on lines +208 to +213

@coderabbitai coderabbitai Bot Aug 5, 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 before merge.

The new aria-label changes the consumer-visible accessibility contract of ix-breadcrumb. No changeset is included in the provided PR files. Add a changeset scoped to the core package with the accessibility behavior and release impact, or explicitly justify why this change is internal-only.

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` around lines 208 -
213, Add a changeset for the core package to document the consumer-visible
accessibility change introduced in breadcrumb.tsx by the new aria-label on the
next button. Update the Breadcrumb component change and include the
accessibility behavior and release impact in the changeset, or if you believe it
is internal-only, explicitly justify that in the same changeset; use the
ix-breadcrumb/Breadcrumb symbols to keep the scope tied to this consumer-facing
API change.

Source: Path instructions

>
<ix-icon
slot="button-label"
Expand Down
36 changes: 36 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 breadcrumb-key="item-3">Item 3</ix-breadcrumb-item>
Comment thread
lakshmi-priya-b marked this conversation as resolved.
</ix-breadcrumb>`);

const results = await makeAxeBuilder().analyze();
expect(results.violations).toEqual([]);
});

regressionTest('renders', async ({ mount, page }) => {
await mount(`
<ix-breadcrumb>
Expand Down Expand Up @@ -223,3 +235,27 @@ 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 next items'
);
}
);
Loading