fix(showcase): lighthouse accessibility report (#1138)

## Proposed change

Fixes deployed here https://fpaul-1a.github.io/otter

## Related issues

- 🐛 Fixes #(issue)
- 🚀 Feature #(issue)

<!-- Please make sure to follow the contributing guidelines on
https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md -->

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>

apps/showcase/src/app/configuration/configuration.template.html

@@ -30,8 +30,10 @@ <h2 id="configuration-examples">Examples</h2>
       <div class="row">
         <o3r-copy-text-pres language="html" [text]="codeConfig()" class="col-12 col-md-8 col-lg-9"></o3r-copy-text-pres>
         <div class="d-flex gap-2 align-self-start mt-md-2 pb-3 col-12 col-md-4 col-lg-3">
-          <button type="button" class="btn btn-primary" [class.disabled]="config()" (click)="toggleConfig()">Override</button>
-          <button type="button" class="btn btn-danger" [class.disabled]="!config()" (click)="toggleConfig()">Clear</button>
+          <button type="button" class="btn btn-primary" disabled="{{config()}}"
+                  [class.disabled]="config()" (click)="toggleConfig()">Override</button>
+          <button type="button" class="btn btn-danger" disabled="{{!config()}}"
+                  [class.disabled]="!config()" (click)="toggleConfig()">Clear</button>
         </div>
       </div>
       <p>
@@ -49,7 +51,7 @@ <h2 id="configuration-add-config-later">How to add configuration to a component<
     <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g configuration-to-component --path='path/to/the/component/class/file'"></o3r-copy-text-pres>
     <h2 id="configuration-metadata">Metadata</h2>
     <div>
-      <h4>How to extract</h4>
+      <h3>How to extract</h3>
       <o3r-copy-text-pres [wrap]="true" language="bash" text="ng run project-name:extract-components"></o3r-copy-text-pres>
       <p>It will extract components' configuration and generate the two following files: <code>component.config.metadata.json</code> and <code>component.class.metadata.json</code></p>
       <p>Check the list of options available by running:</p>

apps/showcase/src/app/dynamic-content/dynamic-content.template.html

@@ -24,8 +24,10 @@ <h2 id="dynamic-content-example">Example</h2>
       <div class="row">
         <o3r-copy-text-pres class="col-12 col-md-8 col-lg-9" language="html" [text]="codeDataDynamicContentPath"></o3r-copy-text-pres>
         <div class="d-flex gap-2 align-self-start mt-md-2 pb-3 col-12 col-md-4 col-lg-3">
-          <button type="button" class="btn btn-primary" [class.disabled]="bodyDynamicContentPath" (click)="setLocalStorage()">Override</button>
-          <button type="button" class="btn btn-danger" [class.disabled]="!bodyDynamicContentPath" (click)="clearLocalStorage()">Clear</button>
+          <button type="button" class="btn btn-primary" disabled="{{bodyDynamicContentPath}}"
+                  [class.disabled]="bodyDynamicContentPath" (click)="setLocalStorage()">Override</button>
+          <button type="button" class="btn btn-danger" disabled="{{!bodyDynamicContentPath}}"
+                  [class.disabled]="!bodyDynamicContentPath" (click)="clearLocalStorage()">Clear</button>
         </div>
       </div>
       <p>

apps/showcase/src/app/rules-engine/rules-engine.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { NgbNav, NgbNavItem, NgbNavLink } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavOutlet } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
 import { ApplicationDevtoolsModule } from '@o3r/application';
 import { ComponentsDevtoolsModule } from '@o3r/components';
@@ -49,7 +49,9 @@ import { CurrentTimeFactsService } from '../../services/current-time-facts.servi
     IN_PAGE_NAV_PRES_DIRECTIVES,
     NgbNav,
     NgbNavItem,
-    NgbNavLink
+    NgbNavLink,
+    NgbNavContent,
+    NgbNavOutlet
   ],
   templateUrl: './rules-engine.template.html',
   styleUrls: ['./rules-engine.style.scss'],

apps/showcase/src/app/rules-engine/rules-engine.template.html

@@ -30,55 +30,54 @@ <h2 id="rules-engine-example">Example</h2>
         Do not hesitate to run the application locally, if not installed yet, follow the <a routerLink="/run-app-locally">instructions</a>.
       </p>
       <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/components/showcase/rules-engine" target="_blank" rel="noopener">Source code</a>
