Accessibility pass, sound search

xirreal-plugins · Sep 21, 2024 · 2ce97e3 · 2ce97e3
1 parent ab972a7
commit 2ce97e3
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 35 deletions.
diff --git a/plugins/soundboardHotkeys/components/addModal.jsx b/plugins/soundboardHotkeys/components/addModal.jsx
@@ -4,9 +4,10 @@ const {
    plugin: { store },
 } = shelter;
 
-import { registerKeybind, unregisterKeybind } from "../utils";
+import { registerKeybind } from "../utils";
 import { KeybindCapture } from "./keybinds";
 import { SoundPicker } from "./soundPicker";
+
 import classes from "./style.scss";
 
 export function AddKeybindModal(closeModal, initialState) {
@@ -22,7 +23,7 @@ export function AddKeybindModal(closeModal, initialState) {
    }
 
    return (
-      <ModalRoot size={ModalSizes.SMALL}>
+      <ModalRoot size={ModalSizes.MEDIUM} class={classes.tallerModal}>
          <ModalHeader close={closeModal}>Adding keybind</ModalHeader>
          <ModalBody>
             <KeybindCapture

diff --git a/plugins/soundboardHotkeys/components/keybinds.jsx b/plugins/soundboardHotkeys/components/keybinds.jsx
@@ -1,5 +1,5 @@
 const {
-   ui: { Header, HeaderTags },
+   ui: { Header, HeaderTags, focusring },
    solid: { createSignal, createEffect, onCleanup },
 } = shelter;
 
@@ -39,6 +39,11 @@ export function KeybindCapture({ keybind, setValid, setKeybind, setScancodes })
 
       setValid(false);
 
+      if (modifiers.length === 0 && (e.key === "Escape" || e.key === "Enter")) {
+         setIsCapturing(false);
+         return;
+      }
+
       const key = e.key.toUpperCase();
       if (!modifiers.includes(key) && key !== "CONTROL" && key !== "ALT" && key !== "SHIFT" && key !== "META") {
          modifiers.push(key);
@@ -65,7 +70,12 @@ export function KeybindCapture({ keybind, setValid, setKeybind, setScancodes })
    return (
       <div ref={element}>
          <Header tag={HeaderTags.EYEBROW}>{isCapturing() ? "Click again to stop" : "Click to capture keybind"}</Header>
-         <button class={classes.keybindButton} onMouseDown={() => setIsCapturing(!isCapturing())}>
+         <button
+            class={classes.keybindButton}
+            onMouseDown={() => setIsCapturing(!isCapturing())}
+            onKeyPress={(e) => e.key === "Enter" && setIsCapturing(!isCapturing())}
+            use:focusring
+         >
             <Header tag={HeaderTags.H2} class={classes.noMarginUnselectable}>
                {keybind() || "None"}
             </Header>

diff --git a/plugins/soundboardHotkeys/components/settings.jsx b/plugins/soundboardHotkeys/components/settings.jsx
@@ -30,6 +30,7 @@ export function KeybindCard({ keybind }) {
                <Button
                   color={ButtonColors.RED}
                   size={ButtonSizes.MEDIUM}
+                  class={classes.marginTop}
                   onClick={() => {
                      store.keybinds = store.keybinds.filter((k) => k.id !== initialState.id);
                      unregisterKeybind(initialState.id);
@@ -54,24 +55,21 @@ export function Settings() {
          <Text class={classes.spaced}>Customize your soundboard hotkeys.</Text>
          <Divider />
 
-         <Show when={!done()}>
-            <Text class={classes.spaced}>Loading sounds...</Text>
-         </Show>
+         <div class={classes.flexSpaceBetween}>
+            <Header tag={HeaderTags.H3}>{done() ? "Keybinds" : "Loading sounds..."}</Header>
+            <Button
+               class={classes.margin}
+               size={ButtonSizes.LARGE}
+               disabled={!done()}
+               onclick={() => {
+                  openModal((p) => AddKeybindModal(p.close));
+               }}
+            >
+               Add keybind
+            </Button>
+         </div>
 
          <Show when={done()}>
-            <div class={classes.flexSpaceBetween}>
-               <Header tag={HeaderTags.H3}>Keybinds</Header>
-               <Button
-                  class={classes.margin}
-                  size={ButtonSizes.LARGE}
-                  onclick={() => {
-                     openModal((p) => AddKeybindModal(p.close));
-                  }}
-               >
-                  Add keybind
-               </Button>
-            </div>
-
             <div>
                <For each={store.keybinds}>{(keybind) => <KeybindCard keybind={keybind} />}</For>
             </div>

diff --git a/plugins/soundboardHotkeys/components/soundPicker.jsx b/plugins/soundboardHotkeys/components/soundPicker.jsx
@@ -1,14 +1,19 @@
 const {
-   ui: { Header, HeaderTags, Text },
+   ui: { Header, HeaderTags, TextBox, Text, focusring },
    flux: {
       stores: { SoundboardStore },
    },
-   solid: { For },
+   solid: { For, createSignal },
 } = shelter;
 
 import { SoundWithEmoji } from "./soundPreview";
 import classes from "./style.scss";
 
+export function search(sounds, query) {
+   if (!query) return sounds;
+   return sounds.filter((sound) => sound.name.toLowerCase().includes(query.toLowerCase()));
+}
+
 export function SoundPicker(props) {
    const sounds = () => {
       return [...SoundboardStore.getSounds()]
@@ -17,27 +22,35 @@ export function SoundPicker(props) {
          .sort((a, b) => SoundboardStore.isFavoriteSound(b.soundId) - SoundboardStore.isFavoriteSound(a.soundId));
    };
 
+   const [query, setQuery] = createSignal("");
+
+   const filteredSounds = () => search(sounds(), query());
+
    return (
       <div>
          <Header tag={HeaderTags.EYEBROW} class={classes.marginTop}>
             Sound
          </Header>
+         <TextBox value={""} placeholder={"Search sounds..."} onInput={(e) => setQuery(e)} />
          <div class={classes.soundPicker}>
-            <For each={sounds()}>
+            <Show when={filteredSounds().length === 0}>
+               <Text class={classes.margin}>❌ No sounds found</Text>
+            </Show>
+            <For each={filteredSounds()}>
                {(sound) => (
-                  <div
+                  <button
                      class={classes.sound}
-                     onKeyPress={(e) => e.key === "Enter" && props.setSoundId(sound.soundId)}
-                     onClick={() => props.setSoundId(sound.soundId)}
+                     onKeyPress={(e) =>
+                        e.key === "Enter" && e.target.name !== "preview" && props.setSoundId(sound.soundId)
+                     }
+                     onClick={(e) => e.target.name !== "preview" && props.setSoundId(sound.soundId)}
+                     use:focusring
                   >
                      <SoundWithEmoji soundId={sound.soundId} selected={() => sound.soundId === props.soundId()} />
-                  </div>
+                  </button>
                )}
             </For>
          </div>
-         <Text class={classes.margin}>
-            Can't find the sound you want? Open the soundboard manually to sort favorites before others.
-         </Text>
       </div>
    );
 }
diff --git a/plugins/soundboardHotkeys/components/soundPreview.jsx b/plugins/soundboardHotkeys/components/soundPreview.jsx
@@ -1,5 +1,5 @@
 const {
-   ui: { Text },
+   ui: { Text, focusring },
    flux: {
       stores: { SoundboardStore, EmojiStore },
    },
@@ -15,11 +15,13 @@ export function Preview({ soundId }) {
       <div class={classes.inline}>
          <audio src={`${baseUrl}${soundId}`} ref={audio} />
          <button
+            use:focusring
             class={classes.preview}
             onclick={() => {
                audio.load();
                audio.play();
             }}
+            name="preview"
          >
             🔊
          </button>

diff --git a/plugins/soundboardHotkeys/components/style.scss b/plugins/soundboardHotkeys/components/style.scss
@@ -44,7 +44,7 @@
 }
 
 .preview {
-   background: var(--brand-500);
+   background-color: var(--brand-500);
    border: 0px solid transparent;
    border-radius: 4px;
    cursor: pointer;
@@ -54,7 +54,7 @@
 }
 
 .preview:hover {
-   background: var(--brand-540);
+   background-color: var(--brand-560);
 }
 
 .emoji {
@@ -66,6 +66,10 @@
    display: inline;
 }
 
+.soundPicker {
+   margin-top: 8px;
+}
+
 .flexRow {
    display: flex;
    justify-content: start;
@@ -97,6 +101,10 @@
 
 .sound {
    cursor: pointer;
+   background-color: var(--background-transparent);
+   border: none;
+   padding: 0;
+   margin: 2px;
 }
 
 .selected {
@@ -110,6 +118,8 @@
    align-items: center;
 }
 
-.fullWidth {
-   width: 100%;
+.tallerModal {
+   min-height: 680px;
+   max-height: 680px;
+   height: 680px;
 }