fix: key interaction handling no longer prevents "tab" presses

adobe · Aug 11, 2021 · b542ce8 · b542ce8
1 parent 2639a0f
commit b542ce8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
@@ -32,8 +32,6 @@ import { TinyColor } from '@ctrl/tinycolor';
 
 import styles from './color-area.css.js';
 
-const preventDefault = (event: KeyboardEvent): void => event.preventDefault();
-
 /**
  * @element sp-color-area
  */
@@ -171,6 +169,9 @@ export class ColorArea extends SpectrumElement {
         isString: false,
     };
 
+    @property({ attribute: false })
+    private activeAxis = 'x';
+
     @property({ type: Number })
     public x = 1;
 
@@ -211,15 +212,15 @@ export class ColorArea extends SpectrumElement {
 
     private handleKeydown(event: KeyboardEvent): void {
         const { key, code } = event;
-        event.preventDefault();
         if (['Shift', 'Meta', 'Control', 'Alt'].includes(key)) {
             this.altKeys.add(key);
             this.altered = this.altKeys.size;
         }
         if (code.search('Arrow') === 0) {
             this.activeKeys.add(code);
+            event.preventDefault();
+            this.handleKeypress();
         }
-        this.handleKeypress();
     }
 
     private handleKeypress(): void {
@@ -228,19 +229,15 @@ export class ColorArea extends SpectrumElement {
         this.activeKeys.forEach((code) => {
             switch (code) {
                 case 'ArrowUp':
-                case 'Up':
                     deltaY = this.step * -1;
                     break;
                 case 'ArrowDown':
-                case 'Down':
                     deltaY = this.step * 1;
                     break;
                 case 'ArrowLeft':
-                case 'Left':
                     deltaX = this.step * -1;
                     break;
                 case 'ArrowRight':
-                case 'Right':
                     deltaX = this.step * 1;
                     break;
                 /* c8 ignore next 2 */
@@ -249,8 +246,10 @@ export class ColorArea extends SpectrumElement {
             }
         });
         if (deltaX != 0) {
+            this.activeAxis = 'x';
             this.inputX.focus();
         } else if (deltaY != 0) {
+            this.activeAxis = 'y';
             this.inputY.focus();
         }
 
@@ -281,6 +280,7 @@ export class ColorArea extends SpectrumElement {
     }
 
     private handleKeyup(event: KeyboardEvent): void {
+        event.preventDefault();
         const { key, code } = event;
         if (['Shift', 'Meta', 'Control', 'Alt'].includes(key)) {
             this.altKeys.delete(key);
@@ -439,10 +439,10 @@ export class ColorArea extends SpectrumElement {
                 min="0"
                 max="1"
                 step=${this.step}
+                tabindex=${this.activeAxis === 'x' ? 0 : -1}
                 .value=${String(this.x)}
                 @input=${this.handleInput}
                 @change=${this.handleChange}
-                @keydown=${preventDefault}
             />
             <input
                 type="range"
@@ -452,10 +452,10 @@ export class ColorArea extends SpectrumElement {
                 min="0"
                 max="1"
                 step=${this.step}
+                tabindex=${this.activeAxis === 'y' ? 0 : -1}
                 .value=${String(this.y)}
                 @input=${this.handleInput}
                 @change=${this.handleChange}
-                @keydown=${preventDefault}
             />
         `;
     }

diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
@@ -204,7 +204,6 @@ export class ColorSlider extends Focusable {
     }
 
     private handleKeydown(event: KeyboardEvent): void {
-        event.preventDefault();
         const { key } = event;
         if (['Shift', 'Meta', 'Control', 'Alt'].includes(key)) {
             this.altKeys.add(key);
@@ -224,7 +223,10 @@ export class ColorSlider extends Focusable {
             case 'ArrowRight':
                 delta = this.step * (this.isLTR ? 1 : -1);
                 break;
+            default:
+                return;
         }
+        event.preventDefault();
 
         this.sliderHandlePosition = Math.min(
             100,

diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts
@@ -213,9 +213,29 @@ export class ColorWheel extends Focusable {
             case 'ArrowRight':
                 delta = this.step * (this.isLTR ? 1 : -1);
                 break;
+            default:
+                return;
         }
+        event.preventDefault();
         this.value = (360 + this.value + delta) % 360;
+        this._previousColor = this._color.clone();
         this._color = new TinyColor({ ...this._color.toHsl(), h: this.value });
+        this.dispatchEvent(
+            new Event('input', {
+                bubbles: true,
+                composed: true,
+            })
+        );
+        const applyDefault = this.dispatchEvent(
+            new Event('change', {
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+            })
+        );
+        if (!applyDefault) {
+            this._color = this._previousColor;
+        }
     }
 
     private handleKeyup(event: KeyboardEvent): void {