fix(color-slider): sp-color-slider fails to announce new value on cha…

…nge after keydown #3303
adobe · Jun 9, 2023 · 214183d · 214183d
1 parent a447ba2
commit 214183d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
@@ -138,9 +138,11 @@ export class ColorSlider extends Focusable {
         }
         event.preventDefault();
 
+        const range = 360;
+        const mult = 100 / range;
         this.sliderHandlePosition = Math.min(
             100,
-            Math.max(0, this.sliderHandlePosition + delta)
+            Math.max(0, this.sliderHandlePosition + delta * mult)
         );
         this.value = 360 * (this.sliderHandlePosition / 100);
         this.colorController.applyColorFromState();
@@ -334,6 +336,7 @@ export class ColorSlider extends Focusable {
                 step=${this.step}
                 aria-label=${this.label}
                 .value=${String(this.value)}
+                aria-valuetext=${`${Math.round(this.value)}°`}
                 @input=${this.handleInput}
                 @change=${this.handleChange}
                 @keydown=${this.handleKeydown}

diff --git a/packages/color-slider/test/color-slider.test.ts b/packages/color-slider/test/color-slider.test.ts
@@ -86,6 +86,7 @@ describe('ColorSlider', () => {
         await sendKeys({
             press: 'ArrowRight',
         });
+        await elementUpdated(el);
         expect(el.value).to.not.equal(value);
         await sendKeys({
             press: 'Tab',
@@ -215,7 +216,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(2);
+        expect(el.sliderHandlePosition).to.equal((2 * 100) / 360);
 
         input.dispatchEvent(arrowRightEvent());
         input.dispatchEvent(arrowRightKeyupEvent());
@@ -224,7 +225,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(4);
+        expect(el.sliderHandlePosition).to.equal((4 * 100) / 360);
 
         input.dispatchEvent(arrowDownEvent());
         input.dispatchEvent(arrowDownKeyupEvent());
@@ -233,7 +234,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(2);
+        expect(el.sliderHandlePosition).to.equal((2 * 100) / 360);
 
         input.dispatchEvent(arrowLeftEvent());
         input.dispatchEvent(arrowLeftKeyupEvent());
@@ -264,7 +265,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(2);
+        expect(el.sliderHandlePosition).to.equal(0.5555555555555556);
 
         input.dispatchEvent(arrowRightEvent());
         input.dispatchEvent(arrowRightKeyupEvent());
@@ -282,7 +283,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(2);
+        expect(el.sliderHandlePosition).to.equal(0.5555555555555556);
 
         input.dispatchEvent(arrowDownEvent());
         input.dispatchEvent(arrowDownKeyupEvent());
@@ -316,7 +317,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(20);
+        expect(el.sliderHandlePosition).to.equal(20 / 3.6);
 
         await sendKeys({
             press: 'ArrowRight',
@@ -327,7 +328,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(40);
+        expect(el.sliderHandlePosition).to.equal(40 / 3.6);
 
         await sendKeys({
             press: 'ArrowDown',
@@ -338,7 +339,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(20);
+        expect(el.sliderHandlePosition).to.equal(5.5555555555555545);
 
         await sendKeys({
             press: 'ArrowLeft',