Merge pull request #3069 from IntersectMBO/chore/3065-formatting-governace-action-details-page-for-accessibility

chore(#3065): improve accessibility by changing header components in delegation and voting cards

Author: MSzalowski

CHANGELOG.md

@@ -20,6 +20,8 @@ changes.
 
 ### Changed
 
+- Change drep details and governance action header components to follow accessibility standards [Issue 3065](https://github.com/IntersectMBO/govtool/issues/3065)
+
 ### Removed
 
 ## [v2.0.12](https://github.com/IntersectMBO/govtool/releases/tag/v2.0.12) 2025-02-21

govtool/frontend/src/components/molecules/DataMissingHeader.tsx

@@ -75,6 +75,7 @@ export const DataMissingHeader = ({
             ...titleStyle,
           }}
           variant="title2"
+          component="h1"
         >
           {(isDataMissing &&
             getMetadataDataMissingStatusTranslation(

govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx

@@ -172,6 +172,7 @@ export const GovernanceActionCardElement = ({
     >
       <Box sx={{ display: "flex", alignItems: "center", mb: "4px" }}>
         <Typography
+          component="h2"
           sx={{
             fontSize: isSliderCard ? 12 : 14,
             fontWeight: isSliderCard ? 500 : 600,

govtool/frontend/src/components/organisms/DRepDetailsCard.tsx

@@ -329,6 +329,7 @@ const DRepDetailsInfoItem = ({
           fontWeight={600}
           variant="body2"
           data-testid={`${dataTestId}-${dataTestIdInfoItemCategoryPrefix}-title`}
+          component="h2"
         >
           {label}
         </Typography>
@@ -409,7 +410,9 @@ const ReferencesLink = ({ label, uri }: ReferenceItem) => (
       },
     }}
   >
-    <Typography fontWeight={400}>{label}</Typography>
+    <Typography fontWeight={400} component="h2">
+      {label}
+    </Typography>
     <Link
       data-testid={`${testIdFromLabel(label)}-link`}
       href={uri}