fix(top-nav): default to role="navigation", sprout aria-label when "l…

…abel" applied
adobe · Oct 24, 2023 · bbcea4a · bbcea4a
1 parent 102d0e8
commit bbcea4a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/packages/top-nav/src/TopNav.ts b/packages/top-nav/src/TopNav.ts
@@ -48,6 +48,9 @@ export class TopNav extends SizedMixin(SpectrumElement) {
     @property({ reflect: true })
     public override dir!: 'ltr' | 'rtl';
 
+    @property({ type: String })
+    public label = '';
+
     @property()
     public selectionIndicatorStyle = noSelectionStyle;
 
@@ -120,6 +123,8 @@ export class TopNav extends SizedMixin(SpectrumElement) {
         );
         if (selectedChild) {
             this.selectTarget(selectedChild);
+        } else {
+            this.selected = '';
         }
     }
 
@@ -141,6 +146,7 @@ export class TopNav extends SizedMixin(SpectrumElement) {
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         this.setAttribute('direction', 'horizontal');
+        this.setAttribute('role', 'navigation');
     }
 
     protected override updated(changes: PropertyValues): void {
@@ -154,6 +160,16 @@ export class TopNav extends SizedMixin(SpectrumElement) {
         ) {
             this.shouldAnimate = true;
         }
+        if (
+            changes.has('label') &&
+            (this.label || typeof changes.get('label') !== 'undefined')
+        ) {
+            if (this.label.length) {
+                this.setAttribute('aria-label', this.label);
+            } else {
+                this.removeAttribute('aria-label');
+            }
+        }
     }
 
     private selectTarget(target: TopNavItem): void {

diff --git a/packages/top-nav/stories/top-nav.stories.ts b/packages/top-nav/stories/top-nav.stories.ts
@@ -77,7 +77,9 @@ export const Selected = (): TemplateResult => {
                 Page 1
             </sp-top-nav-item>
             <sp-top-nav-item href="#page-2">Page 2</sp-top-nav-item>
-            <sp-top-nav-item href=${href}>Page 3</sp-top-nav-item>
+            <sp-top-nav-item href=${href} class="selected">
+                Page 3
+            </sp-top-nav-item>
             <sp-top-nav-item href="#page-4">
                 Page with Really Long Name
             </sp-top-nav-item>

diff --git a/packages/top-nav/test/top-nav.test.ts b/packages/top-nav/test/top-nav.test.ts
@@ -26,6 +26,19 @@ describe('TopNav', () => {
 
         await expect(el).to.be.accessible();
     });
+    it('accepts and removes `label` accessibly', async () => {
+        const el = await fixture<TopNav>(Default());
+
+        await elementUpdated(el);
+
+        el.label = 'Page';
+        await elementUpdated(el);
+        await expect(el).to.be.accessible();
+
+        el.label = '';
+        await elementUpdated(el);
+        await expect(el).to.be.accessible();
+    });
     it('loads with a selected item accessible', async () => {
         const el = await fixture<TopNav>(Selected());
 
@@ -55,6 +68,20 @@ describe('TopNav', () => {
 
         expect(widthStart).to.be.greaterThan(widthEnd);
     });
+    it('can have an item removed', async () => {
+        const el = await fixture<TopNav>(Selected());
+        const item = el.querySelector('.selected') as TopNavItem;
+
+        await elementUpdated(el);
+        await elementUpdated(item);
+
+        expect(el.selected).to.equal(item.value);
+
+        item.remove();
+        await elementUpdated(el);
+
+        expect(el.selected).to.not.equal(item.value);
+    });
 });
 
 describe('TopNavItem', () => {