Fixed search labelledby attributes for current filters

SU-SWS · Jun 11, 2024 · bb78610 · bb78610
1 parent 7457297
commit bb78610
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 111 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "@heroicons/react": "^2.1.3",
     "@js-temporal/polyfill": "^0.4.4",
     "@mui/base": "^5.0.0-dev.20240529-082515-213b5e33ab",
-    "@next/third-parties": "^14.2.3",
+    "@next/third-parties": "^14.2.4",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
@@ -29,22 +29,22 @@
     "decanter": "^7.3.0",
     "drupal-jsonapi-params": "^2.3.1",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.3",
+    "eslint-config-next": "^14.2.4",
     "graphql": "^16.8.1",
     "graphql-request": "^7.0.1",
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.10",
-    "next": "^14.2.3",
+    "next": "^14.2.4",
     "node-cache": "^5.1.2",
     "plaiceholder": "^3.0.0",
     "postcss": "^8.4.38",
     "qs": "^6.12.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
-    "react-instantsearch": "^7.11.0",
-    "react-instantsearch-nextjs": "^0.3.1",
+    "react-instantsearch": "^7.11.1",
+    "react-instantsearch-nextjs": "^0.3.2",
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.4",
@@ -59,7 +59,7 @@
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.1",
-    "@next/bundle-analyzer": "^14.2.3",
+    "@next/bundle-analyzer": "^14.2.4",
     "@storybook/addon-essentials": "^8.1.6",
     "@storybook/addon-interactions": "^8.1.6",
     "@storybook/addon-links": "^8.1.6",
@@ -74,8 +74,8 @@
     "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^4.0.0",
-    "prettier": "^3.3.1",
-    "prettier-plugin-tailwindcss": "^0.6.2",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.3",
     "react-docgen": "^7.0.3",
     "storybook": "^8.1.6",
     "tsconfig-paths-webpack-plugin": "^4.1.0"

diff --git a/src/components/algolia-search/algolia-search-form.tsx b/src/components/algolia-search/algolia-search-form.tsx
@@ -50,7 +50,7 @@ const Form = ({searchIndex}: {searchIndex: string}) => {
     attribute: "book_subject",
     limit: 100,
   })
-  const {items: bookTypeRefinmenItems, refine: refineBookType} = useRefinementList({attribute: "book_type"})
+  const {items: bookTypeRefinementItems, refine: refineBookType} = useRefinementList({attribute: "book_type"})
   const {start: pubYearRange, range: pubYearRangeBounds, refine: refineRange, canRefine: canRefinePubYear} = useRange({attribute: "book_published"})
   const {min: minYear, max: maxYear} = pubYearRangeBounds
   const {items: currentRefinements, canRefine: canRefineCurrent, refine: removeRefinement} = useCurrentRefinements({})
@@ -152,7 +152,13 @@ const Form = ({searchIndex}: {searchIndex: string}) => {
                       >
                         {item.value}
                         <button
-                          aria-labelledby={`${id}-i`}
+                          aria-labelledby={
+                            "subject-" +
+                            item.value
+                              .toString()
+                              .toLowerCase()
+                              .replaceAll(/[^a-z0-9]/g, "-")
+                          }
                           disabled={!canRefineCurrent}
                           onClick={() => removeRefinement(item)}
                         >
@@ -167,14 +173,14 @@ const Form = ({searchIndex}: {searchIndex: string}) => {
           </div>
 
           <div className="mb-14 border-b border-black-30 pb-16">
-            <label className="flex items-center justify-between gap-10">
+            <label className="flex cursor-pointer items-center justify-between gap-10">
               <span>Search only books</span>
 
               <div className="relative">
                 <input
                   className="peer sr-only"
                   type="checkbox"
-                  checked={!!bookTypeRefinmenItems.find(item => item.isRefined)}
+                  checked={!!bookTypeRefinementItems.find(item => item.isRefined)}
                   onChange={() => refineBookType("book")}
                 />
                 <div className="h-6 w-16 rounded-full bg-press-sand-light shadow-inner peer-checked:bg-press-bay-light" />
@@ -188,7 +194,7 @@ const Form = ({searchIndex}: {searchIndex: string}) => {
             {bookSubjectRefinementList.map(refinementOption => (
               <label
                 key={refinementOption.value}
-                className="mb-8 mt-5 flex items-center gap-5"
+                className="mb-8 mt-5 flex cursor-pointer items-center gap-5"
               >
                 <div className="relative">
                   <input
@@ -205,7 +211,17 @@ const Form = ({searchIndex}: {searchIndex: string}) => {
                     className="absolute left-4 top-4 hidden text-white peer-checked:block"
                   />
                 </div>
-                <span>{refinementOption.value}</span>
+                <span
+                  id={
+                    "subject-" +
+                    refinementOption.value
+                      .toString()
+                      .toLowerCase()
+                      .replaceAll(/[^a-z0-9]/g, "-")
+                  }
+                >
+                  {refinementOption.value}
+                </span>
               </label>
             ))}
           </fieldset>