From 0de6123df3e5fb870c383c6e147447ae9db4ab15 Mon Sep 17 00:00:00 2001
From: ddigusto <dimitri.digusto@ausy.fr>
Date: Wed, 7 Oct 2020 15:14:53 +0200
Subject: [PATCH] Improve navigation by pressing tab for accessibility
---
src/app/app.component.html | 2 +-
.../feedback/feedback.component.scss | 5 +++
.../main/header/header.component.html | 2 ++
.../core/components/main/main.component.html | 9 +++---
.../core/components/main/main.component.scss | 1 +
.../core/components/main/main.component.ts | 18 +++++++++++
.../resources-queryable.component.html | 6 ++--
.../resources-queryable.component.scss | 4 +++
.../dataset-detail.component.html | 14 ++++----
.../resource-download-item.component.html | 9 +++---
.../resource-download-item.component.scss | 4 ++-
.../dataset-info/dataset-info.component.html | 6 ++--
.../info-summary/info-summary.component.html | 12 +++----
.../dataset-reuses.component.html | 10 +++---
.../filter-detail.component.html | 10 +++---
.../filter-detail.component.scss | 11 +++++--
.../filter-list/filter-list.component.html | 4 +--
.../result-dataset.component.html | 4 +--
.../results-tab-scope.component.html | 20 ++++++------
.../results-tab-scope.component.scss | 19 ++++++-----
.../search-bar/search-bar.component.scss | 5 +++
.../reuse-detail/reuse-detail.component.html | 4 +--
.../reuses-list/reuses-list.component.html | 4 +--
.../download-button.component.html | 32 +++++++++----------
.../download-button.component.scss | 7 ++++
.../page-header/page-header.component.html | 4 +--
.../page-header/page-header.component.scss | 4 +++
.../restricted-access-banner.component.html | 4 +--
.../restricted-access-banner.component.scss | 5 +++
.../auth/login/login.component.scss | 5 +++
src/i18n/messages.en.xlf | 12 +++++++
src/i18n/messages.fr.xlf | 12 +++++++
32 files changed, 178 insertions(+), 90 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ecd3fd34..a95d764e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<app-main class="site"></app-main>
\ No newline at end of file
+<app-main class="site"></app-main>
diff --git a/src/app/core/components/feedback/feedback.component.scss b/src/app/core/components/feedback/feedback.component.scss
index f6b70b13..40ec4344 100644
--- a/src/app/core/components/feedback/feedback.component.scss
+++ b/src/app/core/components/feedback/feedback.component.scss
@@ -12,6 +12,11 @@ $length-due-to-diag-at-btn-position: calc(100vh * 0.10510423526);
$part-of-the-button-to-hide: calc(#{$feedback-button-width} - 2rem - 35px); // width of the button the svg width plus its margin right
$part-of-the-button-to-hide-negative: calc(-#{$feedback-button-width} + 2rem + 35px); // width of the button the svg width plus its margin right
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: $grey-dark-color;
+ opacity: 1; /* Firefox */
+}
+
form {
background-color: $grey-background-color;
padding: 1.4rem 1.4rem 1.4rem 1.4rem;
diff --git a/src/app/core/components/main/header/header.component.html b/src/app/core/components/main/header/header.component.html
index 0b148860..d719850c 100644
--- a/src/app/core/components/main/header/header.component.html
+++ b/src/app/core/components/main/header/header.component.html
@@ -151,4 +151,6 @@
</div>
</div>
</div>
+ <app-feedback></app-feedback>
+
</header>
diff --git a/src/app/core/components/main/main.component.html b/src/app/core/components/main/main.component.html
index 152dd5bf..1d886213 100644
--- a/src/app/core/components/main/main.component.html
+++ b/src/app/core/components/main/main.component.html
@@ -1,6 +1,7 @@
-<a class="skipLinks" [routerLink]="['./']" onclick="event.preventDefault(); location.hash='main-content'; main-content.focus();" fragment="main-content">Aller au contenu</a>
-<a class="skipLinks" [routerLink]="['./']" fragment="research-dataset">Aller à la recherche</a>
-<a class="skipLinks" [routerLink]="['./']" fragment="site-footer">Aller au footer</a>
+<button class="skipLinks" (click)="skipToContent()" i18n="@@skipLinks.content">Go to content</button>
+<button class="skipLinks" (click)="skipToSearchBar()" i18n="@@skipLinks.search">Go to search</button>
+<button class="skipLinks" (click)="skipToFooter()" i18n="@@skipLinks.footer">Go to footer</button>
+
<div class="grid-layout" [ngClass]="{'is-home': isHomePage, 'prevent-scroll': feedbackIsOpened || sidebarOpened }">
<app-header class="site-header">
</app-header>
@@ -14,8 +15,6 @@
<a id="site-content" tabindex="-1"></a>
<router-outlet></router-outlet>
- <app-feedback></app-feedback>
-
<app-notifications></app-notifications>
<app-cookie-banner></app-cookie-banner>
diff --git a/src/app/core/components/main/main.component.scss b/src/app/core/components/main/main.component.scss
index cea1dae9..fb4828fe 100644
--- a/src/app/core/components/main/main.component.scss
+++ b/src/app/core/components/main/main.component.scss
@@ -90,6 +90,7 @@
position: absolute;
left: -99999rem;
z-index: 100;
+ font-size: 1rem;
&:focus {
left: 0;
diff --git a/src/app/core/components/main/main.component.ts b/src/app/core/components/main/main.component.ts
index 5a037155..68025336 100644
--- a/src/app/core/components/main/main.component.ts
+++ b/src/app/core/components/main/main.component.ts
@@ -53,4 +53,22 @@ export class MainComponent implements OnInit, OnDestroy {
get feedbackIsOpened() {
return this._appStateService.feedbackOpened;
}
+
+ public skipToContent() {
+ setTimeout(() => {
+ document.getElementById('site-content').focus();
+ });
+ }
+
+ public skipToSearchBar() {
+ setTimeout(() => {
+ document.getElementById('research-dataset').focus();
+ });
+ }
+
+ public skipToFooter() {
+ setTimeout(() => {
+ document.getElementById('site-footer').focus();
+ });
+ }
}
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.html b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.html
index d7759bf2..74a3ea93 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.html
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.html
@@ -1,7 +1,7 @@
<div class="columns resources">
<div class="column resources-list">
<div class="resource" *ngFor="let resource of resources" [ngClass]="{'is-active': this.selectedApis[resource.id]}">
- <div class="resource-title is-mobile" (click)="updateSelectedResource(resource.id)"
+ <button class="resource-title is-mobile" (click)="updateSelectedResource(resource.id)"
[ngClass]="{'is-active': this.selectedApis[resource.id]}">
<div class="resource-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
@@ -31,7 +31,7 @@
</ng-container>
</div>
</div>
- </div>
+ </button>
<div class="resource-query column is-12" *ngIf="this.selectedApis[resource.id]">
@@ -40,4 +40,4 @@
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
index f7bf3fab..ee549f2f 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
@@ -54,6 +54,10 @@
display: flex;
align-items: center;
cursor: pointer;
+ border: none;
+ padding: 0;
+ background-color: transparent;
+ text-align: left;
}
.resource-information {
diff --git a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
index 3ae5c3f9..2879298e 100644
--- a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
+++ b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
@@ -7,7 +7,7 @@
<ul class="navigation-tabs">
<li [routerLinkActive]="'is-active'" *ngIf="hasTable || hasMap">
<a (click)="setPosition()" [routerLink]="[AppRoutes.data.uri]" class="tab-link">
- <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 32">
+ <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 32" aria-hidden="true">
<path class="primary"
d="M19 0L4.5 6.4v19.4L19 32l14.5-6.4V6.4L19 0zm13.5 24.9l-13 5.7-.5.3-13.5-5.8v-18l13.5-6 13.1 5.8L19 13l.5.2v.6l13-6.1v17.2z" />
<path class="secondary" d="M19 30.9l.5-.2V13.2L5.9 6.9l-.4.2v.7l13 6.1v16.8z" />
@@ -24,7 +24,7 @@
</li>
<li [routerLinkActive]="'is-active'">
<a (click)="setPosition()" [routerLink]="[AppRoutes.info.uri]" class="tab-link">
- <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37">
+ <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37" aria-hidden="true">
<g id="picto_x5F_info">
<path d="M19 15.6c.3 0 .5.2.5.6V25c0 .3-.2.6-.5.6s-.5-.2-.5-.6v-8.9c0-.3.2-.5.5-.5z" class="secondary" />
<circle cx="19" cy="12" r=".5" class="secondary" />
@@ -33,7 +33,7 @@
class="primary" />
</g>
</svg>
-
+
<div class="tab-text-wrapper">
<div>
<span class="tab-title tab-title-long" i18n="@@dataset.detail.infoTab">Information</span>
@@ -49,7 +49,7 @@
</li>
<li [routerLinkActive]="'is-active'" *ngIf="datasetFormatsList">
<a (click)="setPosition()" [routerLink]="[AppRoutes.downloads.uri]" class="tab-link">
- <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" data-name="Calque 1" viewBox="0 0 38 32">
+ <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" data-name="Calque 1" viewBox="0 0 38 32" aria-hidden="true">
<path class="primary"
d="M32.515 30H4.5a.5.5 0 01-.5-.5v-7.485a.5.5 0 011 0V29h27.015v-6.985a.5.5 0 011 0V29.5a.5.5 0 01-.5.5z" />
<path class="secondary"
@@ -68,7 +68,7 @@
</li>
<li [routerLinkActive]="'is-active'" *ngIf="datasetServicesList.length > 0">
<a (click)="setPosition()" [routerLink]="[AppRoutes.resources.uri]" class="tab-link">
- <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" data-name="Calque 1" viewBox="0 0 38 32">
+ <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" data-name="Calque 1" viewBox="0 0 38 32" aria-hidden="true">
<path class="secondary"
d="M12.841 22.076l-8.889-5.484 8.889-5.485a.5.5 0 10-.526-.85l-9.578 5.91-.011.01a.616.616 0 00-.075.07.478.478 0 00-.065.07s-.009.007-.012.012a.489.489 0 00-.026.073.411.411 0 00-.035.094.466.466 0 000 .1.55.55 0 000 .091.456.456 0 00.038.1.412.412 0 00.024.067l.01.01a.5.5 0 00.153.154l9.578 5.91a.5.5 0 00.526-.852z" />
<path class="primary"
@@ -87,7 +87,7 @@
</li>
<li [routerLinkActive]="'is-active'">
<a (click)="setPosition()" [routerLink]="[AppRoutes.dataReuses.uri]" class="tab-link">
- <svg class="tab-icon" viewBox="0 0 38 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg class="tab-icon" viewBox="0 0 38 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path class="primary" fill-rule="evenodd" clip-rule="evenodd" d="M5 6.286L19.455 0 33.91 6.285V25.14l-14.455 6.284L5 25.14V6.286zm27.59.516l-6.484-2.82.002.005-5.362 2.264-1.229-.567 5.328-2.25-5.39-2.344-5.423 2.358 5.4 2.218-1.24.572-5.33-2.189.046-.112-6.59 2.866 5.494 2.38-.527.244v.619L6 7.754v7.874l5.285 2.485v1.055l1 .423v7.626l6.541 2.844v-7.703l.63.267.37-.157v7.7h-.007l.006.005 6.543-2.845V19.7l1.257-.532v-1.086l5.285-2.46V7.753l-5.285 2.286v-.613l-.532-.246 5.497-2.378zm.32 9.923l-5.542 2.58v7.588l5.542-2.41v-7.758zM11.285 26.782v-7.564L6 16.733v7.752l5.285 2.297z" fill="#464A57"/>
<path class="secondary" fill-rule="evenodd" clip-rule="evenodd" d="M11.285 19.17V9.427l8.17-3.771 8.17 3.77v9.742l-8.17 3.457-8.17-3.457v.002zm1.75-9.45l6.42-2.962 6.45 2.976-6.274 2.836h-.349l-6.247-2.85zm-.75.758v8.029l6.541 2.767V13.46l-6.54-2.983zm7.541 10.905l6.8-2.877v-8l-6.8 3.073v7.804z" fill="#DA322F"/>
</svg>
@@ -107,4 +107,4 @@
<div class="details-container">
<router-outlet></router-outlet>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
index 8119b62b..cea921bd 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
@@ -27,12 +27,12 @@
</div>
<div class="right-buttons">
- <div *ngIf="format && ((format.isCuttable && inseeLabel) || format.isProjectable)"
+ <button *ngIf="format && ((format.isCuttable && inseeLabel) || format.isProjectable)"
class="options-icon is-hidden-mobile" [ngClass]="{'is-open': isOptionOpen}"
(click)="isOptionOpen = !isOptionOpen">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
- x="0px" y="0px" viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+ x="0px" y="0px" viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve" aria-hidden="true">
<style type="text/css">
.st0 {
fill: none;
@@ -51,7 +51,8 @@
c0.1,0.1,0.3,0.3,0.5,0.3c0.2,0.1,0.4,0.1,0.6,0.1c0.2,0,0.8,0,1.1-0.5l1.7-1.7c0.1-0.1,0.3-0.3,0.3-0.5c0.1-0.2,0.1-0.4,0.1-0.6
c0-0.2,0-0.8-0.5-1.1l-0.5-0.5c0.2-0.4,0.4-0.9,0.5-1.3h0.8C32.3,24.9,33,24.2,33,23.4z" />
</svg>
- </div>
+ <span class="sr-only">Options</span>
+ </button>
<app-download-button [url]="queryableUrl" [fileName]="fileName">
</app-download-button>
@@ -136,4 +137,4 @@
</div>
</div>
</div>
- </div>
\ No newline at end of file
+ </div>
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
index b4f9bb3f..f03ab9f9 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
@@ -95,6 +95,8 @@
width: 2.75rem;
height: 2.75rem;
margin-right: 0.5rem;
+ background-color: transparent;
+ padding: 0;
&:hover {
cursor: pointer;
@@ -127,7 +129,7 @@
}
}
-// Mobile: dropdown displays at 100%.
+// Mobile: dropdown displays at 100%.
.dropdown,
.dropdown-trigger,
.dropdown-trigger button,
diff --git a/src/app/dataset-detail/components/dataset-info/dataset-info.component.html b/src/app/dataset-detail/components/dataset-info/dataset-info.component.html
index 1d3aff25..dc8308f7 100644
--- a/src/app/dataset-detail/components/dataset-info/dataset-info.component.html
+++ b/src/app/dataset-detail/components/dataset-info/dataset-info.component.html
@@ -46,7 +46,7 @@
</span>
<div class="related-dataset">
<div class="related-dataset-item">
- <img [src]="parent.imageUrl || './assets/img/vignette-collection.png'" alt="dataset parent thumbnail image"
+ <img [src]="parent.imageUrl || './assets/img/vignette-collection.png'" alt="" aria-hidden="true"
onerror="this.onerror=null;this.src='./assets/img/vignette-collection.png';this.alt='Default image'">
<a class="link-without-decoration"
[routerLink]="['/', AppRoutes.datasets.uri, parent.slug]">{{parent.title}}</a>
@@ -59,7 +59,7 @@
</span>
<div class="related-dataset">
<div class="related-dataset-item" *ngFor="let child of children">
- <img [src]="child.imageUrl || './assets/img/vignette-data.png'" alt="dataset children thumbnail image"
+ <img [src]="child.imageUrl || './assets/img/vignette-data.png'" alt="" aria-hidden="true"
onerror="this.onerror=null;this.src='./assets/img/vignette-data.png';this.alt='Default image'">
<a class="link-without-decoration"
[routerLink]="['/', AppRoutes.datasets.uri, child.slug]">{{child.title}}</a>
@@ -82,7 +82,7 @@
<div class="column is-narrow">
<div class="geo-thumbnail">
<ng-container *ngIf="metadata.image;else noImage">
- <img [src]="metadata.image.url" alt="Image du Dataset" (error)="setBackupImage()">
+ <img [src]="metadata.image.url" alt="" aria-hidden="true" (error)="setBackupImage()">
</ng-container>
<ng-template #noImage>
<img src="./assets/img/vignette-data-geo.png" alt="No Image Dataset">
diff --git a/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.html b/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.html
index ae769a56..8da01224 100644
--- a/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.html
+++ b/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.html
@@ -5,7 +5,7 @@
<div class="summary">
<div>
<ng-container *ngIf="summaryInfo.isOpenAccess; else lockedIconTemplate">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden="true">
<path id="accees_x5F_ouvert"
d="M13 1c-2.8 0-5 2.2-5 5v1H2C.9 7 0 7.9 0 9v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2h-2V6c0-1.7 1.3-3 3-3s3 1.3 3 3c0 .6.4 1 1 1s1-.4 1-1c0-2.8-2.2-5-5-5z"
class="greylightcolor" />
@@ -13,7 +13,7 @@
</ng-container>
<ng-template #lockedIconTemplate>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden="true">
<path id="accees_x5F_ferme"
d="M14 7V6c0-2.8-2.2-5-5-5S4 3.2 4 6v1c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM6 6c0-1.7 1.3-3 3-3s3 1.3 3 3v1H6V6z"
class="greylightcolor" />
@@ -22,7 +22,7 @@
<span>{{ summaryInfo.restriction }}</span>
</div>
<div>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden="true">
<g id="picto_x5F_publish">
<path
d="M16.1 1.8c-1-1-2.6-1-3.5 0l-.5-.5c-.9-.9-2.2-.9-3-.1l-3 3c-.4.4-.4 1 0 1.4l.7.7 3.7-3.7s.1 0 .3.1l.5.5-4.1 4 3.5 3.5 5.4-5.3c1-1 1-2.6 0-3.6zM6.5 7.9L2 12.4c-.5.5-.9 3.8-.9 3.8-.1.4.2.7.6.6 0 0 3.3-.4 3.8-.9l4.5-4.5-3.5-3.5z"
@@ -39,7 +39,7 @@
{{ (summaryInfo.publicationDate | date: 'dd/MM/yyyy') || '-' }}</span>
</div>
<div>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden="true">
<path id="picto_x5F_refresh"
d="M12.7 5c-.5-.4-1.1-.8-1.7-1-.6-.3-1.3-.4-2-.4-1.2 0-2.4.4-3.4 1.1-.9.8-1.6 1.8-1.9 3 0 .1-.1.2-.1.2-.1 0-.1.1-.2.1H1.5c-.1 0-.2 0-.3-.1-.1-.2-.1-.3-.1-.4.2-1.2.7-2.3 1.5-3.3s1.7-1.8 2.8-2.3C6.5 1.3 7.7 1 9 1c1.1 0 2.1.2 3 .6.9.4 1.8.9 2.5 1.6L15.7 2c.2-.2.3-.2.5-.2s.4.1.5.2c.2.2.3.4.3.6v4.3c0 .2-.1.4-.2.5-.2.2-.3.2-.5.2H12c-.2 0-.4-.1-.5-.2-.2-.2-.2-.3-.2-.5s.1-.4.2-.5L12.7 5zM1.8 10.3h4.3c.2 0 .4.1.5.2.2.2.2.3.2.5s-.1.4-.2.5L5.3 13c.5.5 1.1.8 1.7 1.1.6.2 1.3.4 2 .4 1.2 0 2.4-.4 3.3-1.1 1-.8 1.6-1.8 1.9-3 0-.1.1-.2.1-.2.1-.1.2-.1.3-.1h1.8c.1 0 .2.1.3.2.1.1.1.2.1.3-.2 1.2-.7 2.3-1.5 3.3s-1.7 1.8-2.8 2.3c-1 .5-2.2.8-3.5.8-1.1 0-2.1-.2-3-.6s-1.8-.9-2.5-1.6L2.3 16c-.2.2-.3.2-.5.2s-.4-.1-.5-.2c-.2-.2-.3-.4-.3-.6v-4.3c0-.2.1-.4.2-.5.2-.2.4-.3.6-.3z"
class="greylightcolor" />
@@ -48,7 +48,7 @@
<span>{{ summaryInfo.updateFrequency }}</span>
</div>
<div>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden="true">
<path id="picto_x5F_view"
d="M17.8 8.2c-.9-1.5-2.1-2.7-3.7-3.6-1.5-.9-3.2-1.4-5.1-1.4-1.9 0-3.6.5-5.1 1.4-1.6.9-2.8 2.1-3.7 3.6-.1.3-.2.5-.2.8s.1.5.2.8c.9 1.5 2.1 2.7 3.7 3.6 1.6.9 3.3 1.4 5.1 1.4 1.9 0 3.6-.5 5.1-1.4 1.5-.9 2.8-2.1 3.7-3.6.1-.3.2-.5.2-.8s-.1-.5-.2-.8zm-8.8 5c-.8 0-1.5-.2-2.1-.6-.6-.4-1.2-.9-1.6-1.6-.4-.5-.5-1.2-.5-2s.2-1.5.6-2.1c.4-.6.9-1.2 1.6-1.5.5-.5 1.2-.6 2-.6s1.5.2 2.1.6c.6.4 1.2.9 1.5 1.5.4.6.6 1.4.6 2.1s-.2 1.5-.6 2.1c-.4.6-.9 1.2-1.5 1.6-.6.4-1.3.5-2.1.5zM12.2 9c0 .9-.3 1.7-1 2.3-.6.6-1.4.9-2.3.9s-1.7-.3-2.3-.9c-.5-.6-.8-1.4-.8-2.3 0-.5.1-1.1.4-1.5 0 .4.1.7.4 1 .3.2.6.4 1 .4s.7-.1.9-.4c.3-.3.4-.6.4-1s-.2-.7-.5-1c-.2-.2-.6-.4-.9-.4.5-.2 1-.4 1.5-.4.9 0 1.7.3 2.3 1 .6.6.9 1.4.9 2.3z"
class="greylightcolor" />
@@ -62,7 +62,7 @@
</ng-template>
</div>
<div>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden="true">
<path id="picto_donne"
d="M10 5.2V1H3.8c-.3 0-.4.1-.6.2-.1.2-.2.3-.2.6v14.5c0 .2.1.4.2.5.2.1.3.2.6.2h10.5c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5V6h-4.2c-.2 0-.4-.1-.5-.2s-.3-.3-.3-.6zm5-.4V5h-4V1h.2c.2 0 .4.1.5.2l3.1 3.1c.1.1.2.3.2.5z"
class="greylightcolor" />
diff --git a/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.html b/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.html
index b33241f3..520deeaa 100644
--- a/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.html
+++ b/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.html
@@ -10,15 +10,15 @@
</div>
</div>
<div class="item" *ngFor="let reuse of reuses" >
-
+
<div class="reuse">
<a [routerLink]="['/', AppRoutes.reuses.uri, reuse._id]">
<div class="logo-content">
- <img [src]="reuse.logo" [alt]="reuse.name + 'logo'">
+ <img [src]="reuse.logo" [alt]="" aria-hidden="true">
</div>
<span class="title">{{reuse.name}}</span>
<p>{{reuse.creator}}</p>
-
+
<div class="bottom-section">
<span>{{ formatReusesTypes(reuse.reuseTypes) }}</span>
<span>
@@ -34,7 +34,7 @@
</div>
<p class="section-title" i18n="@@dataset.reuse.title2" *ngIf="hasRelatedPosts">News</p>
<div class="posts-container" *ngIf="hasRelatedPosts">
-
+
<div class="post-item" *ngFor="let post of relatedNews">
<a [routerLink]="['/', AppRoutes.articles.uri, post.slug]" class="link-without-decoration">
<div class="post-image" [ngStyle]="{'background-image': 'url(' + post.content.featureImage + ') '}">
@@ -49,4 +49,4 @@
</a>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
index 36ceecf6..8d8a0c74 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
@@ -5,11 +5,11 @@
-->
<aside *ngIf="filter.aggregations && filter.aggregations.length > 0" [ngClass]="{'is-active': displayFilterItems}">
- <p class="filter-label" (click)="toggleFilterItems()">
+ <button class="filter-label" (click)="toggleFilterItems()">
<span>{{ filter.label }}</span>
- <img class="icon-plus-minus" src="./assets/img/minus.svg" alt="Minus icon" *ngIf="displayFilterItems">
- <img class="icon-plus-minus" src="./assets/img/plus.svg" alt="plus icon" *ngIf="!displayFilterItems">
- </p>
+ <img class="icon-plus-minus" src="./assets/img/minus.svg" alt="" aria-hidden="true" *ngIf="displayFilterItems">
+ <img class="icon-plus-minus" src="./assets/img/plus.svg" alt="" aria-hidden="true" *ngIf="!displayFilterItems">
+ </button>
<ul class="filter-items" [ngClass]="{'is-active': displayFilterItems}">
<li *ngFor="let aggregation of filter.aggregations; let i=index"
[ngClass]="{'active': (aggregation.isActive == true) }">
@@ -86,4 +86,4 @@
</li>
</ul>
-</aside>
\ No newline at end of file
+</aside>
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
index d71ae771..49b4773b 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
@@ -17,13 +17,14 @@ aside {
}
.filter-label {
- padding-bottom: 0.5rem;
- padding-top: 0.5rem;
- padding-left: 1.5rem;
+ padding: 0.5rem 0 0.5rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
+ background-color: transparent;
+ border: none;
+ width: 100%;
span {
font-size: $size-5;
@@ -34,6 +35,10 @@ aside {
height: 13px;
width: 13px;
}
+
+ &:hover, &:focus, &:active {
+ font-weight: 600;
+ }
}
.filter-items {
diff --git a/src/app/datasets/components/filter-list/filter-list.component.html b/src/app/datasets/components/filter-list/filter-list.component.html
index 7e436d71..8228e705 100644
--- a/src/app/datasets/components/filter-list/filter-list.component.html
+++ b/src/app/datasets/components/filter-list/filter-list.component.html
@@ -1,7 +1,7 @@
<ng-container *ngIf="filters">
<div class="active-filters-header columns is-mobile is-vcentered is-marginless">
<div class="filter-title is-size-7 column is-narrow is-pulled-left">
- <span class="filter-img"><img src="./assets/img/picto_filtres.svg" alt="Picto de la section filtre"></span>
+ <span class="filter-img"><img src="./assets/img/picto_filtres.svg" aria-hidden="true" alt=""></span>
<span class="is-uppercase has-text-weight-bold" i18n="@@global.filters">Filters</span>
</div>
<div class="column is-narrow is-paddingless" *ngIf="activeAggregations && activeAggregations.length > 0">
@@ -27,7 +27,7 @@
<button class="remove-filter-btn" (click)="removeFilter(activeAgg)">
<svg xmlns="http://www.w3.org/2000/svg" id="filtre-close" viewBox="0 0 15 15">
<path stroke="#4668AB" fill="#4668AB" d="M13.6 12.8L8.2 7.4l5.1-5.1c.2-.2.2-.5 0-.7s-.5-.2-.7 0l-5.1 5-5.1-5.1c-.2-.2-.5-.2-.7 0s-.2.5-.1.7l5.1 5.1-5.4 5.4c-.2.2-.2.5 0 .7.1.1.2.1.4.1s.3 0 .4-.1L7.5 8l5.4 5.4c.1.1.2.1.4.1s.3 0 .4-.1c.1-.1.1-.4-.1-.6z" class="white"/>
- </svg>
+ </svg>
</button>
</div>
</div>
diff --git a/src/app/datasets/components/results/result-dataset/result-dataset.component.html b/src/app/datasets/components/results/result-dataset/result-dataset.component.html
index 8c7e0487..e4ab737b 100644
--- a/src/app/datasets/components/results/result-dataset/result-dataset.component.html
+++ b/src/app/datasets/components/results/result-dataset/result-dataset.component.html
@@ -3,7 +3,7 @@
<div class="columns is-marginless">
<div class="column is-1 is-paddingless image-item is-hidden-mobile">
<ng-container *ngIf="dataset.metadata.image;else noImage">
- <img [src]="imageUrl" alt="Image du Dataset" (error)="backupImage()">
+ <img [src]="imageUrl" alt="" aria-hidden="true" (error)="backupImage()">
</ng-container>
<ng-template #noImage>
<img [src]="imageUrl" alt="No Image Dataset">
@@ -47,4 +47,4 @@
dataset.highlights.highlightedDescription.join(' [...] ') : dataset.metadata.abstractTroncated"></p>
</div>
</div>
-</ng-container>
\ No newline at end of file
+</ng-container>
diff --git a/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.html b/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.html
index 5c870b07..949eb1ac 100644
--- a/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.html
+++ b/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.html
@@ -1,23 +1,23 @@
<!-- Tabs -->
-<ul class="tabs-container">
- <li (click)="changeScope(scopesResearch.all)" [ngClass]="{'is-selected': selectedScope.key === scopesResearch.all.key}"
+<div class="tabs-container">
+ <button (click)="changeScope(scopesResearch.all)" [ngClass]="{'is-selected': selectedScope.key === scopesResearch.all.key}"
[attr.aria-current]="selectedScope.key === scopesResearch.all.key ? 'page' : undefined">
<span class="tab-label">{{ scopesResearch.all.label }}</span>
<span class="tab-count">{{ countResults[scopesResearch.all.key] || 0 }}</span>
- </li>
- <li (click)="changeScope(scopesResearch.datasets)" [ngClass]="{'is-selected': selectedScope.key === scopesResearch.datasets.key}"
+ </button>
+ <button (click)="changeScope(scopesResearch.datasets)" [ngClass]="{'is-selected': selectedScope.key === scopesResearch.datasets.key}"
[attr.aria-current]="selectedScope.key === scopesResearch.datasets.key ? 'page' : undefined">
<span class="tab-label">{{ scopesResearch.datasets.label }}</span>
<span class="tab-count">{{ countResults[scopesResearch.datasets.key] || 0 }}</span>
- </li>
- <li (click)="changeScope(scopesResearch.services)" [ngClass]="{'is-selected': selectedScope.key === scopesResearch.services.key}"
+ </button>
+ <button (click)="changeScope(scopesResearch.services)" [ngClass]="{'is-selected': selectedScope.key === scopesResearch.services.key}"
[attr.aria-current]="selectedScope.key === scopesResearch.services.key ? 'page' : undefined">
<span class="tab-label">{{ scopesResearch.services.label }}</span>
<span class="tab-count">{{ countResults[scopesResearch.services.key] || 0 }}</span>
- </li>
- <li (click)="changeScope(scopesResearch.post)" [ngClass]="{'is-selected': selectedScope.key === scopesResearch.post.key}"
+ </button>
+ <button (click)="changeScope(scopesResearch.post)" [ngClass]="{'is-selected': selectedScope.key === scopesResearch.post.key}"
[attr.aria-current]="selectedScope.key === scopesResearch.post.key ? 'page' : undefined">
<span class="tab-label">{{ scopesResearch.post.label }}</span>
<span class="tab-count">{{ countResults[scopesResearch.post.key] || 0 }}</span>
- </li>
-</ul>
+ </button>
+</div>
diff --git a/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.scss b/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.scss
index a88e966c..ee76deff 100644
--- a/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.scss
+++ b/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.scss
@@ -9,7 +9,7 @@
display: block;
}
- li {
+ button {
display: inline-block;
padding-right: 2rem;
padding-bottom: 0.3125rem;
@@ -17,6 +17,9 @@
position: relative;
margin-bottom: 1px;
width: 100%;
+ background-color: transparent;
+ border: none;
+ text-align: left;
@media screen and (min-width: $tablet) {
width: 6rem;
@@ -24,11 +27,11 @@
}
}
- li:last-child {
+ button:last-child {
padding-right: 0;
}
- li > span {
+ button > span {
display: block;
}
@@ -38,7 +41,7 @@
color: $brand-color;
}
- li:hover {
+ button:hover, button:focus, button:active {
.tab-label {
font-weight: 600;
}
@@ -50,20 +53,20 @@
color: $grey-dark-color;
}
- li.is-selected {
+ button.is-selected {
.tab-label {
color: $tomato-color;
font-weight: 600;
}
}
- li.disabled {
+ button.disabled {
span {
color: $grey-super-light-color;
}
}
- li::after {
+ button::after {
content: '';
display: block;
height: 2px;
@@ -73,7 +76,7 @@
bottom: -2px;
}
- li.is-selected::after {
+ button.is-selected::after {
transition: width 0.3s;
width: 100%;
}
diff --git a/src/app/datasets/components/search-bar/search-bar.component.scss b/src/app/datasets/components/search-bar/search-bar.component.scss
index 35612671..27163755 100644
--- a/src/app/datasets/components/search-bar/search-bar.component.scss
+++ b/src/app/datasets/components/search-bar/search-bar.component.scss
@@ -1,6 +1,11 @@
@import "../../../../scss/variables.scss";
@import "../../../../../node_modules/bulma/sass/utilities/_all.sass";
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: $grey-dark-color;
+ opacity: 1; /* Firefox */
+}
+
.row {
padding-right: 1.875rem;
padding-left: 1.875rem;
diff --git a/src/app/editorialisation/components/reuse-detail/reuse-detail.component.html b/src/app/editorialisation/components/reuse-detail/reuse-detail.component.html
index 77d2b291..809dec79 100644
--- a/src/app/editorialisation/components/reuse-detail/reuse-detail.component.html
+++ b/src/app/editorialisation/components/reuse-detail/reuse-detail.component.html
@@ -2,7 +2,7 @@
<div class="page-header-container">
<app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
- <img class="logo" [src]="reuse.logo" [alt]="reuse.name + 'logo'">
+ <img class="logo" [src]="reuse.logo" [alt]="" aria-hidden="true">
</div>
<div class="page-content">
@@ -32,4 +32,4 @@
</div>
</div>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/app/editorialisation/components/reuses-list/reuses-list.component.html b/src/app/editorialisation/components/reuses-list/reuses-list.component.html
index 4414745a..693f762a 100644
--- a/src/app/editorialisation/components/reuses-list/reuses-list.component.html
+++ b/src/app/editorialisation/components/reuses-list/reuses-list.component.html
@@ -18,7 +18,7 @@
<div class="reuse">
<a [routerLink]="['/', AppRoutes.reuses.uri, reuse._id]">
<div class="logo-content">
- <img [src]="reuse.logo" [alt]="reuse.name + 'logo'">
+ <img [src]="reuse.logo" [alt]="" aria-hidden="true">
</div>
<span class="title">{{reuse.name}}</span>
<p>{{reuse.creator}}</p>
@@ -37,4 +37,4 @@
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/shared/components/download-button/download-button.component.html b/src/app/shared/components/download-button/download-button.component.html
index 856f6068..2e4d0506 100644
--- a/src/app/shared/components/download-button/download-button.component.html
+++ b/src/app/shared/components/download-button/download-button.component.html
@@ -1,32 +1,30 @@
-<div class="download-button" [attr.data-tooltip]="loading ? abortMessage : null">
+<div class="download-button" [attr.data-tooltip]="loading ? abortMessage : downloadMessage">
- <div class="resource-icon-download" (click)="download()" *ngIf="!loading">
- <a [attr.data-tooltip]="downloadMessage">
-
- <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
- x="0px" y="0px" viewBox="0 0 44 44" xml:space="preserve">
+ <button class="resource-icon-download" (click)="download()" *ngIf="!loading">
+ <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" viewBox="0 0 44 44" xml:space="preserve" aria-hidden="true">
<g>
<path fill="#4668AB"
- d="M32.3,25.5H32c-0.3,0-0.7,0.3-0.7,0.7v4.6H12.7v-4.6c0-0.4-0.3-0.7-0.7-0.7h-0.3c-0.3,0-0.7,0.3-0.7,0.7v5.3
+ d="M32.3,25.5H32c-0.3,0-0.7,0.3-0.7,0.7v4.6H12.7v-4.6c0-0.4-0.3-0.7-0.7-0.7h-0.3c-0.3,0-0.7,0.3-0.7,0.7v5.3
v0.3c0,0.4,0.3,0.7,0.7,0.7H12h20h0.3c0.3,0,0.7-0.3,0.7-0.7v-0.3v-5.3C33,25.8,32.7,25.5,32.3,25.5z" />
<path fill="#4668AB"
- d="M21.3,26.9c0.1,0.1,0.3,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.3,0.1c0.1,0,0.3,0,0.3-0.1c0.2,0,0.3-0.1,0.3-0.2
+ d="M21.3,26.9c0.1,0.1,0.3,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.3,0.1c0.1,0,0.3,0,0.3-0.1c0.2,0,0.3-0.1,0.3-0.2
l5.9-6.1c0.2-0.3,0.2-0.6,0-0.8l-0.4-0.4c-0.2-0.3-0.6-0.3-0.8,0l-4.6,4.7V12.4c0-0.5-0.3-0.9-0.8-0.9s-0.8,0.3-0.8,0.9v11.9
l-4.6-4.7c-0.2-0.3-0.5-0.3-0.8,0L15.4,20c-0.2,0.3-0.2,0.6,0,0.8L21.3,26.9z" />
</g>
</svg>
- </a>
- </div>
- <div class="resource-icon-cancel" *ngIf="loading">
+ <span class="sr-only">{{ downloadMessage }}</span>
+ </button>
+ <button class="resource-icon-cancel" *ngIf="loading">
- <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd"
- d="M17 0C18.1009 0 19.0325 0.929231 19.0325 2.02741C19.0325 3.16783 18.1009 4.05483 17 4.05483C15.8567 4.05483 14.9675 3.16783 14.9675 2.02741C14.9675 0.929231 15.8567 0 17 0ZM6.37132 4.36171C7.47224 4.36171 8.40378 5.29094 8.40378 6.38912C8.40378 7.52954 7.47224 8.41653 6.37132 8.41653C5.22807 8.41653 4.33887 7.52954 4.33887 6.38912C4.33887 5.29094 5.22807 4.36171 6.37132 4.36171ZM4.06492 17.0002C4.06492 15.902 3.13337 14.9728 2.03246 14.9728C0.8892 14.9728 0 15.902 0 17.0002C0 18.1406 0.8892 19.0276 2.03246 19.0276C3.13337 19.0276 4.06492 18.1406 4.06492 17.0002ZM6.37132 25.5838C7.47224 25.5838 8.40378 26.513 8.40378 27.6112C8.40378 28.7516 7.47224 29.6386 6.37132 29.6386C5.22807 29.6386 4.33887 28.7516 4.33887 27.6112C4.33887 26.513 5.22807 25.5838 6.37132 25.5838ZM19.0327 31.9727C19.0327 30.8745 18.1011 29.9453 17.0002 29.9453C15.857 29.9453 14.9678 30.8745 14.9678 31.9727C14.9678 33.1131 15.857 34.0001 17.0002 34.0001C18.1011 34.0001 19.0327 33.1131 19.0327 31.9727ZM27.6301 25.5838C28.731 25.5838 29.6626 26.513 29.6626 27.6112C29.6626 28.7516 28.731 29.6386 27.6301 29.6386C26.4869 29.6386 25.5977 28.7516 25.5977 27.6112C25.5977 26.513 26.4869 25.5838 27.6301 25.5838ZM34.0005 17.0002C34.0005 15.902 33.0689 14.9728 31.968 14.9728C30.8247 14.9728 29.9355 15.902 29.9355 17.0002C29.9355 18.1406 30.8247 19.0276 31.968 19.0276C33.0689 19.0276 34.0005 18.1406 34.0005 17.0002Z"
- fill="#242B3F" />
+ d="M17 0C18.1009 0 19.0325 0.929231 19.0325 2.02741C19.0325 3.16783 18.1009 4.05483 17 4.05483C15.8567 4.05483 14.9675 3.16783 14.9675 2.02741C14.9675 0.929231 15.8567 0 17 0ZM6.37132 4.36171C7.47224 4.36171 8.40378 5.29094 8.40378 6.38912C8.40378 7.52954 7.47224 8.41653 6.37132 8.41653C5.22807 8.41653 4.33887 7.52954 4.33887 6.38912C4.33887 5.29094 5.22807 4.36171 6.37132 4.36171ZM4.06492 17.0002C4.06492 15.902 3.13337 14.9728 2.03246 14.9728C0.8892 14.9728 0 15.902 0 17.0002C0 18.1406 0.8892 19.0276 2.03246 19.0276C3.13337 19.0276 4.06492 18.1406 4.06492 17.0002ZM6.37132 25.5838C7.47224 25.5838 8.40378 26.513 8.40378 27.6112C8.40378 28.7516 7.47224 29.6386 6.37132 29.6386C5.22807 29.6386 4.33887 28.7516 4.33887 27.6112C4.33887 26.513 5.22807 25.5838 6.37132 25.5838ZM19.0327 31.9727C19.0327 30.8745 18.1011 29.9453 17.0002 29.9453C15.857 29.9453 14.9678 30.8745 14.9678 31.9727C14.9678 33.1131 15.857 34.0001 17.0002 34.0001C18.1011 34.0001 19.0327 33.1131 19.0327 31.9727ZM27.6301 25.5838C28.731 25.5838 29.6626 26.513 29.6626 27.6112C29.6626 28.7516 28.731 29.6386 27.6301 29.6386C26.4869 29.6386 25.5977 28.7516 25.5977 27.6112C25.5977 26.513 26.4869 25.5838 27.6301 25.5838ZM34.0005 17.0002C34.0005 15.902 33.0689 14.9728 31.968 14.9728C30.8247 14.9728 29.9355 15.902 29.9355 17.0002C29.9355 18.1406 30.8247 19.0276 31.968 19.0276C33.0689 19.0276 34.0005 18.1406 34.0005 17.0002Z"
+ fill="#242B3F" />
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="1.2s"
- repeatCount="indefinite" />
+ repeatCount="indefinite" />
</svg>
<img src="../../../../../../assets/img/close.svg" [alt]="abortMessage" (click)=abortDownload()>
- </div>
-</div>
\ No newline at end of file
+ </button>
+</div>
diff --git a/src/app/shared/components/download-button/download-button.component.scss b/src/app/shared/components/download-button/download-button.component.scss
index 8e0b8408..91c11cd5 100644
--- a/src/app/shared/components/download-button/download-button.component.scss
+++ b/src/app/shared/components/download-button/download-button.component.scss
@@ -1,5 +1,12 @@
@import './../../../../scss/variables.scss';
+.download-button {
+ button {
+ background-color: transparent;
+ padding: 0;
+ }
+}
+
.resource-icon-download {
border: 1px solid $grey-super-light-color;
border-radius: 4px;
diff --git a/src/app/shared/components/page-header/page-header.component.html b/src/app/shared/components/page-header/page-header.component.html
index f2d0ad61..11321fc5 100644
--- a/src/app/shared/components/page-header/page-header.component.html
+++ b/src/app/shared/components/page-header/page-header.component.html
@@ -1,9 +1,9 @@
<div class="page-header">
- <div class="back-button" tabindex="0" (click)="goToPreviousPage()"
+ <button class="back-button" tabindex="0" (click)="goToPreviousPage()"
[ngClass]="{'has-beta-style': pageInfo.hasBetaStyle}">
<img class="icon-left-arrow" src="./assets/img/left_arrow.svg" alt="Picto de la flèche retour">
<ng-container i18n="@@dataset.detail.back">Back</ng-container>
- </div>
+ </button>
<div class="page-title"
[ngClass]="{'has-surtitle': pageInfo.surtitle, 'has-padding': !pageInfo.surtitle && pageInfo.shareButtons && pageInfo.shareButtons.isActive}">
diff --git a/src/app/shared/components/page-header/page-header.component.scss b/src/app/shared/components/page-header/page-header.component.scss
index 0ca688cf..429e5b03 100644
--- a/src/app/shared/components/page-header/page-header.component.scss
+++ b/src/app/shared/components/page-header/page-header.component.scss
@@ -24,6 +24,9 @@
font-weight: 500;
cursor: pointer;
border-right: 4px solid $tomato-color;
+ border-left: none;
+ border-bottom: none;
+ border-top: none;
padding: 1.125rem 1rem 1.125rem 0;
margin-right: 1rem;
width: 6rem;
@@ -32,6 +35,7 @@
align-self: flex-start;
flex-shrink: 0;
justify-content: center;
+ background-color: transparent;
// Hide back button for mobile
display: none;
diff --git a/src/app/shared/components/restricted-access-banner/restricted-access-banner.component.html b/src/app/shared/components/restricted-access-banner/restricted-access-banner.component.html
index 06ad5d41..6da20246 100644
--- a/src/app/shared/components/restricted-access-banner/restricted-access-banner.component.html
+++ b/src/app/shared/components/restricted-access-banner/restricted-access-banner.component.html
@@ -1,7 +1,7 @@
<div class="access-restreint">
<div class="access-restreint-message">
<div class="picto-warning">
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" fill="none" viewBox="0 0 16 14">
+ <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="none" viewBox="0 0 16 14">
<path fill="#fff"
d="M15.581 12.031c.146.292.191.584.137.875-.055.31-.2.565-.438.766-.237.219-.52.328-.848.328H1.308c-.329 0-.611-.11-.848-.328a1.26 1.26 0 0 1-.438-.766 1.356 1.356 0 0 1 .137-.875L6.722.656c.164-.291.392-.483.683-.574.31-.11.61-.11.903 0 .31.091.546.283.71.574l6.563 11.375zM7.87 9.68c-.346 0-.647.127-.902.383a1.19 1.19 0 0 0-.356.874c0 .347.119.648.356.903.255.237.556.355.902.355s.638-.118.875-.355c.255-.255.383-.556.383-.902 0-.347-.128-.639-.383-.876a1.147 1.147 0 0 0-.875-.382zM6.667 5.168l.219 3.719c0 .073.027.146.082.218a.4.4 0 0 0 .246.082h1.312a.296.296 0 0 0 .219-.082c.073-.072.11-.145.11-.218l.218-3.719c0-.11-.036-.191-.11-.246a.26.26 0 0 0-.218-.11h-1.75a.34.34 0 0 0-.246.11c-.055.055-.082.137-.082.246z" />
</svg>
@@ -18,4 +18,4 @@
</a>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/shared/components/restricted-access-banner/restricted-access-banner.component.scss b/src/app/shared/components/restricted-access-banner/restricted-access-banner.component.scss
index 21fc0587..6888b9c9 100644
--- a/src/app/shared/components/restricted-access-banner/restricted-access-banner.component.scss
+++ b/src/app/shared/components/restricted-access-banner/restricted-access-banner.component.scss
@@ -13,6 +13,11 @@
.picto-warning {
margin-right: 0.5rem;
+ svg {
+ width: 16px;
+ height: 14px;
+ }
+
path {
fill: $tomato-color;
}
diff --git a/src/app/user/components/auth/login/login.component.scss b/src/app/user/components/auth/login/login.component.scss
index 527b41f1..a0b88881 100644
--- a/src/app/user/components/auth/login/login.component.scss
+++ b/src/app/user/components/auth/login/login.component.scss
@@ -1,6 +1,11 @@
@import '../../../../../scss/variables.scss';
@import '../../../../../../node_modules/bulma/sass/utilities/_all.sass';
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: $grey-dark-color;
+ opacity: 1; /* Firefox */
+}
+
.login-container {
height: 100%;
}
diff --git a/src/i18n/messages.en.xlf b/src/i18n/messages.en.xlf
index 33957a5f..e7d7c6ea 100644
--- a/src/i18n/messages.en.xlf
+++ b/src/i18n/messages.en.xlf
@@ -3,6 +3,18 @@
xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
+ <trans-unit id="skipLinks.content" datatype="html">
+ <source>Go to content</source>
+ <target>Go to content</target>
+ </trans-unit>
+ <trans-unit id="skipLinks.search" datatype="html">
+ <source>Go to search</source>
+ <target>Go to search</target>
+ </trans-unit>
+ <trans-unit id="skipLinks.footer" datatype="html">
+ <source>Go to footer</source>
+ <target>Go to footer</target>
+ </trans-unit>
<trans-unit id="menu.home" datatype="html">
<source>Home</source>
<target>Home</target>
diff --git a/src/i18n/messages.fr.xlf b/src/i18n/messages.fr.xlf
index 3bbf0b13..5043e912 100644
--- a/src/i18n/messages.fr.xlf
+++ b/src/i18n/messages.fr.xlf
@@ -3,6 +3,18 @@
xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
+ <trans-unit id="skipLinks.content" datatype="html">
+ <source>Go to content</source>
+ <target>Aller au contenu</target>
+ </trans-unit>
+ <trans-unit id="skipLinks.search" datatype="html">
+ <source>Go to search</source>
+ <target>Aller à la recherche</target>
+ </trans-unit>
+ <trans-unit id="skipLinks.footer" datatype="html">
+ <source>Go to footer</source>
+ <target>Aller au footer</target>
+ </trans-unit>
<trans-unit id="menu.home" datatype="html">
<source>Home</source>
<target>Accueil</target>
--
GitLab