Merge pull request #485 from klee-contrib/gideruette/issue483

[DsfrHeader] Fix quick link : #483 #484 #486

Author: laruiss

src/components/DsfrHeader/DsfrHeader.stories.js

@@ -49,6 +49,7 @@ export default {
 - \`to\`: Chemin ou objet à passer à \`to\` de \`RouterLink\` (\`'/notification'\` ou \`{ name: 'Notifications' }\` par ex.)
 - \`href\`: URL à passer à \`href\` de la balise \`<a>\` (\`'https://systeme-de-design.gouv.fr\` par ex.) **pour un lien externe uniquement**.
 - \`icon\` Nom de l’icône [Remix Icon](https://remixicon.com/) (ou toute autre icône de [oh-vue-icons](https://oh-vue-icons.netlify.app/)) à afficher (\`'ri-phone-line'\` par ex.)
+- \`target\` La target du lien (\`'_self'\`, \`'_blank'\` par ex.)
 - \`iconRight\` Permet de mettre l’icône à droite (si la valeur est \`true\` ou <em>truthy</em> et que \`icon\` est renseigné )
 - \`iconAttrs\` Ensemble des props/attributs à donner à \`<OhVueIcon>\` (Cf. [Doc](https://oh-vue-icons.netlify.app/docs#props)). Ex. : \`{ scale: 0.9, animation: }\`
 - \`button\`: \`true\` pour avoir une balise \`button\`, \`false\` pour laisser en balise \`a\`
@@ -144,7 +145,7 @@ EnTeteSimple.args = {
   homeTo: '#',
   quickLinks: [
     { label: 'Créer un espace', to: '/space/create', icon: 'ri-add-circle-line', iconAttrs: { scale: 0.9 } },
-    { label: 'Se connecter', to: '/login', class: 'fr-fi-lock-line' },
+    { label: 'Se connecter', to: '/login', class: 'fr-fi-lock-line', target: '_blank' },
     { label: 'S’enregistrer', to: '/signin', icon: 'ri-account-circle-line', iconRight: true, iconAttrs: { animation: 'spin', speed: 'slow' } },
   ],
 }

src/components/DsfrHeader/DsfrHeader.vue

@@ -64,6 +64,10 @@ export default defineComponent({
       type: String,
       default: 'Recherche',
     },
+    quickLinksAriaLabel: {
+      type: String,
+      default: 'Menu secondaire',
+    },
     showSearch: Boolean,
   },
 
@@ -83,22 +87,38 @@ export default defineComponent({
     },
   },
 
+  mounted () {
+    document.addEventListener('keydown', this.onKeyDown)
+  },
+  unmounted () {
+    document.removeEventListener('keydown', this.onKeyDown)
+  },
   methods: {
     hideModal () {
       this.modalOpened = false
       this.menuOpened = false
       this.searchModalOpened = false
+      document.getElementById('button-menu')?.focus()
     },
     showMenu () {
       this.modalOpened = true
       this.menuOpened = true
       this.searchModalOpened = false
+      document.getElementById('close-button')?.focus()
     },
     showSearchModal () {
       this.modalOpened = true
       this.menuOpened = false
       this.searchModalOpened = true
     },
+    onKeyDown (e) {
+      if (e.key === 'Escape') {
+        this.hideModal()
+      }
+    },
+    onQuickLinkClick () {
+      this.hideModal()
+    },
   },
 })
 </script>
@@ -190,6 +210,7 @@ export default defineComponent({
               <DsfrHeaderMenuLinks
                 v-if="!menuOpened"
                 :links="quickLinks"
+                :nav-aria-label="quickLinksAriaLabel"
               />
             </div>
             <div
@@ -212,10 +233,13 @@ export default defineComponent({
           id="header-navigation"
           class="fr-header__menu  fr-modal"
           :class="{ 'fr-modal--opened': modalOpened }"
-          aria-labelledby="button-menu"
+          aria-label="Menu modal"
+          role="dialog"
+          aria-modal="true"
         >
           <div class="fr-container">
             <button
+              id="close-button"
               class="fr-btn fr-btn--close"
               aria-controls="header-navigation"
               data-testid="close-modal-btn"
@@ -227,6 +251,8 @@ export default defineComponent({
               <DsfrHeaderMenuLinks
                 v-if="menuOpened"
                 :links="quickLinks"
+                :nav-aria-label="quickLinksAriaLabel"
+                @link-click="onQuickLinkClick"
               />
             </div>
             <div

src/components/DsfrHeader/DsfrHeaderMenuLink.vue

@@ -41,6 +41,10 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    target: {
+      type: String,
+      default: '_self',
+    },
   },
 
   computed: {
@@ -80,6 +84,7 @@ export default defineComponent({
     :is="is"
     class="fr-btn"
     v-bind="linkData"
+    :target="target"
     @click.stop="onClick"
   >
     <VIcon

src/components/DsfrHeader/DsfrHeaderMenuLinks.vue

@@ -14,21 +14,32 @@ export default defineComponent({
       type: Array,
       default: () => undefined,
     },
+    navAriaLabel: {
+      type: String,
+      default: 'Menu secondaire',
+    },
   },
+  emits: ['linkClick'],
 })
 </script>
 
 <template>
-  <ul
-    class="fr-btns-group"
+  <nav
+    role="navigation"
+    :aria-label="navAriaLabel"
   >
-    <li
-      v-for="(quickLink, index) in links"
-      :key="index"
+    <ul
+      class="fr-btns-group"
     >
-      <DsfrHeaderMenuLink
-        v-bind="quickLink"
-      />
-    </li>
-  </ul>
+      <li
+        v-for="(quickLink, index) in links"
+        :key="index"
+      >
+        <DsfrHeaderMenuLink
+          v-bind="quickLink"
+          :on-click="()=>$emit('linkClick')"
+        />
+      </li>
+    </ul>
+  </nav>
 </template>