-      <ul ngbNav class="nav nav-tabs mt-3">
-        <li ngbNavItem class="nav-item">
-          <a ngbNavLink class="nav-link" [class.active]="activeRuleTab === 'configuration'" (click)="activateRuleTab('configuration')">Configuration rule</a>
-        </li>
-        <li ngbNavItem class="nav-item">
-          <a ngbNavLink class="nav-link" [class.active]="activeRuleTab === 'localization'" (click)="activateRuleTab('localization')">Localization rule</a>
-        </li>
-        <li ngbNavItem class="nav-item">
-          <a ngbNavLink class="nav-link" [class.active]="activeRuleTab === 'dynamic-content'" (click)="activateRuleTab('dynamic-content')">Dynamic content rule</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" [class.active]="activeRuleTab === 'operator-fact'" (click)="activateRuleTab('operator-fact')">Operator fact</a>
-        </li>
-      </ul>
-      <div class="p-3">
-        <div *ngIf="activeRuleTab === 'configuration'">
-          <p>
-          By default, New-York is not selectable and we want to make it available only during the summer.
-          <br>
-          So we have created facts for the trip information and a new operator to evaluate the selected date.
-          After that we set the following rule to make New-York available during the summer.
-          <br>
-          You can check that New-York will be available if you select dates during the summer (between June 21st and September 21st).
-          </p>
-          <o3r-copy-text-pres language="json" [text]="newYorkAvailableRule"></o3r-copy-text-pres>
-        </div>
-        <div *ngIf="activeRuleTab === 'dynamic-content'">
-          <p>
-          When selecting a date during the summer, the otter picture changes. We have created the following rule to change the targeted asset.
-          <br>
-          You can check that the image changes if you select dates during the summer (between June 21st and September 21st).
-          </p>
-          <o3r-copy-text-pres language="json" [text]="summerOtterRule"></o3r-copy-text-pres>
-        </div>
-        <div *ngIf="activeRuleTab === 'localization'">
-          <p>
-          When a destination is selected, the text will change from "Where do you want to go?" to "When do you want to go?". We have created the following rule to change the localization key.
-          </p>
-          <o3r-copy-text-pres language="json" [text]="helloNewYorkRule"></o3r-copy-text-pres>
-        </div>
-        <div *ngIf="activeRuleTab === 'operator-fact'">
-          <p>
-          When selecting a departure date in less than 2 days, the otter picture changes. We have created the following rule to change the targeted asset.
-          <br>
-          It is using the `inNextMinutes` operator which is based on the current time.
-          </p>
-          <o3r-copy-text-pres language="json" [text]="lateOtterRule"></o3r-copy-text-pres>
-        </div>
-      </div>
+      <nav ngbNav #nav="ngbNav" class="nav nav-tabs mt-3">
+        <ng-container ngbNavItem>
+          <a ngbNavLink class="nav-link">Configuration rule</a>
+          <ng-template ngbNavContent>
+            <p>
+              By default, New-York is not selectable and we want to make it available only during the summer.
+              <br>
+              So we have created facts for the trip information and a new operator to evaluate the selected date.
+              After that we set the following rule to make New-York available during the summer.
+              <br>
+              You can check that New-York will be available if you select dates during the summer (between June 21st and September 21st).
+            </p>
+            <o3r-copy-text-pres language="json" [text]="newYorkAvailableRule"></o3r-copy-text-pres>
+          </ng-template>
+        </ng-container>
+        <ng-container ngbNavItem>
+          <a ngbNavLink class="nav-link">Localization rule</a>
+          <ng-template ngbNavContent>
+            <p>
+              When a destination is selected, the text will change from "Where do you want to go?" to "When do you want to go?". We have created the following rule to change the localization key.
+            </p>
+            <o3r-copy-text-pres language="json" [text]="helloNewYorkRule"></o3r-copy-text-pres>
+          </ng-template>
+        </ng-container>
+        <ng-container ngbNavItem>
+          <a ngbNavLink class="nav-link">Dynamic content rule</a>
+          <ng-template ngbNavContent>
+            <p>
+              When selecting a date during the summer, the otter picture changes. We have created the following rule to change the targeted asset.
+              <br>
+              You can check that the image changes if you select dates during the summer (between June 21st and September 21st).
+            </p>
+            <o3r-copy-text-pres language="json" [text]="summerOtterRule"></o3r-copy-text-pres>
+          </ng-template>
+        </ng-container>
+        <ng-container ngbNavItem>
+          <a ngbNavLink class="nav-link">Operator fact</a>
+          <ng-template ngbNavContent>
+            <p>
+              When selecting a departure date in less than 2 days, the otter picture changes. We have created the following rule to change the targeted asset.
+              <br>
+              It is using the `inNextMinutes` operator which is based on the current time.
+            </p>
+            <o3r-copy-text-pres language="json" [text]="lateOtterRule"></o3r-copy-text-pres>
+          </ng-template>
+        </ng-container>
+      </nav>
+      <div [ngbNavOutlet]="nav" class="mt-2"></div>
     </div>
     <h2 id="rules-engine-install">How to install</h2>
     <div>
@@ -99,7 +98,7 @@ <h3>How to extract</h3>
       <p>It will extract application facts and operators in the following files: <code>rules.facts.metadata.json</code> and <code>rules.operators.metadata.json</code></p>
       <p>Check the list of options available by running:</p>
       <o3r-copy-text-pres [wrap]="true" language="bash" text="ng run project-name:extract-rules-engine --help"></o3r-copy-text-pres>
-      </div>
+    </div>
     <h2 id="rules-engine-references">References</h2>
     <ul>
       <li>

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">

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">

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">

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">

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">

apps/showcase/src/components/showcase/sdk/sdk-pres.template.html

@@ -115,7 +115,7 @@
         </ngb-pagination>
 
         <select class="form-select w-auto" name="pageSize" [ngModel]="pageSize()"
-                (ngModelChange)="pageSize.set($event)">
+                (ngModelChange)="pageSize.set($event)" aria-label="Select the number of items per page">
           <option [ngValue]="10">10 items per page</option>
           <option [ngValue]="50">50 items per page</option>
           <option [ngValue]="100">100 items per page</option>

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">

apps/showcase/src/styles.scss

@@ -30,10 +30,23 @@ h1, h2 {
   z-index: inherit;
 }
 
+.hljs-built_in, .hljs-symbol {
+  color: #bd5208;
+}
+.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo {
+  color: #218338;
+}
+
 // 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