feat(description): make h2 accessible

screen reader were reading them twice
davidlj95 · Sep 22, 2023 · 1c131a8 · 1c131a8
1 parent d99c574
commit 1c131a8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/app/about/description/description.component.html b/src/app/about/description/description.component.html
@@ -1,4 +1,7 @@
 <h2 *ngFor="let descriptionLine of descriptionLines">
-  <span class="material-symbols-outlined">{{ descriptionLine.symbol }}</span>
-  <span [innerHTML]="descriptionLine.text"></span>
+  <span aria-hidden="true">
+    <span class="material-symbols-outlined">{{ descriptionLine.symbol }}</span>
+    <span [innerHTML]="descriptionLine.text"></span>
+  </span>
+  <span class="sr-only" [innerHtml]="descriptionLine.text"></span>
 </h2>
diff --git a/src/app/about/description/description.component.scss b/src/app/about/description/description.component.scss
@@ -6,8 +6,8 @@
   justify-content: center;
   gap: margins.$s;
 
-  h2 {
-    font-size: 1.1em;
+  h2 > span {
+    font-size: 1.1rem;
     text-align: left;
     width: fit-content;
     display: flex;