Skip to content

Commit

Permalink
fix(color-slider): announce new value on change after keydown (#3304)
Browse files Browse the repository at this point in the history 
* fix(color-slider): sp-color-slider fails to announce new value on change after keydown #3303

* fix(color-slider): add expect(el.value) to keyboard tests

* refactor: test handle position more uniformly

---------

Co-authored-by: Westbrook Johnson <wesjohns@adobe.com>
  • Loading branch information
@majornista @Westbrook
majornista and Westbrook committed Jul 11, 2023
1 parent 2e9ca15 commit d70d0ae
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 10 deletions.
7 changes: 5 additions & 2 deletions packages/color-slider/src/ColorSlider.ts
View file
Expand Up @@ -138,11 +138,13 @@ 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.value = Math.min(100, Math.max(0, this.value + delta));
this.colorController.applyColorFromState();

if (delta != 0) {
Expand Down Expand Up @@ -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}
Expand Down
55 changes: 47 additions & 8 deletions packages/color-slider/test/color-slider.test.ts
View file
Expand Up @@ -86,6 +86,7 @@ describe('ColorSlider', () => {
await sendKeys({
press: 'ArrowRight',
});
await elementUpdated(el);
expect(el.value).to.not.equal(value);
await sendKeys({
press: 'Tab',
Expand Down Expand Up @@ -217,6 +218,7 @@ describe('ColorSlider', () => {
await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(0);
expect(el.value).to.equal(0);

const input = el.focusElement;

Expand All @@ -227,7 +229,11 @@ describe('ColorSlider', () => {

await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(2);
expect(el.sliderHandlePosition).to.be.approximately(
(2 * 100) / 360,
0.000001
);
expect(el.value).to.equal(2);

input.dispatchEvent(arrowRightEvent());
input.dispatchEvent(arrowRightKeyupEvent());
Expand All @@ -236,7 +242,11 @@ describe('ColorSlider', () => {

await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(4);
expect(el.sliderHandlePosition).to.be.approximately(
(4 * 100) / 360,
0.000001
);
expect(el.value).to.equal(4);

input.dispatchEvent(arrowDownEvent());
input.dispatchEvent(arrowDownKeyupEvent());
Expand All @@ -245,7 +255,11 @@ describe('ColorSlider', () => {

await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(2);
expect(el.sliderHandlePosition).to.be.approximately(
(2 * 100) / 360,
0.000001
);
expect(el.value).to.equal(2);

input.dispatchEvent(arrowLeftEvent());
input.dispatchEvent(arrowLeftKeyupEvent());
Expand All @@ -255,6 +269,7 @@ describe('ColorSlider', () => {
await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(0);
expect(el.value).to.equal(0);
});
it('accepts "Arrow*" keypresses in dir="rtl"', async () => {
const el = await fixture<ColorSlider>(
Expand All @@ -276,7 +291,11 @@ describe('ColorSlider', () => {

await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(2);
expect(el.sliderHandlePosition).to.be.approximately(
(2 * 100) / 360,
0.000001
);
expect(el.value).to.equal(2);

input.dispatchEvent(arrowRightEvent());
input.dispatchEvent(arrowRightKeyupEvent());
Expand All @@ -286,6 +305,7 @@ describe('ColorSlider', () => {
await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(0);
expect(el.value).to.equal(0);

input.dispatchEvent(arrowLeftEvent());
input.dispatchEvent(arrowLeftKeyupEvent());
Expand All @@ -294,7 +314,11 @@ describe('ColorSlider', () => {

await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(2);
expect(el.sliderHandlePosition).to.be.approximately(
(2 * 100) / 360,
0.000001
);
expect(el.value).to.equal(2);

input.dispatchEvent(arrowDownEvent());
input.dispatchEvent(arrowDownKeyupEvent());
Expand All @@ -304,6 +328,7 @@ describe('ColorSlider', () => {
await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(0);
expect(el.value).to.equal(0);
});
it('accepts "Arrow*" keypresses with alteration', async () => {
const el = await fixture<ColorSlider>(
Expand All @@ -315,6 +340,7 @@ describe('ColorSlider', () => {
await elementUpdated(el);
el.focus();
expect(el.sliderHandlePosition).to.equal(0);
expect(el.value).to.equal(0);

await sendKeys({
down: 'Shift',
Expand All @@ -328,7 +354,11 @@ describe('ColorSlider', () => {

await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(20);
expect(el.sliderHandlePosition).to.be.approximately(
(20 * 100) / 360,
0.000001
);
expect(el.value).to.equal(20);

await sendKeys({
press: 'ArrowRight',
Expand All @@ -339,7 +369,11 @@ describe('ColorSlider', () => {

await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(40);
expect(el.sliderHandlePosition).to.be.approximately(
(40 * 100) / 360,
0.000001
);
expect(el.value).to.equal(40);

await sendKeys({
press: 'ArrowDown',
Expand All @@ -350,7 +384,11 @@ describe('ColorSlider', () => {

await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(20);
expect(el.sliderHandlePosition).to.be.approximately(
(20 * 100) / 360,
0.000001
);
expect(el.value).to.equal(20);

await sendKeys({
press: 'ArrowLeft',
Expand All @@ -365,6 +403,7 @@ describe('ColorSlider', () => {
await elementUpdated(el);

expect(el.sliderHandlePosition).to.equal(0);
expect(el.value).to.equal(0);
});
it('accepts pointer events', async () => {
const color = new TinyColor({ h: '0', s: '20%', l: '70%' });
Expand Down

0 comments on commit d70d0ae

Please sign in to comment.