feat(breadcrumb): add aria-current & update separator style

ovh · Jul 29, 2024 · f1fc685 · f1fc685
1 parent 2dfe1a0
commit f1fc685
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/.../ods/src/components/breadcrumb/src/components/ods-breadcrumb-item/ods-breadcrumb-item.tsx b/.../ods/src/components/breadcrumb/src/components/ods-breadcrumb-item/ods-breadcrumb-item.tsx
@@ -52,7 +52,7 @@ export class OdsBreadcrumbItem {
 
         {
           !this.isExpandable && (this.isLast
-            ? <span class="ods-breadcrumb-item__last">
+            ? <span class="ods-breadcrumb-item__last" aria-current="page">
               { this.label }
             </span>
             : <ods-link

diff --git a/packages/ods/src/components/breadcrumb/src/components/ods-breadcrumb/ods-breadcrumb.scss b/packages/ods/src/components/breadcrumb/src/components/ods-breadcrumb/ods-breadcrumb.scss
@@ -9,9 +9,10 @@ $breadcrumb-spacing: 8px;
   ::slotted(ods-breadcrumb-item:not(:last-child)) {
     &::after {
       padding-left: $breadcrumb-spacing;
+      line-height: 1.5rem;
       color: var(--ods-color-text);
-      font-size: 1.25rem;
-      font-weight: 400;
+      font-size: 1.1rem;
+      font-weight: 700;
       content: '|';
     }
   }

diff --git a/packages/ods/src/components/breadcrumb/tests/accessibility/ods-breadcrumb.e2e.ts b/packages/ods/src/components/breadcrumb/tests/accessibility/ods-breadcrumb.e2e.ts
@@ -20,4 +20,21 @@ describe('ods-breadcrumb accessibility', () => {
     expect(el.shadowRoot).not.toBeNull();
     expect(el.getAttribute('role')).toBe('navigation');
   });
+
+  it('should render the last item with aria-current set', async() => {
+    await setup(`
+<ods-breadcrumb>
+  <ods-breadcrumb-item id="first" label="First">
+  </ods-breadcrumb-item>
+  <ods-breadcrumb-item id="last" label="Last">
+  </ods-breadcrumb-item>
+</ods-breadcrumb>
+    `);
+
+    const firstItem = await page.find('ods-breadcrumb > #first');
+    const lastItem = await page.find('ods-breadcrumb > #last');
+
+    expect(firstItem?.shadowRoot?.querySelector('[aria-current]')).toBeNull();
+    expect(lastItem?.shadowRoot?.querySelector('[aria-current]')).not.toBeNull();
+  });
 });