diff --git a/packages/primeng/src/breadcrumb/breadcrumb.spec.ts b/packages/primeng/src/breadcrumb/breadcrumb.spec.ts
index a7fac655d57..e287a661892 100644
--- a/packages/primeng/src/breadcrumb/breadcrumb.spec.ts
+++ b/packages/primeng/src/breadcrumb/breadcrumb.spec.ts
@@ -10,7 +10,7 @@ import { Breadcrumb } from './breadcrumb';
@Component({
standalone: false,
- template: ` `
+ template: ` `
})
class TestBasicBreadcrumbComponent {
model: MenuItem[] | undefined = [
@@ -22,6 +22,8 @@ class TestBasicBreadcrumbComponent {
style: { [key: string]: any } | undefined;
styleClass: string | undefined;
homeAriaLabel: string | undefined = 'Home';
+ ariaLabel: string | undefined;
+ ariaLabelledBy: string | undefined;
clickedItem: BreadcrumbItemClickEvent | undefined;
onItemClick(event: BreadcrumbItemClickEvent) {
@@ -231,6 +233,8 @@ describe('Breadcrumb', () => {
expect(freshBreadcrumb.style).toBeUndefined();
expect(freshBreadcrumb.styleClass).toBeUndefined();
expect(freshBreadcrumb.homeAriaLabel).toBeUndefined();
+ expect(freshBreadcrumb.ariaLabel).toBeUndefined();
+ expect(freshBreadcrumb.ariaLabelledBy).toBeUndefined();
});
it('should accept custom values', async () => {
@@ -241,6 +245,8 @@ describe('Breadcrumb', () => {
component.home = testHome;
component.styleClass = 'custom-class';
component.homeAriaLabel = 'Custom Home';
+ component.ariaLabel = 'Main breadcrumb';
+ component.ariaLabelledBy = 'breadcrumb-heading';
fixture.changeDetectorRef.markForCheck();
await fixture.whenStable();
fixture.detectChanges();
@@ -249,6 +255,8 @@ describe('Breadcrumb', () => {
expect(breadcrumbInstance.home).toBe(testHome);
expect(breadcrumbInstance.styleClass).toBe('custom-class');
expect(breadcrumbInstance.homeAriaLabel).toBe('Custom Home');
+ expect(breadcrumbInstance.ariaLabel).toBe('Main breadcrumb');
+ expect(breadcrumbInstance.ariaLabelledBy).toBe('breadcrumb-heading');
});
it('should initialize templates properties', () => {
@@ -309,12 +317,34 @@ describe('Breadcrumb', () => {
expect(breadcrumbInstance.homeAriaLabel).toBe('Go to home page');
});
+ it('should bind aria label to the navigation landmark', async () => {
+ component.ariaLabel = 'Primary breadcrumb';
+ fixture.changeDetectorRef.markForCheck();
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ const nav = fixture.debugElement.query(By.css('nav'));
+ expect(nav.nativeElement.getAttribute('aria-label')).toBe('Primary breadcrumb');
+ });
+
+ it('should bind aria labelledby to the navigation landmark', async () => {
+ component.ariaLabelledBy = 'breadcrumb-title';
+ fixture.changeDetectorRef.markForCheck();
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ const nav = fixture.debugElement.query(By.css('nav'));
+ expect(nav.nativeElement.getAttribute('aria-labelledby')).toBe('breadcrumb-title');
+ });
+
it('should handle undefined inputs', async () => {
component.model = undefined as any;
component.home = undefined as any;
component.style = undefined as any;
component.styleClass = undefined as any;
component.homeAriaLabel = undefined as any;
+ component.ariaLabel = undefined as any;
+ component.ariaLabelledBy = undefined as any;
fixture.changeDetectorRef.markForCheck();
await fixture.whenStable();
fixture.detectChanges();
@@ -324,6 +354,8 @@ describe('Breadcrumb', () => {
expect(breadcrumbInstance.style).toBeUndefined();
expect(breadcrumbInstance.styleClass).toBeUndefined();
expect(breadcrumbInstance.homeAriaLabel).toBeUndefined();
+ expect(breadcrumbInstance.ariaLabel).toBeUndefined();
+ expect(breadcrumbInstance.ariaLabelledBy).toBeUndefined();
});
});
diff --git a/packages/primeng/src/breadcrumb/breadcrumb.ts b/packages/primeng/src/breadcrumb/breadcrumb.ts
index f47e4dbed47..b031eba4245 100755
--- a/packages/primeng/src/breadcrumb/breadcrumb.ts
+++ b/packages/primeng/src/breadcrumb/breadcrumb.ts
@@ -21,7 +21,7 @@ const BREADCRUMB_INSTANCE = new InjectionToken('BREADCRUMB_INSTANCE'
standalone: true,
imports: [CommonModule, RouterModule, RouterLink, RouterLinkActive, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule, Bind, Badge],
template: `
-