From bf6abb18b90f8c103df0691b29733559c66567e7 Mon Sep 17 00:00:00 2001
From: NatSquared <nat.k.weiland@gmail.com>
Date: Wed, 13 Mar 2024 13:51:28 -0700
Subject: [PATCH] Fix sonarcloud linting; aria accessibility tweaks

---
 .../Metadata/EngagementMetadata.tsx              |  7 ++++---
 .../components/metadataManagement/TaxonCard.tsx  | 16 +++++++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/Metadata/EngagementMetadata.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/Metadata/EngagementMetadata.tsx
index cb9ba31d3..8de662c08 100644
--- a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/Metadata/EngagementMetadata.tsx
+++ b/met-web/src/components/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
index e63811cfd..37c60c230 100644
--- 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 />}>