fix: footer headings hierarchy (fixes #114)

microsoft · May 15, 2024 · 93d1d4a · 93d1d4a
1 parent 6a99163
commit 93d1d4a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/packages/website/src/app/shared/components/footer.component.ts b/packages/website/src/app/shared/components/footer.component.ts
@@ -14,6 +14,7 @@ import { updateTrackingCodes } from '../loader';
   template: `
     <footer [class]="type">
       <ng-container *ngIf="type === 'big'; else defaultFooter">
+        <h2 class="visually-hidden">Footer</h2>
         <div class="container no-sidebar split-layout">
           <div class="image">
             <img src="images/bit/student.png" alt="students" />

diff --git a/packages/website/src/styles.scss b/packages/website/src/styles.scss
@@ -70,3 +70,4 @@
 @import 'theme/layout';
 @import 'theme/responsive';
 @import 'theme/code';
+@import 'theme/accessibility';
diff --git a/packages/website/src/theme/_accessibility.scss b/packages/website/src/theme/_accessibility.scss
@@ -0,0 +1,12 @@
+@import 'variables';
+
+// Accessibility helpers -----------------------------------------------------
+
+.visually-hidden {
+  display: block;
+  height: 0;
+  overflow: hidden;
+  margin: 0;
+  border: 0;
+  padding: 0;
+}