Fix sonarcloud linting; aria accessibility tweaks

bcgov · Mar 13, 2024 · bf6abb1 · bf6abb1
1 parent 3dfb1da
commit bf6abb1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/...ents/engagement/form/EngagementFormTabs/AdditionalDetails/Metadata/EngagementMetadata.tsx b/...ents/engagement/form/EngagementFormTabs/AdditionalDetails/Metadata/EngagementMetadata.tsx
@@ -78,9 +78,10 @@ const EngagementMetadata = forwardRef((_props, ref) => {
             const taxonMeta = taxonMetadata.get(taxonId) ?? [];
             let taxonValue = value ?? [];
             // Normalize and clean the arrays
-            taxonValue = cleanArray(Array.isArray(taxonValue) ? taxonValue : [taxonValue]);
-            const normalizedTaxonMeta = cleanArray(taxonMeta);
-            if (JSON.stringify(taxonValue.sort()) === JSON.stringify(normalizedTaxonMeta.sort())) continue;
+            const comparator = (a: string, b: string) => a.localeCompare(b);
+            taxonValue = cleanArray(Array.isArray(taxonValue) ? taxonValue : [taxonValue]).sort(comparator);
+            const normalizedTaxonMeta = cleanArray(taxonMeta).sort(comparator);
+            if (JSON.stringify(taxonValue) === JSON.stringify(normalizedTaxonMeta)) continue;
             // If we reach here, arrays are not equal, proceed with update
             try {
                 const updatedMetadata = await bulkPatchEngagementMetadata(taxonId, Number(engagementId), taxonValue);

diff --git a/met-web/src/components/metadataManagement/TaxonCard.tsx b/met-web/src/components/metadataManagement/TaxonCard.tsx
@@ -111,9 +111,9 @@ export const TaxonCard: React.FC<TaxonCardProps> = ({ taxon, isExpanded, onExpan
                     direction="row"
                     justifyContent="space-between"
                     alignItems="center"
-                    aria-expanded={isExpanded}
                     aria-label="A card representing a taxon in the engagement metadata."
-                    role="group"
+                    role="gridcell"
+                    id={`taxon-${taxon.id}`}
                 >
                     <Grid item container xs alignItems="center" spacing={1}>
                         <Grid item>
@@ -157,13 +157,23 @@ export const TaxonCard: React.FC<TaxonCardProps> = ({ taxon, isExpanded, onExpan
                                 size="small"
                                 aria-label="expand"
                                 onClick={handleExpand}
+                                aria-expanded={isExpanded}
+                                aria-controls={`taxon-${taxon.id}-content`}
                             >
                                 <ExpandMore />
                             </IconButton>
                         </Grid>
                     </Grid>
                     <Grid item xs={12}>
-                        <Collapse in={isExpanded} timeout="auto" unmountOnExit sx={{ pt: 1 }}>
+                        <Collapse
+                            in={isExpanded}
+                            timeout="auto"
+                            unmountOnExit
+                            sx={{ pt: 1 }}
+                            id={`taxon-${taxon.id}-content`}
+                            aria-labelledby={`taxon-${taxon.id}`}
+                            aria-hidden={!isExpanded}
+                        >
                             <Grid container alignItems="center" spacing={1} flexWrap="wrap">
                                 {/* Description */}
                                 <DetailsRow name="Description" icon={<FormatQuote />}>