fix(potentiometer): added keyboard reactions

.gitignore

@@ -6,3 +6,4 @@ build
 *.log
 storybook-static
 custom-elements.json
+.idea

src/potentiometer-element.ts

@@ -33,6 +33,16 @@ export class PotentiometerElement extends LitElement {
         word-spacing: 0px;
         fill: #ffffff;
       }
+      .hide-input {
+        position: absolute;
+        clip: rect(0 0 0 0);
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+      }
+      input:focus + svg #knob {
+        stroke: #ccdae3;
+      }
     `;
   }
 
@@ -53,12 +63,28 @@ export class PotentiometerElement extends LitElement {
     const knobDeg = (this.endDegree - this.startDegree) * percent + this.startDegree;
 
     return html`
+      <input
+        tabindex="0"
+        type="range"
+        class="hide-input"
+        max="${this.max}"
+        min="${this.min}"
+        value="${this.value}"
+        step="${this.step}"
+        aria-valuemin="${this.min}"
+        aria-valuenow="${this.value}"
+        @focus="${() => this.setFilter('0.3')}"
+        @blur="${() => this.setFilter('0')}"
+        @input="${this.onValueChange}"
+      />
       <svg
+        role="slider"
         width="20mm"
         height="20mm"
         version="1.1"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
+        @click="${this.focusInput}"
         @mousedown=${this.down}
         @mousemove=${this.move}
         @mouseup=${this.up}
@@ -69,6 +95,11 @@ export class PotentiometerElement extends LitElement {
           '--knob-angle': knobDeg + 'deg',
         })}
       >
+        <defs>
+          <filter id="outline">
+            <feDropShadow id="glow" dx="0" dy="0" stdDeviation="0" flood-color="cyan" />
+          </filter>
+        </defs>
         <rect
           x=".15"
           y=".15"
@@ -81,6 +112,7 @@ export class PotentiometerElement extends LitElement {
         />
         <rect x="5.4" y=".70" width="9.1" height="1.9" fill="#ccdae3" stroke-width=".15" />
         <ellipse
+          filter="url(#outline)"
           id="knob"
           cx="9.91"
           cy="8.18"
@@ -120,6 +152,23 @@ export class PotentiometerElement extends LitElement {
     `;
   }
 
+  private focusInput() {
+    const inputEl: HTMLInputElement | null | undefined = this.shadowRoot?.querySelector(
+      '.hide-input'
+    );
+    inputEl?.focus();
+  }
+
+  setFilter(value: string) {
+    const glowFilter = this.shadowRoot?.querySelector('#glow');
+    glowFilter?.setAttribute('stdDeviation', value);
+  }
+
+  private onValueChange(event: KeyboardEvent) {
+    const target = event.target as HTMLInputElement;
+    this.updateValue(parseFloat(target.value));
+  }
+
   private down(event: MouseEvent) {
     if (event.button === 0 || window.navigator.maxTouchPoints) {
       this.pressed = true;