diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx index e851cf9d391..0b1a8e14887 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.tsx +++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx @@ -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'; @@ -203,11 +205,12 @@ export class Breadcrumb extends Mixin(...DefaultMixins) { {this.shouldRenderNextDropdown && ( { + await mount(` + + + + Item 3 + `); + + const results = await makeAxeBuilder().analyze(); + expect(results.violations).toEqual([]); +}); + regressionTest('renders', async ({ mount, page }) => { await mount(` @@ -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(` + + + + + `); + + 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' + ); + } +);