improve accessibility creating cube

bryanlundberg · Oct 20, 2023 · fab5c9e · fab5c9e
1 parent 6c0f691
commit fab5c9e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/app/cubes/page.tsx b/src/app/cubes/page.tsx
@@ -32,7 +32,6 @@ export default function CubesPage() {
   };
 
   useEffect(() => {
-    setModalOpen(false);
     const cubes = loadCubes();
     setCubes(cubes);
   }, [setCubes, setModalOpen]);
@@ -57,7 +56,7 @@ export default function CubesPage() {
                     translation.inputs.placeholders["filter-cubes"][lang]
                   }
                   onChange={handleSearchFilter}
-                  className="border light:bg-neutral-100 light:border-neutral-200 dark:bg-zinc-950 dark:border-zinc-800"
+                  className="border light:bg-neutral-100 light:border-neutral-200 light:focus:bg-neutral-50 dark:bg-zinc-950 dark:border-zinc-800 dark:focus:bg-zinc-900"
                 />
                 <Button
                   disabled={false}

diff --git a/src/components/InputText.tsx b/src/components/InputText.tsx
@@ -14,7 +14,7 @@ export default function InputText({
   return (
     <input
       type="text"
-      className={`appearance-none transition duration-300 w-full h-8 px-3 py-1 text-sm rounded-md shadow-sm ${className}`}
+      className={`appearance-none outline-none transition duration-300 w-full h-8 px-3 py-1 text-sm rounded-md shadow-sm ${className}`}
       value={value}
       placeholder={placeholder}
       autoFocus={focus}

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -11,6 +11,7 @@ import findCube from "@/lib/findCube";
 import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { Themes } from "@/interfaces/types/Themes";
+import { useCubesModalStore } from "@/store/CubesModalStore";
 
 export default function Select() {
   const [open, setOpen] = useState<boolean>(false);
@@ -199,6 +200,8 @@ function LabelSection({ description }: { description: string }) {
 function AddCubeOption() {
   const { lang } = useSettingsModalStore();
   const { settings } = useSettingsModalStore();
+  const { setModalOpen } = useCubesModalStore();
+
   const variation: Record<Themes, string> = {
     light: "border-zinc-800 hover:bg-zinc-700 hover:text-neutral-100",
     dark: "border-zinc-800 hover:bg-zinc-800",
@@ -209,7 +212,7 @@ function AddCubeOption() {
         variation[settings.theme.background.color]
       }`}
     >
-      <Link href="/cubes">
+      <Link href="/cubes" onClick={() => setModalOpen(true)}>
         <div className="flex items-center justify-start gap-2 align-middle">
           <PlusIcon />
           <div>{translation.inputs["add-cube"][lang]}</div>