feat(color-area): separate X and Y aria labels to improve accessibility

Author: hunterloftis

packages/color-area/README.md

@@ -63,3 +63,17 @@ An `<sp-color-area>`’s height and width can be customized appropriately for it
         height: var(--spectrum-global-dimension-size-900)"
 ></sp-color-area>
 ```
+
+## Labels
+
+An `<sp-color-area>` renders accessible labels for each axis: _"saturation"_ and _"luminosity"_.
+Specify `label-x` and `label-y` attributes to override these defaults.
+
+The `label` attribute is **deprecated** in favor of separately labeling each axis.
+
+```html
+<sp-color-area
+    label-x="Color intensity"
+    label-y="Color brightness"
+></sp-color-area>
+```

packages/color-area/src/ColorArea.ts

@@ -49,7 +49,13 @@ export class ColorArea extends SpectrumElement {
     public focused = false;
 
     @property({ type: String })
-    public label = 'saturation and luminosity';
+    public label: string | undefined;
+
+    @property({ type: String, attribute: 'label-x' })
+    public labelX = 'saturation';
+
+    @property({ type: String, attribute: 'label-y' })
+    public labelY = 'luminosity';
 
     @query('.handle')
     private handle!: ColorHandle;
@@ -498,7 +504,7 @@ export class ColorArea extends SpectrumElement {
                     type="range"
                     class="slider"
                     name="x"
-                    aria-label=${this.label}
+                    aria-label=${this.label ?? this.labelX}
                     min="0"
                     max="1"
                     step=${this.step}
@@ -513,7 +519,7 @@ export class ColorArea extends SpectrumElement {
                     type="range"
                     class="slider"
                     name="y"
-                    aria-label=${this.label}
+                    aria-label=${this.label ?? this.labelY}
                     min="0"
                     max="1"
                     step=${this.step}

packages/color-area/test/color-area.test.ts

@@ -97,6 +97,33 @@ describe('ColorArea', () => {
         });
         expect(document.activeElement, 'before input again').to.equal(input1);
     });
+    it('provides separate aria-labels for X and Y inputs', async () => {
+        const el = await fixture<ColorArea>(
+            html`
+                <sp-color-area color="hsl(100, 50%, 50%)"></sp-color-area>
+            `
+        );
+        const inputX = el.shadowRoot.querySelector('input[name="x"]');
+        const inputY = el.shadowRoot.querySelector('input[name="y"]');
+
+        expect(inputX?.getAttribute('aria-label')).to.equal('saturation');
+        expect(inputY?.getAttribute('aria-label')).to.equal('luminosity');
+    });
+    it('overrides both X and Y labels with a provided "label" attribute', async () => {
+        const el = await fixture<ColorArea>(
+            html`
+                <sp-color-area
+                    color="hsl(100, 50%, 50%)"
+                    label="something custom"
+                ></sp-color-area>
+            `
+        );
+        const inputX = el.shadowRoot.querySelector('input[name="x"]');
+        const inputY = el.shadowRoot.querySelector('input[name="y"]');
+
+        expect(inputX?.getAttribute('aria-label')).to.equal('something custom');
+        expect(inputY?.getAttribute('aria-label')).to.equal('something custom');
+    });
     it('accepts "color" values as hsl', async () => {
         const el = await fixture<ColorArea>(
             html`