fix(color-area): remove deprecated "label" attribute/property

BREAKING CHANGE: set labels via the label-x/label-y attributes or labelX/labelY properties

Author: Westbrook

packages/color-area/README.md

@@ -69,8 +69,6 @@ An `<sp-color-area>`’s height and width can be customized appropriately for it
 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"

packages/color-area/src/ColorArea.ts

@@ -50,9 +50,6 @@ export class ColorArea extends SpectrumElement {
     @property({ type: Boolean, reflect: true })
     public focused = false;
 
-    @property({ type: String })
-    public label: string | undefined;
-
     @property({ type: String, attribute: 'label-x' })
     public labelX = 'saturation';
 
@@ -487,7 +484,7 @@ export class ColorArea extends SpectrumElement {
                     type="range"
                     class="slider"
                     name="x"
-                    aria-label=${this.label ?? this.labelX}
+                    aria-label=${this.labelX}
                     min="0"
                     max="1"
                     step=${this.step}
@@ -502,7 +499,7 @@ export class ColorArea extends SpectrumElement {
                     type="range"
                     class="slider"
                     name="y"
-                    aria-label=${this.label ?? this.labelY}
+                    aria-label=${this.labelY}
                     min="0"
                     max="1"
                     step=${this.step}

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

@@ -109,20 +109,25 @@ describe('ColorArea', () => {
         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 () => {
+    it('overrides both X and Y labels with a provided custom attributes', async () => {
         const el = await fixture<ColorArea>(
             html`
                 <sp-color-area
                     color="hsl(100, 50%, 50%)"
-                    label="something custom"
+                    label-x="something custom, saturation"
+                    label-y="something custom, luminosity"
                 ></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');
+        expect(inputX?.getAttribute('aria-label')).to.equal(
+            'something custom, saturation'
+        );
+        expect(inputY?.getAttribute('aria-label')).to.equal(
+            'something custom, luminosity'
+        );
     });
     it('accepts "color" values as hsl', async () => {
         const el = await fixture<ColorArea>(