Fix RGAA v4 criterias 6.1 and 6.2 on links

package-lock.json

 {
   "name": "webapp",
-  "version": "2.6.2",
+  "version": "2.6.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -7,7 +7,7 @@
     "start": "ng serve --proxy-config proxy.conf.json",
     "start-aot-fr": "ng serve --configuration=aot-fr",
     "start-aot-en": "ng serve --configuration=aot-en",
-    "build-i18n:dev": "for lang in en fr; do node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration=development-$lang; done",
+    "build-i18n:dev": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration=development-fr",
     "build-i18n:prod": "for lang in en fr; do node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration=production-$lang; done",
     "win-build-i18n:fr": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng build --configuration=development-fr",
     "win-build-i18n:en": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng build --configuration=development-en",

src/app/core/components/main/footer/footer.component.html

@@ -5,19 +5,19 @@
         <li>
           <a href="http://www.facebook.com/legrandlyon" title="Facebook (new window)" i18n-title="@@footer.facebook"
             target="_blank" rel="noopener">
-            <img class="social-network-link" src="./assets/img/icon_fb.svg" alt="Logo Facebook">
+            <img class="social-network-link" src="./assets/img/icon_fb.svg" i18n-alt="@@footer.facebook" alt="Facebook (new window)">
           </a>
         </li>
         <li class="left-border">
           <a href="https://twitter.com/grandlyon" title="Twitter (new window)" i18n-title="@@footer.twitter"
             target="_blank" rel="noopener">
-            <img class="social-network-link" src="./assets/img/icon_twi.svg" alt="Logo Twitter">
+            <img class="social-network-link" src="./assets/img/icon_twi.svg" i18n-alt="@@footer.twitter" alt="Twitter (new window)">
           </a>
         </li>
         <li class="left-border">
           <a href="https://download.data.grandlyon.com/catalogue/srv/fre/rss.search?sortBy=publicationDate&amp;georss=simplepoint&amp;data"
             title="RSS Feed (new window)" i18n-title="@@footer.rss" target="_blank" rel="noopener">
-            <img class="social-network-link" src="./assets/img/icon_rss.svg" alt="Logo RSS">
+            <img class="social-network-link" src="./assets/img/icon_rss.svg" i18n-alt="@@footer.rss" alt="RSS Feed (new window)">
           </a>
         </li>
       </ul>
@@ -67,17 +67,14 @@
     <div class="column metropole">
       <ul>
         <li>
-          <a href="https://www.grandlyon.com/" target="_blank" rel="noopener">
+          <a href="https://www.grandlyon.com/" class="metropolis-website-link" target="_blank" rel="noopener">
             <img i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)"
               class="plus-logo" src="./assets/img/footer-plus.png" alt="">
+            <span>A Lyon Metropolis website</span>
           </a>
         </li>
         <li>
-          <a class="metropolis-website-link" i18n-title="@@footer.metropole.site.title"
-            title="Access the Lyon Metropolis website (new window)" href="https://www.grandlyon.com/" target="_blank"
-            i18n="@@footer.metropole.site" rel="noopener">
-            A Lyon Metropolis website
-          </a>
+
         </li>
       </ul>
     </div>

src/app/core/components/main/footer/footer.component.scss

@@ -92,6 +92,13 @@ ul {
   height: 0.875rem;
 }
 
+.metropolis-website-link {
+  span {
+    color: #fff;
+    font-size: .75rem;
+  }
+}
+
 .metropolis-website-link:hover {
   text-decoration: underline;
 }

src/app/core/components/main/header/header.component.html

@@ -11,7 +11,7 @@
     <div class="navbar-header-item logo-data">
       <a [routerLink]="['/', AppRoutes.home.uri]" *ngIf="!isHomePage">
         <img class="logo-data-beta is-hidden-mobile" src="./assets/img/header_logo_data.svg"
-          alt="Logo Data Grand Lyon beta">
+          alt="Return to homepage" i18n-alt="@@header.returnHome">
         <img class="is-hidden-tablet" src="./assets/img/header_logo_data_mobile.svg" alt="Logo Data Grand Lyon beta">
       </a>
     </div>
@@ -22,11 +22,9 @@
 
     <div class="navbar-header-item navbar-right-side" [ngClass]="{'navbar-right-home': isHomePage}">
       <div class="connect-me">
