accessibility fixes

mark-mxwl · Mar 18, 2024 · 787cfc1 · 787cfc1
1 parent 229ba50
commit 787cfc1
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@originjs/vite-plugin-federation": "^1.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.10"

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react";
 import { useState, useEffect } from "react";
 import Knob from "./components/Knob.jsx";
 import DragDrop from "./components/DragDrop.jsx";
 import InfoModal from "./components/InfoModal.jsx";
-import "./App.css"
+import "./App.css";
 
 const ctx = new AudioContext();
 const reader1 = new FileReader();
@@ -363,21 +363,35 @@ export default function App() {
               <div className="control-bar-filter">
                 {"@"} Filter{" "}
                 <a
+                  title="Filter On"
                   onClick={handleFilterClick}
                   style={{
                     color: !toggleFilter && "gray",
                     filter: !toggleFilter && "none",
                   }}
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleFilterClick();
+                    }
+                  }}
                 >
                   On
                 </a>
                 {" | "}
                 <a
+                  title="Filter Off"
                   onClick={handleFilterClick}
                   style={{
                     color: toggleFilter && "gray",
                     filter: toggleFilter && "none",
                   }}
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleFilterClick();
+                    }
+                  }}
                 >
                   Off
                 </a>

diff --git a/src/components/Knob.jsx b/src/components/Knob.jsx
@@ -108,6 +108,12 @@ export default function Knob(props) {
         }
       })
     );
+
+    currentValueRef.current.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+      }
+    });
   }
 
   return (