From f05b27daa0b5348d3e7cb1dafee9cd2d946e51ec Mon Sep 17 00:00:00 2001
From: Westbrook <westbrook.johnson@gmail.com>
Date: Mon, 29 Nov 2021 15:28:10 -0500
Subject: [PATCH] fix(color-area): remove deprecated "label" attribute/property

BREAKING CHANGE: set labels via the label-x/label-y attributes or labelX/labelY properties
---
 packages/color-area/README.md               |  2 --
 packages/color-area/src/ColorArea.ts        |  7 ++-----
 packages/color-area/test/color-area.test.ts | 13 +++++++++----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/color-area/README.md b/packages/color-area/README.md
index f92afc4520..0f2fce9fc0 100644
--- a/packages/color-area/README.md
+++ b/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"
diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
index c852075bc4..67bd5b8115 100644
--- a/packages/color-area/src/ColorArea.ts
+++ b/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}
diff --git a/packages/color-area/test/color-area.test.ts b/packages/color-area/test/color-area.test.ts
index 5ed5f79a47..f3aeb64585 100644
--- a/packages/color-area/test/color-area.test.ts
+++ b/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>(