Skip to content

Commit

Permalink
fix(showcase): lighthouse accessibility report
Browse files Browse the repository at this point in the history
  • Loading branch information
@fpaul-1A
fpaul-1A committed Dec 13, 2023
1 parent a87118c commit 5219fec
Show file tree
Hide file tree
Showing 13 changed files with 86 additions and 66 deletions.
6 changes: 4 additions & 2 deletions apps/showcase/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions apps/showcase/src/app/configuration/configuration.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions apps/showcase/src/app/dynamic-content/dynamic-content.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions apps/showcase/src/app/rules-engine/rules-engine.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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'],
Expand Down
99 changes: 49 additions & 50 deletions apps/showcase/src/app/rules-engine/rules-engine.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/showcase/src/components/showcase/basic/basic-pres.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/showcase/src/components/showcase/configuration/configuration-pres.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/showcase/src/components/showcase/localization/localization-pres.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/showcase/src/components/showcase/rules-engine/rules-engine-pres.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/showcase/src/components/showcase/sdk/sdk-pres.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/showcase/src/components/utilities/in-page-nav/in-page-nav-pres.template.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
13 changes: 13 additions & 0 deletions apps/showcase/src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 5219fec

Please sign in to comment.