From 787cfc1e69d481ff512b6903bde220a00f5534dc Mon Sep 17 00:00:00 2001
From: Mark Maxwell <1mar.max1@gmail.com>
Date: Mon, 18 Mar 2024 15:43:45 -0700
Subject: [PATCH] accessibility fixes

---
 package-lock.json       | 38 ++++++++++++++++++++++++++++++++++++++
 package.json            |  1 +
 src/App.jsx             | 18 ++++++++++++++++--
 src/components/Knob.jsx |  6 ++++++
 4 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d7f2d56..2e6b346 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "grimy",
       "version": "1.0.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"
@@ -947,6 +948,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@originjs/vite-plugin-federation": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@originjs/vite-plugin-federation/-/vite-plugin-federation-1.3.5.tgz",
+      "integrity": "sha512-HNDXADU+14RDKJsEeWErTC6lbGvBNjuYWXCz4BrYtjpOBBbWe2DHivJTKRWKjX6Vd5ycfAl3uy5b4do7qY558A==",
+      "dependencies": {
+        "estree-walker": "^3.0.2",
+        "magic-string": "^0.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0",
+        "pnpm": ">=7.0.1"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.1.tgz",
@@ -1157,6 +1171,11 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
@@ -2119,6 +2138,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3001,6 +3028,17 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
diff --git a/package.json b/package.json
index 128ad12..dea429a 100644
--- 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
index 7c51fb3..e1bd05c 100644
--- 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
index a0b1d58..210d512 100644
--- 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 (