Merge pull request #987 from Amberroseweeks/amberroseweeks-628-filter…

…-checkbox-role-new-branch improving the checkbox by adding aria describedby and connecting the …
CodeForPhilly · Nov 3, 2024 · b92fa67 · b92fa67
2 parents 08addb8 + db82d6a
commit b92fa67
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/src/components/Filters/DimensionFilter.tsx b/src/components/Filters/DimensionFilter.tsx
@@ -19,10 +19,9 @@ type OptionDisplayMapping = {
 };
 
 const optionsDisplayMapping: OptionDisplayMapping = {
-  owner_type: {
-    Public: 'Public',
-    'Business (LLC)': 'Business (LLC)',
-    Individual: 'Individual',
+  llc_owner: {
+    Yes: 'Business',
+    No: 'Individual',
   },
 };
 
@@ -48,6 +47,8 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
     [property: string]: string[];
   }>(initialSelectedPanelKeys());
 
+  const filterLabelID = display.replace(/\s/g, '');
+
   const toggleDimensionForPanel = (
     dimension: string,
     panel_property: string
@@ -119,10 +120,13 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
       );
     } else if (type === 'panels') {
       return (
+        /* the filterLabelID is pulled from the form field header text and uses aria-describedby to tie each component to the form header label using a unique ID applied to the form area header
+         */
         <Panels
           options={options}
           selectedPanelKeys={selectedPanelKeys}
           toggleDimensionForPanel={toggleDimensionForPanel}
+          aria_describedby_label={filterLabelID}
         />
       );
     } else {
@@ -153,21 +157,27 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
   return (
     <div className="pt-3 pb-6">
       <div className="flex flex-col mb-2">
-        <h2 className="heading-lg">{display}</h2>
+        <h2 className="heading-lg" id={filterLabelID}>
+          {display}
+        </h2>
         {(property === 'get_access' || property === 'priority_level') && (
           <p className="body-sm text-gray-500 w-[90%] my-1">
             {filterDescription.desc}
             <a
               href={`/methodology/#${filterDescription.linkFragment}`}
               className="link"
-              aria-label={`Learn more about ${property === 'priority_level' ? 'priority level' : 'access process'} from our Methodology Page`}
+              aria-label={`Learn more about ${
+                property === 'priority_level'
+                  ? 'priority level'
+                  : 'access process'
+              } from our Methodology Page`}
             >
               Learn more{' '}
             </a>
           </p>
         )}
       </div>
-      {filter}
+      <div>{filter}</div>
     </div>
   );
 };

diff --git a/src/components/Filters/Panels.tsx b/src/components/Filters/Panels.tsx
@@ -18,6 +18,7 @@ type PanelFilterOptions = PropertyAccessOption & {
 type PanelsProps = {
   options: string[] | PropertyAccess[];
   selectedPanelKeys: { [property: string]: string[] };
+  aria_describedby_label?: string;
   toggleDimensionForPanel: (dimension: string, property: string) => void;
 };
 
@@ -71,6 +72,7 @@ const Panels: FC<PanelsProps> = ({
   options,
   selectedPanelKeys,
   toggleDimensionForPanel,
+  aria_describedby_label,
 }) => {
   const optionPanels = options.map((option, index) => {
     const panel = panel_access_options[option];
@@ -84,6 +86,9 @@ const Panels: FC<PanelsProps> = ({
     return (
       <Card
         key={index}
+        role="checkbox"
+        aria-describedby={aria_describedby_label}
+        aria-checked={isSelected ? 'true' : 'false'}
         className={isSelected ? 'panelSelected ' : 'panelDefault'}
         isPressable
         onPress={() => toggleDimensionForPanel(panel.dimension, panel.property)}