feat(tags): manage aria-disabled from disabled attribute

adobe · Jul 8, 2020 · 657eba8 · 657eba8
1 parent bbe4ca7
commit 657eba8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/packages/tags/src/tag.ts b/packages/tags/src/tag.ts
@@ -109,4 +109,15 @@ export class Tag extends LitElement {
                 : '-1'
         );
     }
+
+    protected updated(changes: PropertyValues): void {
+        super.updated(changes);
+        if (changes.has('disabled')) {
+            if (this.disabled) {
+                this.setAttribute('aria-disabled', 'true');
+            } else {
+                this.removeAttribute('aria-disabled');
+            }
+        }
+    }
 }
diff --git a/packages/tags/test/tag.test.ts b/packages/tags/test/tag.test.ts
@@ -48,6 +48,26 @@ describe('Tag', () => {
 
         await expect(el).to.be.accessible();
     });
+    it('[disabled] manages [aria-disabled]', async () => {
+        const el = await fixture<Tag>(
+            html`
+                <sp-tags>
+                    <sp-tag>Tag 1</sp-tag>
+                    <sp-tag invalid>Tag 2</sp-tag>
+                    <sp-tag disabled>Tag 3</sp-tag>
+                    <sp-tag deletable>Tag 4</sp-tag>
+                </sp-tags>
+            `
+        );
+        const notDisabled = el.querySelector('sp-tag') as Tag;
+        const disabled = el.querySelector('[disabled]') as Tag;
+
+        await elementUpdated(disabled);
+
+        expect(notDisabled.hasAttribute('aria-disabled')).to.be.false;
+        expect(disabled.hasAttribute('aria-disabled')).to.be.true;
+        expect(disabled.getAttribute('aria-disabled')).to.equal('true');
+    });
     it('dispatches `delete` events on click', async () => {
         const deleteSpy = spy();
         const handleDelete = (): void => deleteSpy();