Merge pull request #989 from Amberroseweeks/amberroseweeks-663-checkb…

…ox-behavior 663 checkbox behavior
CodeForPhilly · Nov 5, 2024 · f2d09b4 · f2d09b4
2 parents b92fa67 + 257a9ae
commit f2d09b4
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 99 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Filters/ButtonGroup.tsx b/src/components/Filters/ButtonGroup.tsx
@@ -7,6 +7,7 @@ import { Check } from '@phosphor-icons/react';
 type ButtonGroupProps = {
   options: string[];
   selectedKeys: string[];
+  aria_describedby_label?: string;
   toggleDimension: (dimension: string) => void;
   displayOptions?: { [key: string]: string };
 };
@@ -15,6 +16,7 @@ const ButtonGroup: FC<ButtonGroupProps> = ({
   options,
   selectedKeys,
   toggleDimension,
+  aria_describedby_label,
   displayOptions = {},
 }) => {
   return (
@@ -23,6 +25,7 @@ const ButtonGroup: FC<ButtonGroupProps> = ({
         <Button
           key={index}
           disableAnimation
+          role="checkbox"
           onPress={() => toggleDimension(option)}
           size="sm"
           color={selectedKeys.includes(option) ? 'success' : 'default'}
@@ -33,7 +36,8 @@ const ButtonGroup: FC<ButtonGroupProps> = ({
               : '')
           }
           radius="full"
-          aria-pressed={selectedKeys.includes(option)}
+          aria-checked={selectedKeys.includes(option)}
+          aria-describedby={aria_describedby_label}
           startContent={
             selectedKeys.includes(option) ? (
               <Check className="w-3 w-3.5 max-h-6" />

diff --git a/src/components/Filters/DimensionFilter.tsx b/src/components/Filters/DimensionFilter.tsx
@@ -116,6 +116,7 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
           selectedKeys={selectedKeys}
           toggleDimension={toggleDimension}
           displayOptions={optionsDisplayMapping[property]}
+          aria_describedby_label={filterLabelID}
         />
       );
     } else if (type === 'panels') {
@@ -137,6 +138,7 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
           selectedKeys={selectedKeys}
           toggleDimension={toggleDimension}
           handleSelectionChange={handleSelectionChange}
+          aria_describedby_label={filterLabelID}
         />
       );
     }

diff --git a/src/components/Filters/MultiSelect.tsx b/src/components/Filters/MultiSelect.tsx
@@ -13,6 +13,7 @@ type MultiSelectProps = {
   display: string;
   options: any[];
   selectedKeys: string[];
+  aria_describedby_label?: string;
   toggleDimension: (dimension: string) => void;
   handleSelectionChange: (
     selection: React.ChangeEvent<HTMLSelectElement> | string
@@ -23,13 +24,14 @@ const MultiSelect: FC<MultiSelectProps> = ({
   display,
   options,
   selectedKeys,
+  aria_describedby_label,
   toggleDimension,
   handleSelectionChange,
 }) => {
   return (
     <div className="space-x-2 min-h-[33.5px]">
       <SelectFilter
-        aria-label={display}
+        aria-describedby={aria_describedby_label}
         items={options}
         variant="flat"
         size="md"

diff --git a/src/components/Filters/Panels.tsx b/src/components/Filters/Panels.tsx
@@ -88,7 +88,7 @@ const Panels: FC<PanelsProps> = ({
         key={index}
         role="checkbox"
         aria-describedby={aria_describedby_label}
-        aria-checked={isSelected ? 'true' : 'false'}
+        aria-checked={isSelected}
         className={isSelected ? 'panelSelected ' : 'panelDefault'}
         isPressable
         onPress={() => toggleDimensionForPanel(panel.dimension, panel.property)}