-        <a [routerLink]="['/', AppRoutes.signin.uri]" aria-label="Sign In" i18n-aria-label="@@header.signIn"
-        *ngIf="!userIsSignedIn; else userSignedInTemplate">
-          <p class="button connect-button" aria-label="Sign In" i18n-aria-label="@@header.signIn"
-            *ngIf="isHomePage">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
+        <a [routerLink]="['/', AppRoutes.signin.uri]" aria-label="Sign In" i18n-aria-label="@@header.signIn" *ngIf="!userIsSignedIn; else userSignedInTemplate">
+          <div class="button connect-button" *ngIf="isHomePage">
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 23 23">
               <g id="btn_x5F_connect">
                 <path
                   d="M11.5 11.7c-3.1 0-5.6-2.6-5.6-5.6C5.9 3 8.5.5 11.5.5c3.1 0 5.6 2.6 5.6 5.6 0 3-2.6 5.6-5.6 5.6zM17.2 14.6c1.3.6 2.3 1.5 3 2.6 1.2 1.9 1.2 3.8 1.2 3.9 0 .8-.6 1.4-1.2 1.4H2.6c-.6 0-1.2-.6-1.2-1.4 0-.1 0-2 1.2-3.9.7-1.1 1.8-2 3-2.6 1.6-.8 3.5-1.2 5.8-1.2s4.2.4 5.8 1.2z"
@@ -34,18 +32,17 @@
               </g>
             </svg>
             <span i18n="@@header.signIn">Sign In</span>
-          </p>
-          <div class="svg-alone" (click)="toggleUserDropdown()" (clickOutside)="closeUserDropdown()"
-            *ngIf="!isHomePage">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
+          </div>
+          <div class="svg-alone" (click)="toggleUserDropdown()" (clickOutside)="closeUserDropdown()" *ngIf="!isHomePage">
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 23 23">
               <g id="btn_x5F_connect">
                 <path
                   d="M11.5 11.7c-3.1 0-5.6-2.6-5.6-5.6C5.9 3 8.5.5 11.5.5c3.1 0 5.6 2.6 5.6 5.6 0 3-2.6 5.6-5.6 5.6zM17.2 14.6c1.3.6 2.3 1.5 3 2.6 1.2 1.9 1.2 3.8 1.2 3.9 0 .8-.6 1.4-1.2 1.4H2.6c-.6 0-1.2-.6-1.2-1.4 0-.1 0-2 1.2-3.9.7-1.1 1.8-2 3-2.6 1.6-.8 3.5-1.2 5.8-1.2s4.2.4 5.8 1.2z"
                   class="stroke_white" />
               </g>
             </svg>
+            <span class="sr-only" i18n="@@header.signIn">Sign In</span>
           </div>
-
         </a>
       </div>
 
@@ -139,7 +136,8 @@
         <div class="modal" [ngClass]="{'is-active': userDropdownIsOpened}"></div>
       </ng-template>
       <div class="navbar-item navbar-item-feedback">
-        <button tabindex="0" class="button feedback-button" (click)="toogleFeedback($event)">
+        <button tabindex="0" class="button feedback-button" (click)="toogleFeedback($event)"
+                aria-label="Your feedback..." i18n-aria-label="@@feedback.giveYourFeedback">
           <svg xmlns="http://www.w3.org/2000/svg" id="feedback_x5F_icon_header" viewBox="0 0 37.2 34">
             <path
               d="M11 26c-.7 2.3-2.3 4.9-5.5 7.2 5.7 0 10.1-2.9 12.9-5.8h.3c9.7 0 17.5-5.9 17.5-13.2C36.2 6.8 28.4 1 18.7 1S1.2 6.8 1.2 14.1c0 5.2 4 9.7 9.8 11.9z"

src/app/core/components/main/main.component.html

-<a class="skipLinks" [routerLink]="['./']" fragment="main-content">Aller au contenu</a>
+<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>
 <div class="grid-layout" [ngClass]="{'is-home': isHomePage, 'prevent-scroll': feedbackIsOpened || sidebarOpened }">

src/app/editorialisation/components/home/home.component.html

@@ -23,7 +23,7 @@
     </div>
 
     <div class="icon-decoration">
-      <img src="./assets/img/marker-home.svg" alt="Marker pin de decoration">
+      <img src="./assets/img/marker-home.svg" aria-hidden="true">
     </div>
   </section>
 

src/app/editorialisation/components/home/home.component.scss

