fix(showcase): lighthouse accessibility report

fpaul-1A · Dec 13, 2023 · 202e771 · 202e771
1 parent a87118c
commit 202e771
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 8 deletions.
diff --git a/apps/showcase/src/app/app.component.html b/apps/showcase/src/app/app.component.html
@@ -1,5 +1,7 @@
 <header>
-  <button class="btn btn-lg d-xl-none mobile-menu-btn" (click)="open(content)"><i class="bi bi-list"></i></button>
+  <button class="btn btn-lg d-xl-none mobile-menu-btn" (click)="open(content)" title="Open side navigation">
+    <i class="bi bi-list"></i>
+  </button>
   <div class="header-title p-xl-3">
     <div class="header-icon">
       <img src="assets/otter-sticker.svg" width="48" height="48" alt="Otter logo" />
@@ -27,7 +29,7 @@
       <div class="col-12 col-md-8">
       </div>
       <div class="col-12 col-md-4">
-        <h5>Links</h5>
+        <h2 class="h5">Links</h2>
         <ul class="list-unstyled">
           <li>
             <a href="https://github.com/AmadeusITGroup/otter">Github</a>

diff --git a/apps/showcase/src/components/showcase/basic/basic-pres.template.html b/apps/showcase/src/components/showcase/basic/basic-pres.template.html
@@ -11,7 +11,7 @@ <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 r
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>
         </div>
-        <h5 class="row card-text mt-auto ms-1">Where do you want to go?</h5>
+        <h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
         <form class="row g-2" [formGroup]="form">
           <div class="col-12 col-xl-6">
             <div class="input-group">

diff --git a/apps/showcase/src/components/showcase/configuration/configuration-pres.template.html b/apps/showcase/src/components/showcase/configuration/configuration-pres.template.html
@@ -11,7 +11,7 @@ <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 b
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>
         </div>
-        <h5 class="row card-text mt-auto ms-1">Where do you want to go?</h5>
+        <h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
         <form class="row g-2" [formGroup]="form">
           <div class="col-12 col-xl-6" [class.col-xl-12]="(config$ | async)?.shouldProposeRoundTrip">
             <div class="input-group">

diff --git a/apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html b/apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html
@@ -11,7 +11,7 @@ <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 b
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>
         </div>
-        <h5 class="row card-text mt-auto ms-1">Where do you want to go?</h5>
+        <h3 class="row card-text mt-auto ms-1 h5">Where do you want to go?</h3>
         <form class="row g-2" [formGroup]="form">
           <div class="col-12 col-xl-6">
             <div class="input-group">

diff --git a/apps/showcase/src/components/showcase/localization/localization-pres.template.html b/apps/showcase/src/components/showcase/localization/localization-pres.template.html
@@ -16,7 +16,7 @@ <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 b
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>
         </div>
-        <h5 class="row card-text mt-auto ms-1">{{ translations.question | translate }}</h5>
+        <h3 class="row card-text mt-auto ms-1 h5">{{ translations.question | translate }}</h3>
         <form class="row g-2" [formGroup]="form">
           <div class="col-12 col-xl-6">
             <div class="input-group">

diff --git a/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html b/apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html
@@ -16,7 +16,7 @@ <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 b
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>
         </div>
-        <h5 class="row card-text mt-auto ms-1">{{ translations.question | translate }}</h5>
+        <h3 class="row card-text mt-auto ms-1 h5">{{ translations.question | translate }}</h3>
         <form class="row g-2" [formGroup]="form">
           <div class="col-12 col-xl-6" [class.col-xl-12]="(config$ | async)?.shouldProposeRoundTrip">
             <div class="input-group">

diff --git a/apps/showcase/src/components/utilities/in-page-nav/in-page-nav-pres.template.html b/apps/showcase/src/components/utilities/in-page-nav/in-page-nav-pres.template.html
@@ -1,4 +1,4 @@
-<h5>On this page</h5>
+<h2>On this page</h2>
 <nav [id]="id" class="navbar px-3 mb-3">
   <ul class="nav nav-pills flex-column">
     <li class="nav-item" *ngFor="let link of links">

diff --git a/apps/showcase/src/styles.scss b/apps/showcase/src/styles.scss
@@ -30,10 +30,20 @@ h1, h2 {
   z-index: inherit;
 }
 
+.hljs-built_in, .hljs-symbol {
+  color: #bd5208;
+}
+
 // Start overrides of design factory
 .navbar {
   box-shadow: none;
 }
+@include design-factory.media-breakpoint-down(lg) {
+  .nav-pills .nav-link {
+    font-size: 1.25rem;
+    --bs-nav-link-padding-y: 1rem;
+  }
+}
 // End overrides
 
 // Start temporary workarounds until we migrate back to bootstrap 5.3