feat: better component accessibility (#8)

adithyasource · May 28, 2024 · bde50cb · bde50cb
1 parent 27fb8cf
commit bde50cb
Show file tree

Hide file tree

Showing 13 changed files with 491 additions and 161 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.css b/src/App.css
@@ -115,7 +115,13 @@ body {
 button:focus,
 input:focus,
 select:focus {
-  outline: 0;
+  outline: none;
+}
+
+body.user-is-tabbing button:focus,
+body.user-is-tabbing input:focus,
+body.user-is-tabbing select:focus {
+  outline: 1px solid white;
 }
 
 img {
@@ -198,7 +204,6 @@ input:active,
   transition: 0.08s;
 } */
 
-button,
 input,
 #searchInput {
   transition: 0.2s;

diff --git a/src/App.jsx b/src/App.jsx
@@ -53,6 +53,8 @@ import {
   setTotalImportedSteamGames,
   setZoomLevel,
   zoomLevel,
+  setFocusGames,
+  setFocusSearchedGames,
 } from "./Signals";
 
 import { SideBar } from "./SideBar";
@@ -739,38 +741,67 @@ function App() {
     });
   }
 
-  document.addEventListener("contextmenu", (event) => event.preventDefault());
+  function addEventListeners() {
+    document.addEventListener("contextmenu", (event) => event.preventDefault());
 
-  document.addEventListener("keyup", (e) => {
-    for (let i = 0; i < document.querySelectorAll(".sideBarGame").length; i++) {
-      document.querySelectorAll(".sideBarGame")[i].style.cursor = "grab";
-    }
+    document.addEventListener("keyup", (e) => {
+      for (
+        let i = 0;
+        i < document.querySelectorAll(".sideBarGame").length;
+        i++
+      ) {
+        document.querySelectorAll(".sideBarGame")[i].style.cursor = "grab";
+      }
 
-    for (let i = 0; i < document.querySelectorAll(".sideBarGame").length; i++) {
-      document.querySelectorAll(".sideBarGame")[i].classList.remove(
-        "hint--right",
-        "hint--no-animate",
+      for (
+        let i = 0;
+        i < document.querySelectorAll(".sideBarGame").length;
+        i++
+      ) {
+        document.querySelectorAll(".sideBarGame")[i].classList.remove(
+          "hint--right",
+          "hint--no-animate",
 
-        "hint--no-arrow",
-      );
-    }
+          "hint--no-arrow",
+        );
+      }
+
+      for (let i = 0; i < document.querySelectorAll(".gameCard").length; i++) {
+        document.querySelectorAll(".gameCard")[i].classList.remove(
+          "hint--center",
+          "hint--no-animate",
+
+          "hint--no-arrow",
+        );
+      }
+    });
 
-    for (let i = 0; i < document.querySelectorAll(".gameCard").length; i++) {
-      document.querySelectorAll(".gameCard")[i].classList.remove(
-        "hint--center",
-        "hint--no-animate",
+    let body = document.body;
 
-        "hint--no-arrow",
-      );
+    function handleFirstTab(e) {
+      if (e.key === "Tab") {
+        body.classList.add("user-is-tabbing");
+        window.removeEventListener("keydown", handleFirstTab);
+        window.addEventListener("mousedown", handleMouseDown);
+      }
     }
-  });
+
+    function handleMouseDown() {
+      body.classList.remove("user-is-tabbing");
+      window.removeEventListener("mousedown", handleMouseDown);
+      window.addEventListener("keydown", handleFirstTab);
+    }
+
+    window.addEventListener("keydown", handleFirstTab);
+  }
 
   onMount(async () => {
     await getData();
     window.addEventListener("resize", () => {
       setWindowWidth(window.innerWidth);
     });
     invoke("show_window");
+    addEventListeners();
   });
 
   return (
@@ -839,13 +870,13 @@ function App() {
 
       <div className={`h-full flex gap-[30px] overflow-y-hidden`}>
         <Show when={showSideBar() == false && windowWidth() >= 1000}>
-          <div
+          <button
             className={`absolute right-[31px] top-[32px] z-20 rotate-180 cursor-pointer hover:bg-[#D6D6D6] dark:hover:bg-[#232323] duration-150 p-2 w-[25.25px] rounded-[${
               roundedBorders() ? "6px" : "0px"
             }]`}
             onClick={toggleSideBar}>
             <ChevronArrows />
-          </div>
+          </button>
         </Show>
         <Show when={showSideBar() && windowWidth() >= 1000}>
           <SideBar />
@@ -1132,10 +1163,11 @@ function App() {
                         }
                         `}>
                         <For each={folder.games}>
-                          {(gameName) => {
+                          {(gameName, index) => {
                             return (
-                              <div
-                                className="relative w-full bg-transparent cursor-pointer gameCard group"
+                              <button
+                                className="relative w-full bg-transparent cursor-pointer gameCard group p-0"
+                                id={`${index() == 0 ? "firstGameCard" : ""}`}
                                 aria-label={translateText("play")}
                                 onDragStart={(e) => {
                                   e.preventDefault();
@@ -1314,7 +1346,7 @@ function App() {
                                     </Show>
                                   </div>
                                 </Show>
-                              </div>
+                              </button>
                             );
                           }}
                         </For>
@@ -1370,14 +1402,16 @@ function App() {
                         : ""
                     }`}>
                     <For each={searchResults}>
-                      {(gameName) => {
+                      {(gameName, index) => {
                         return (
-                          <div
-                            className="relative w-full bg-transparent cursor-pointer gameCard group"
+                          <button
+                            className="relative w-full bg-transparent cursor-pointer gameCard group p-0"
+                            id={`${index() == 0 ? "firstSearchResult" : ""}`}
                             aria-label={translateText("play")}
                             onDragStart={(e) => {
                               e.preventDefault();
                             }}
+                            // ref={index() === 0 ? setFocusSearchedGames : ""}
                             onClick={async (e) => {
                               if (e.ctrlKey) {
                                 openGame(
@@ -1515,7 +1549,7 @@ function App() {
                                 </Show>
                               </div>
                             </Show>
-                          </div>
+                          </button>
                         );
                       }}
                     </For>

diff --git a/src/SideBar.jsx b/src/SideBar.jsx
@@ -13,6 +13,10 @@ import {
   appDataDirPath,
   newVersionAvailable,
   language,
+  showContentSkipButton,
+  setShowContentSkipButton,
+  focusGames,
+  focusSearchedGames,
 } from "./Signals";
 
 import {
@@ -155,17 +159,48 @@ export function SideBar() {
               onInput={(e) => {
                 setSearchValue(e.currentTarget.value);
               }}
+              onKeyUp={(e) => {
+                if (e.key === "Enter") {
+                  document.getElementById("firstSearchResult").focus();
+                  let body = document.body;
+                  body.classList.add("user-is-tabbing");
+                }
+              }}
             />
-            <div
+            <button
               className={`cursor-pointer hover:bg-[#D6D6D6] dark:hover:bg-[#232323] duration-150 p-2 w-[28px] rounded-[${
                 roundedBorders() ? "6px" : "0px"
               }]`}
               onClick={() => {
                 toggleSideBar();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Tab" && e.shiftKey === false) {
+                  setShowContentSkipButton(true);
+                }
               }}>
               <ChevronArrows />
-            </div>
+            </button>
           </div>
+          <Show when={showContentSkipButton()}>
+            <button
+              className="standardButton dark:bg-[#232323] !text-black dark:!text-white bg-[#E8E8E8] hover:!bg-[#d6d6d6] dark:hover:!bg-[#2b2b2b] mt-[12px]"
+              onClick={() => {
+                setShowContentSkipButton(false);
+                document.getElementById("firstGameCard").focus();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Tab") {
+                  setShowContentSkipButton(false);
+                }
+              }}
+              onBlur={() => {
+                setShowContentSkipButton(false);
+              }}>
+              {translateText("skip to games")}
+            </button>
+          </Show>
+
           <div
             id="sideBarFolders"
             className="mt-[20px]"
@@ -266,7 +301,7 @@ export function SideBar() {
             } overflow-auto  rounded-[${roundedBorders() ? "6px" : "0px"}]`}>
             <p className="mt-[5px]"></p>
             <For each={currentFolders()}>
-              {(folderName, i) => {
+              {(folderName, index) => {
                 let folder = libraryData().folders[folderName];
 
                 if (folder.games.length > 0) {
@@ -419,16 +454,23 @@ export function SideBar() {
                             setSelectedFolder(folder);
                             setEditedFolderName(selectedFolder().name);
                             setEditedHideFolder(selectedFolder().hide);
+                          }}
+                          onKeyDown={(e) => {
+                            if (index() === 0) {
+                              if (e.key === "Tab" && e.shiftKey === true) {
+                                setShowContentSkipButton(true);
+                              }
+                            }
                           }}>
                           <Edit />
                         </button>
                       </div>
                       <For each={folder.games}>
                         {(gameName, i) => (
-                          <span
+                          <button
                             className={`!flex gap-[5px] bg-transparent ${
                               i() == 0 ? "mt-4" : "mt-5"
-                            }  sideBarGame cursor-grab `}
+                            }  sideBarGame cursor-grab p-0`}
                             aria-label={translateText("play")}
                             draggable={true}
                             onDragStart={(e) => {
@@ -471,7 +513,7 @@ export function SideBar() {
                             <span className="text-[#00000080] dark:text-[#ffffff80] active:dark:text-[#ffffff3a] active:text-[#0000003a]">
                               {gameName}
                             </span>
-                          </span>
+                          </button>
                         )}
                       </For>
                       <p className="mt-[10px] w-full h-[3px] sideBarGame cursor-grab">
@@ -608,7 +650,7 @@ export function SideBar() {
                   }
                   return (
                     <Show when={!gamesInFolders.includes(currentGame)}>
-                      <p
+                      <button
                         draggable={true}
                         onDragStart={(e) => {
                           e.dataTransfer.setData("gameName", currentGame);
@@ -620,7 +662,7 @@ export function SideBar() {
                         }}
                         className={`!flex gap-[5px] bg-transparent ${
                           i() == 0 ? "mt-4" : "mt-5"
-                        }  sideBarGame cursor-grab `}
+                        }  sideBarGame cursor-grab p-0`}
                         aria-label={translateText("play")}
                         onClick={async (e) => {
                           await setSelectedGame(
@@ -647,7 +689,7 @@ export function SideBar() {
                         <span className="text-[#00000080] dark:text-[#ffffff80] active:dark:text-[#ffffff3a] active:text-[#0000003a]">
                           {currentGame}
                         </span>
-                      </p>
+                      </button>
                     </Show>
                   );
                 }}

diff --git a/src/Signals.js b/src/Signals.js
@@ -14,6 +14,12 @@ export const [toastError, setToastMessage] = createSignal("");
 export const [showToast, setShowToast] = createSignal(false);
 export const [windowWidth, setWindowWidth] = createSignal(window.innerWidth);
 export const [zoomLevel, setZoomLevel] = createSignal();
+export const [showContentSkipButton, setShowContentSkipButton] =
+  createSignal(false);
+export const [focusFirstItem, setFocusFirstItem] = createSignal();
+export const [focusGames, setFocusGames] = createSignal();
+export const [focusSearchedGames, setFocusSearchedGames] = createSignal();
+export const [searchingGames, setSearchingGames] = createSignal(false);
 
 // !? References
 export const [selectedGame, setSelectedGame] = createSignal({});
@@ -30,7 +36,6 @@ export const [showSettingsLanguageSelector, setShowSettingsLanguageSelector] =
   createSignal(false);
 export const [showLanguageSelector, setShowLanguageSelector] =
   createSignal(false);
-
 export const [totalSteamGames, setTotalSteamGames] = createSignal(0);
 export const [totalImportedSteamGames, setTotalImportedSteamGames] =
   createSignal(0);

diff --git a/src/Text.js b/src/Text.js
@@ -546,4 +546,11 @@ export let textLanguages = {
     ru: "",
     fr: "",
   },
+  "skip to games": {
+    jp: "",
+    es: "",
+    hi: "",
+    ru: "",
+    fr: "",
+  },
 };