fix(swatch): sync aria-label with changes in label, color, and mixed …

…state (#4519) Co-authored-by: rmanole <rmanole@adobe.com>
adobe · Jun 4, 2024 · 50aef31 · 50aef31
1 parent 8f3993e
commit 50aef31
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
@@ -234,20 +234,23 @@ export class Swatch extends SizedMixin(Focusable, {
                 this.selected ? 'true' : 'false'
             );
         }
-        if (changes.has('label')) {
+
+        // aria-label should be in sync with changes in label and color.
+        if (
+            changes.has('label') ||
+            changes.has('color') ||
+            changes.has('mixedValue')
+        ) {
             if (this.label !== this.color && this.label?.length) {
                 this.setAttribute('aria-label', this.label);
-            } else if (this.color !== '') {
+            } else if (this.color) {
                 this.setAttribute('aria-label', this.color);
+            } else if (this.mixedValue) {
+                this.setAttribute('aria-label', 'Mixed');
             } else {
                 this.removeAttribute('aria-label');
             }
         }
-        if (changes.has('mixedValue')) {
-            if (this.mixedValue) {
-                this.setAttribute('aria-checked', 'mixed');
-            }
-        }
     }
 
     protected override firstUpdated(changes: PropertyValues): void {

diff --git a/packages/swatch/test/swatch.test.ts b/packages/swatch/test/swatch.test.ts
@@ -21,29 +21,39 @@ import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
 describe('Swatch', () => {
     let el: Swatch;
     beforeEach(async () => {
-        el = await fixture<Swatch>(
-            html`
-                <sp-swatch color="red" label="Red"></sp-swatch>
-            `
-        );
+        el = await fixture<Swatch>(html`
+            <sp-swatch color="red" label="Red"></sp-swatch>
+        `);
 
         await elementUpdated(el);
     });
     testForLitDevWarnings(
         async () =>
-            await fixture<Swatch>(
-                html`
-                    <sp-swatch color="red" label="Red"></sp-swatch>
-                `
-            )
+            await fixture<Swatch>(html`
+                <sp-swatch color="red" label="Red"></sp-swatch>
+            `)
     );
     it(`loads default swatch accessibly`, async () => {
         await expect(el).to.be.accessible();
     });
     it('loads [mixed-value] swatch accessibly', async () => {
         el.mixedValue = true;
         await expect(el).to.be.accessible();
-        expect(el.getAttribute('aria-checked')).to.equal('mixed');
+
+        // The provided label takes precedence over any default label.
+        expect(el.getAttribute('aria-label')).to.equal('Red');
+
+        el.removeAttribute('label');
+        await elementUpdated(el);
+
+        // The color takes precedence over the "mixed" label.
+        expect(el.getAttribute('aria-label')).to.equal('red');
+
+        el.removeAttribute('color');
+        await elementUpdated(el);
+
+        // No label + no color => the default label for the current state is used.
+        expect(el.getAttribute('aria-label')).to.equal('Mixed');
     });
     it('loads [nothing] swatch accessibly', async () => {
         el.nothing = true;