@@ -123,6 +123,10 @@
 
   .subtitle {
     padding-top: 0;
+    L
+    h1 {
+      margin: 0;
+    }
   }
 
   .subtitle span {

src/app/shared/components/page-header/page-header.component.html

@@ -24,7 +24,7 @@
     [ngClass]="{'displayed': isMediaShareButtonsDisplayed}">
     <a (click)="share('facebook')" (keydown.enter)="share('facebook')" tabindex="0" class="facebook-button">
       <span class="sr-only" i18n="@@header.shares.facebook">Share on Facebook (new window)</span>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="none" viewBox="0 0 25 25">
         <path fill="#3B5998"
           d="M25 2.679V22.32c0 .744-.26 1.377-.781 1.898-.521.52-1.154.781-1.898.781h-4.743v-9.877h3.348l.503-3.795h-3.85v-2.4c0-.595.11-1.041.334-1.339.298-.335.8-.502 1.507-.502h2.009V3.739c-.782-.112-1.749-.168-2.902-.168-1.488 0-2.679.447-3.572 1.34-.855.855-1.283 2.064-1.283 3.627v2.79h-3.404v3.795h3.404V25H2.679c-.744 0-1.377-.26-1.898-.781A2.583 2.583 0 0 1 0 22.32V2.68C0 1.935.26 1.302.781.78A2.583 2.583 0 0 1 2.68 0H22.32c.744 0 1.377.26 1.898.781.52.521.781 1.154.781 1.898z" />
       </svg>
@@ -32,7 +32,7 @@
 
     <a (click)="share('twitter')" (keydown.enter)="share('twitter')" tabindex="0" class="twitter-button">
       <span class="sr-only" i18n="@@header.shares.twitter">Share on Twitter (new window)</span>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="none" viewBox="0 0 25 25">
         <path fill="#00ACEE"
           d="M22.321 0H2.68C1.935 0 1.302.26.78.781A2.583 2.583 0 0 0 0 2.68V22.32c0 .744.26 1.377.781 1.898.521.52 1.154.781 1.898.781H22.32c.744 0 1.377-.26 1.898-.781.52-.521.781-1.154.781-1.898V2.68c0-.744-.26-1.377-.781-1.898A2.583 2.583 0 0 0 22.32 0zm-2.734 8.873v.446c0 1.674-.39 3.293-1.172 4.855-.855 1.674-2.027 2.995-3.515 3.962-1.675 1.079-3.572 1.619-5.692 1.619-2.047 0-3.925-.54-5.637-1.619h.893c1.674 0 3.181-.52 4.52-1.562a3.592 3.592 0 0 1-2.12-.67 3.556 3.556 0 0 1-1.284-1.841 4.996 4.996 0 0 0 1.674-.056 3.713 3.713 0 0 1-2.12-1.284 3.55 3.55 0 0 1-.837-2.344v-.055c.52.297 1.079.465 1.674.502a3.682 3.682 0 0 1-1.228-1.284 3.739 3.739 0 0 1-.446-1.785c0-.67.167-1.284.502-1.842A11.382 11.382 0 0 0 8.147 8.65a10.254 10.254 0 0 0 4.241 1.116c-.186-.819-.13-1.563.168-2.233a3.74 3.74 0 0 1 1.34-1.674 3.727 3.727 0 0 1 2.064-.613c1.041 0 1.916.39 2.623 1.171a6.94 6.94 0 0 0 2.343-.892 3.75 3.75 0 0 1-1.618 2.008 7.462 7.462 0 0 0 2.12-.558 8.12 8.12 0 0 1-1.84 1.898z" />
       </svg>
@@ -40,7 +40,7 @@
 
     <a (click)="share('linkedin')" (keydown.enter)="share('linkedin')" tabindex="0" class="linkedin-button">
       <span class="sr-only" i18n="@@header.shares.linkedin">Share on LinkedIn (new window)</span>
-      <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+      <svg version="1.1" aria-hidden="true" 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 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
         <style type="text/css">
           .st0 {
@@ -66,7 +66,7 @@
     <button class="button copy-link-button has-tooltip-left tooltip" type="button" aria-label="Share the post"
       i18n-aria-label="@@cmsPostDetail.share" (click)="copyToClipboard()" (keydown.enter)="copyToClipboard()"
       [attr.data-tooltip]="messageClipboard">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" aria-hidden="true">
         <path fill="#818080" fill-rule="evenodd"
           d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
           clip-rule="evenodd" />

src/i18n/messages.en.xlf

@@ -51,6 +51,10 @@
         <source>Sign In</source>
         <target>Sign In</target>
       </trans-unit>
+      <trans-unit id="header.returnHome" datatype="html">
+        <source>Return to homepage</source>
+        <target>Return to homepage</target>
+      </trans-unit>
       <trans-unit id="header.signUp" datatype="html">
         <source>Sign Up</source>
         <target>Sign Up</target>

src/i18n/messages.fr.xlf

@@ -55,6 +55,10 @@
         <source>Sign In</source>
         <target>Me connecter</target>
       </trans-unit>
+      <trans-unit id="header.returnHome" datatype="html">
+        <source>Return to homepage</source>
+        <target>Retourner à la page d'accueil</target>
+      </trans-unit>
       <trans-unit id="header.signUp" datatype="html">
         <source>Sign Up</source>
         <target>Inscrivez-vous</target>