Fix Axe accessibility issues

Add main landmarks to index pages Use figure element as role="presentation" does not officially support labels Remove role="region" as they should have a unique label
ScottLogic · Jul 12, 2024 · e52765f · e52765f
1 parent a1f5af8
commit e52765f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/app/carbon-estimation/carbon-estimation.component.html b/src/app/carbon-estimation/carbon-estimation.component.html
@@ -21,7 +21,7 @@ <h2 class="tce-text-2xl">Estimations</h2>
       </p>
     </div>
   </expansion-panel>
-  <div [attr.aria-label]="emissionAriaLabel" role="presentation" tabindex="0">
+  <figure [attr.aria-label]="emissionAriaLabel" tabindex="0">
     <apx-chart
       #chart
       aria-hidden="true"
@@ -32,5 +32,5 @@ <h2 class="tce-text-2xl">Estimations</h2>
       [states]="chartOptions.states"
       [dataLabels]="chartOptions.dataLabels"
       [tooltip]="chartOptions.tooltip"></apx-chart>
-  </div>
+  </figure>
 </div>
diff --git a/src/app/expansion-panel/expansion-panel.component.html b/src/app/expansion-panel/expansion-panel.component.html
@@ -9,6 +9,6 @@
     {{ expanded ? 'expand_less' : 'expand_more' }}
   </button>
 </div>
-<div [ngClass]="{ 'tce-hidden': !expanded }" [class]="config.contentContainerStyles" role="region">
+<div [ngClass]="{ 'tce-hidden': !expanded }" [class]="config.contentContainerStyles">
   <ng-content select="[content]"></ng-content>
 </div>
diff --git a/src/index.html b/src/index.html
@@ -10,11 +10,11 @@
     <link href="https://use.typekit.net/fjg7yrm.css" rel="stylesheet" />
   </head>
   <body>
-    <noscript
-      >Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript
-    >
-    <div class="tce-pt-4 md:tce-pb-4">
+    <main class="tce-pt-4 md:tce-pb-4">
+      <noscript
+        >Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript
+      >
       <tech-carbon-estimator></tech-carbon-estimator>
-    </div>
+    </main>
   </body>
 </html>
diff --git a/src/package-index.html b/src/package-index.html
@@ -8,10 +8,12 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
   </head>
   <body class="tce-m-0 dark:tce-bg-slate-800 dark:tce-text-slate-50">
-    <noscript
-      >Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript
-    >
-    <tech-carbon-estimator></tech-carbon-estimator>
-    <footer class="tce-p-5 tce-bg-slate-800 tce-text-slate-50 dark:tce-bg-slate-950">© Copyright Scott Logic</footer>
+    <main>
+      <noscript
+        >Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript
+      >
+      <tech-carbon-estimator></tech-carbon-estimator>
+      <footer class="tce-p-5 tce-bg-slate-800 tce-text-slate-50 dark:tce-bg-slate-950">© Copyright Scott Logic</footer>
+    </main>
   </body>
 </html>