fix(swatch): mixed-value state must be conveyed to screen readers usi…

…ng ARIA (#3330)

* fix: mixed value state of swatch support aria

* chore: added test to support mixed-value for aria

* chore: updated readme

* fix: removed aria checked from readme

* fix: aria-label fix for swatch in screen reader

* fix: aria-label fix for swatch in screen reader

* chore: added tests

* chore: updated readme and removed comments

* fix: tests

---------

Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com>
Co-authored-by: Najika Halsema Yoo <44980010+najikahalsema@users.noreply.github.com>

packages/swatch/README.md

@@ -208,6 +208,8 @@ The `mixed-value` attribute and `mixedValue` property outline when an `<sp-swatc
 </sp-swatch-group>
 ```
 
+Please note that the `aria-checked="mixed"` value only applies when the swatch is in a group with `selects="multiple"`
+
 ### Nothing
 
 The `nothing` attribute/property outlines that the `<sp-swatch>` represents no color or that it represents "transparent".

packages/swatch/src/Swatch.ts

@@ -223,12 +223,19 @@ export class Swatch extends SizedMixin(Focusable, {
             );
         }
         if (changes.has('label')) {
-            if (this.label) {
+            if (this.label !== this.color && this.label?.length) {
                 this.setAttribute('aria-label', this.label);
+            } else if (this.color !== '') {
+                this.setAttribute('aria-label', this.color);
             } else {
                 this.removeAttribute('aria-label');
             }
         }
+        if (changes.has('mixedValue')) {
+            if (this.mixedValue) {
+                this.setAttribute('aria-checked', 'mixed');
+            }
+        }
     }
 
     protected override firstUpdated(changes: PropertyValues): void {

packages/swatch/test/swatch.test.ts

@@ -40,6 +40,11 @@ describe('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');
+    });
     it('loads [nothing] swatch accessibly', async () => {
         el.nothing = true;
         el.removeAttribute('color');