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>
<h2>
<h3>
<a class="main-link name" [href]="geneticResource.dataURL ? geneticResource.dataURL : geneticResource.portalURL">
{{ geneticResource.name }}
</a>
<small> - {{ geneticResource.pillarName }}</small>
</h2>
</h3>
<div>
<span class="mr-4">
<a class="datasource-link" [href]="geneticResource.portalURL">{{ geneticResource.databaseSource }}</a>
......
h2 {
h3 {
font-size: 1.25rem;
margin-bottom: 0.25rem;
}
......
......@@ -12,7 +12,7 @@ describe('GeneticResourceComponent', () => {
}
get title() {
return this.element('h2');
return this.element('h3');
}
get link() {
......
<h1 class="sr-only">Ressources Agronomiques pour la Recherche</h1>
<div class="row mt-5">
<div class="col-md-8 col-lg-9 order-md-last">
<form class="input-group" [formGroup]="searchForm" (ngSubmit)="search()">
<input class="form-control form-control-lg" type="text"
placeholder="Exemples : pisum sativum, rosa"
formControlName="search"
[ngbTypeahead]="suggesterTypeahead">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit">Recherche</button>
<h2 class="sr-only">Rechercher des ressources</h2>
<form [formGroup]="searchForm" (ngSubmit)="search()">
<label class="sr-only" for="query">Rechercher</label>
<div class="input-group">
<input id="query"
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>
</form>
</div>
<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>
</div>
</div>
<h1 class="sr-only">Résultats de la recherche</h1>
<div class="mt-4">
<!-- search bar -->
<form class="input-group" [formGroup]="searchForm" (ngSubmit)="newSearch()">
<input class="form-control" type="text"
placeholder="Exemples : pisum sativum, rosa"
formControlName="search"
[ngbTypeahead]="suggesterTypeahead">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit">Recherche</button>
<h2 class="sr-only">Nouvelle recherche</h2>
<form [formGroup]="searchForm" (ngSubmit)="newSearch()">
<label class="sr-only" for="query">Rechercher</label>
<div class="input-group">
<input id="query"
class="form-control"
placeholder="Exemples : pisum sativum, rosa"
formControlName="search"
[ngbTypeahead]="suggesterTypeahead">
<div class="input-group-append">
<button class="btn btn-outline-secondary">Recherche</button>
</div>
</div>
</form>
</div>
......@@ -18,7 +24,7 @@
</div>
<div class="row mt-sm-2 mt-md-5">
<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"
[aggregations]="aggregations"
[selectedCriteria]="aggregationCriteria"
......@@ -26,12 +32,13 @@
</rare-aggregations>
</div>
<div class="col-lg-9 col-md-8 col-xs-12">
<!-- results -->
<h2 class="sr-only">Résultats</h2>
<div *ngIf="results">
<rare-genetic-resources [geneticResources]="results"></rare-genetic-resources>
</div>
<!-- pagination -->
<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 -->
<ngb-pagination *ngIf="results" [page]="results.number + 1" (pageChange)="navigateToPage($event)"
[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