Commit 5bd63bb5 authored by Jean-Baptiste Nizet's avatar Jean-Baptiste Nizet
Browse files

feat: add titles and labels to make the pages more accessible

parent a31eb318
<div> <div>
<h2> <h3>
<a class="main-link name" [href]="geneticResource.dataURL ? geneticResource.dataURL : geneticResource.portalURL"> <a class="main-link name" [href]="geneticResource.dataURL ? geneticResource.dataURL : geneticResource.portalURL">
{{ geneticResource.name }} {{ geneticResource.name }}
</a> </a>
<small> - {{ geneticResource.pillarName }}</small> <small> - {{ geneticResource.pillarName }}</small>
</h2> </h3>
<div> <div>
<span class="mr-4"> <span class="mr-4">
<a class="datasource-link" [href]="geneticResource.portalURL">{{ geneticResource.databaseSource }}</a> <a class="datasource-link" [href]="geneticResource.portalURL">{{ geneticResource.databaseSource }}</a>
......
h2 { h3 {
font-size: 1.25rem; font-size: 1.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
......
...@@ -12,7 +12,7 @@ describe('GeneticResourceComponent', () => { ...@@ -12,7 +12,7 @@ describe('GeneticResourceComponent', () => {
} }
get title() { get title() {
return this.element('h2'); return this.element('h3');
} }
get link() { get link() {
......
<h1 class="sr-only">Ressources Agronomiques pour la Recherche</h1>
<div class="row mt-5"> <div class="row mt-5">
<div class="col-md-8 col-lg-9 order-md-last"> <div class="col-md-8 col-lg-9 order-md-last">
<form class="input-group" [formGroup]="searchForm" (ngSubmit)="search()"> <h2 class="sr-only">Rechercher des ressources</h2>
<input class="form-control form-control-lg" type="text"
placeholder="Exemples : pisum sativum, rosa" <form [formGroup]="searchForm" (ngSubmit)="search()">
formControlName="search" <label class="sr-only" for="query">Rechercher</label>
[ngbTypeahead]="suggesterTypeahead"> <div class="input-group">
<div class="input-group-append"> <input id="query"
<button class="btn btn-outline-secondary" type="submit">Recherche</button> class="form-control form-control-lg"
placeholder="Exemples : pisum sativum, rosa"
formControlName="search"
[ngbTypeahead]="suggesterTypeahead">
<div class="input-group-append">
<button class="btn btn-outline-secondary">Recherche</button>
</div>
</div> </div>
</form> </form>
</div> </div>
<div class="col-md-4 col-lg-3 order-md-first mt-5 mt-md-0"> <div class="col-md-4 col-lg-3 order-md-first mt-5 mt-md-0">
<h2 class="sr-only">Piliers</h2>
<rare-pillars></rare-pillars> <rare-pillars></rare-pillars>
</div> </div>
</div> </div>
<h1 class="sr-only">Résultats de la recherche</h1>
<div class="mt-4"> <div class="mt-4">
<!-- search bar --> <h2 class="sr-only">Nouvelle recherche</h2>
<form class="input-group" [formGroup]="searchForm" (ngSubmit)="newSearch()"> <form [formGroup]="searchForm" (ngSubmit)="newSearch()">
<input class="form-control" type="text" <label class="sr-only" for="query">Rechercher</label>
placeholder="Exemples : pisum sativum, rosa" <div class="input-group">
formControlName="search" <input id="query"
[ngbTypeahead]="suggesterTypeahead"> class="form-control"
<div class="input-group-append"> placeholder="Exemples : pisum sativum, rosa"
<button class="btn btn-outline-secondary" type="submit">Recherche</button> formControlName="search"
[ngbTypeahead]="suggesterTypeahead">
<div class="input-group-append">
<button class="btn btn-outline-secondary">Recherche</button>
</div>
</div> </div>
</form> </form>
</div> </div>
...@@ -18,7 +24,7 @@ ...@@ -18,7 +24,7 @@
</div> </div>
<div class="row mt-sm-2 mt-md-5"> <div class="row mt-sm-2 mt-md-5">
<div class="col-lg-3 col-md-4 col-xs-12 filters" [@showHide]="filters"> <div class="col-lg-3 col-md-4 col-xs-12 filters" [@showHide]="filters">
<!-- aggregations --> <h2 class="sr-only">Filtres</h2>
<rare-aggregations *ngIf="aggregations" <rare-aggregations *ngIf="aggregations"
[aggregations]="aggregations" [aggregations]="aggregations"
[selectedCriteria]="aggregationCriteria" [selectedCriteria]="aggregationCriteria"
...@@ -26,12 +32,13 @@ ...@@ -26,12 +32,13 @@
</rare-aggregations> </rare-aggregations>
</div> </div>
<div class="col-lg-9 col-md-8 col-xs-12"> <div class="col-lg-9 col-md-8 col-xs-12">
<!-- results --> <h2 class="sr-only">Résultats</h2>
<div *ngIf="results"> <div *ngIf="results">
<rare-genetic-resources [geneticResources]="results"></rare-genetic-resources> <rare-genetic-resources [geneticResources]="results"></rare-genetic-resources>
</div> </div>
<!-- pagination -->
<div class="d-flex justify-content-center mt-5" *ngIf="results && results.totalPages > 1"> <div class="d-flex justify-content-center mt-5" *ngIf="results && results.totalPages > 1">
<h2 class="sr-only">Pagination</h2>
<!-- we add 1 to the page because ngb-pagination is 1 based --> <!-- we add 1 to the page because ngb-pagination is 1 based -->
<ngb-pagination *ngIf="results" [page]="results.number + 1" (pageChange)="navigateToPage($event)" <ngb-pagination *ngIf="results" [page]="results.number + 1" (pageChange)="navigateToPage($event)"
[collectionSize]="collectionSize()" [collectionSize]="collectionSize()"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment