a11y: ProductTable filter sidebar semantics

package.json

@@ -49,13 +49,15 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-focus-scope": "^1.1.8",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",

src/components/FindWalletProductTable/hooks/useWalletFilters.tsx

@@ -31,6 +31,7 @@ export const useWalletFilters = (): FilterOption[] => {
           filterLabel: t("page-find-wallet-mobile"),
           description: "",
           inputState: false,
+          optionsLegend: t("table:table-mobile-platforms") as string,
           input: (filterIndex, itemIndex, inputState, updateFilterState) => {
             return (
               <SwitchFilterInput
@@ -140,6 +141,7 @@ export const useWalletFilters = (): FilterOption[] => {
           filterLabel: t("page-find-wallet-desktop"),
           description: "",
           inputState: false,
+          optionsLegend: t("table:table-desktop-platforms") as string,
           input: (filterIndex, itemIndex, inputState, updateFilterState) => {
             return (
               <SwitchFilterInput
@@ -290,6 +292,7 @@ export const useWalletFilters = (): FilterOption[] => {
           filterLabel: t("page-find-wallet-browser"),
           description: "",
           inputState: false,
+          optionsLegend: t("table:table-browser-engines") as string,
           input: (filterIndex, itemIndex, inputState, updateFilterState) => {
             return (
               <SwitchFilterInput

src/components/ProductTable/Filter.tsx

@@ -7,6 +7,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
+import { FieldLegend, FieldSet } from "@/components/ui/field"
 
 interface FilterProps {
   filter: FilterOption
@@ -104,38 +105,46 @@ const Filter = ({ filter, filterIndex, onChange }: FilterProps) => {
         <p className="text-base font-bold text-body">{filter.title}</p>
       </AccordionTrigger>
       <AccordionContent className="p-0 md:p-0">
-        {filter.items.map((item, itemIndex) => {
-          return (
-            <div
-              key={itemIndex}
-              className={`${item.options.length ? "pb-0" : "pb-4"}`}
-            >
-              {item.input(
-                filterIndex,
-                itemIndex,
-                item.inputState,
-                handleChange
-              )}
-              {item.inputState === true && item.options.length ? (
-                <div className="flex flex-row gap-6 px-2 pb-4">
-                  {item.options.map((option, optionIndex) => {
-                    return (
-                      <Fragment key={optionIndex}>
-                        {option.input(
-                          filterIndex,
-                          itemIndex,
-                          optionIndex,
-                          option.inputState,
-                          handleChange
-                        )}
-                      </Fragment>
-                    )
-                  })}
-                </div>
-              ) : null}
-            </div>
-          )
-        })}
+        <FieldSet className="gap-0">
+          <FieldLegend className="sr-only">{filter.title}</FieldLegend>
+          {filter.items.map((item, itemIndex) => {
+            return (
+              <div
+                key={itemIndex}
+                className={`${item.options.length ? "pb-0" : "pb-4"}`}
+              >
+                {item.input(
+                  filterIndex,
+                  itemIndex,
+                  item.inputState,
+                  handleChange
+                )}
+                {item.inputState === true && item.options.length ? (
+                  <FieldSet className="flex flex-row gap-6 px-2 pb-4">
+                    {item.optionsLegend && (
+                      <FieldLegend className="sr-only">
+                        {item.optionsLegend}
+                      </FieldLegend>
+                    )}
+                    {item.options.map((option, optionIndex) => {
+                      return (
+                        <Fragment key={optionIndex}>
+                          {option.input(
+                            filterIndex,
+                            itemIndex,
+                            optionIndex,
+                            option.inputState,
+                            handleChange
+                          )}
+                        </Fragment>
+                      )
+                    })}
+                  </FieldSet>
+                ) : null}
+              </div>
+            )
+          })}
+        </FieldSet>
       </AccordionContent>
     </AccordionItem>
   )

src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx

@@ -1,8 +1,11 @@
-import { ReactElement } from "react"
+"use client"
+
+import { ReactElement, useId } from "react"
 import type { LucideIcon } from "lucide-react"
 
 import { FilterInputState } from "@/lib/types"
 
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
 import Switch from "@/components/ui/switch"
 
 interface SwitchFilterInputProps {
@@ -28,26 +31,40 @@ const SwitchFilterInput = ({
   inputState,
   updateFilterState,
 }: SwitchFilterInputProps) => {
+  const id = useId()
+  const descriptionId = description ? `${id}-description` : undefined
   return (
-    <>
-      <div className="flex flex-row items-center justify-between gap-2 border-t py-4">
-        <div className="flex flex-row items-center">
-          <div className="h-8 w-8">
+    <Field className="gap-0 border-t py-4">
+      <div className="flex flex-row items-center justify-between gap-2">
+        <FieldLabel
+          htmlFor={id}
+          className="flex w-fit cursor-pointer flex-row items-center gap-0 text-base leading-normal font-normal"
+        >
+          <span className="h-8 w-8">
             {Icon && (
               <Icon className="mt-0.5 size-7" strokeWidth={1} aria-hidden />
             )}
-          </div>
-          <p>{label}</p>
-        </div>
+          </span>
+          {label}
+        </FieldLabel>
         <Switch
+          id={id}
+          aria-describedby={descriptionId}
           checked={inputState as boolean}
           onCheckedChange={(e) => {
             updateFilterState(filterIndex, itemIndex, e as boolean)
           }}
         />
       </div>
-      <p className="ms-8 text-body-medium">{description}</p>
-    </>
+      {description && (
+        <FieldDescription
+          id={descriptionId}
+          className="ms-8 text-base leading-normal font-normal text-body-medium"
+        >
+          {description}
+        </FieldDescription>
+      )}
+    </Field>
   )
 }