Merge pull request #630 from dnum-mi/fix/feedback-rgaa-audit

fix/feedback rgaa audit

Author: laruiss

src/components/DsfrModal/DsfrModal.vue

@@ -5,15 +5,18 @@ import { FocusTrap } from 'focus-trap-vue'
 
 import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
 import { onMounted, onBeforeUnmount, computed, ref, nextTick, watch, Ref } from 'vue'
+import { getRandomId } from '@/utils/random-utils'
 
 const props = withDefaults(defineProps<{
+  modalId?: string
   opened?: boolean
   actions?: Record<string, any>[]
   isAlert?: boolean
   origin?: {focus:() => void}
   title: string
   icon?: string
 }>(), {
+  modalId: () => getRandomId('modal', 'dialog'),
   actions: () => [],
   origin: () => ({ focus () {} }), // eslint-disable-line @typescript-eslint/no-empty-function
   icon: undefined,
@@ -35,14 +38,18 @@ const closeBtn: Ref<HTMLButtonElement | null> = ref(null)
 watch(() => props.opened, (newValue) => {
   if (newValue) {
     document.body.classList.add('modal-open')
+    modal.value?.showModal()
     setTimeout(() => {
       closeBtn.value?.focus()
     }, 100)
   } else {
     document.body.classList.remove('modal-open')
+    modal.value?.close()
   }
 })
 
+const modal = ref()
+
 onMounted(() => {
   startListeningToEscape()
 })
@@ -72,10 +79,12 @@ async function close () {
   >
     <dialog
       id="fr-modal-1"
-      aria-labelledby="fr-modal-title-modal-1"
+      ref="modal"
+      :aria-labelledby="modalId"
       :role="role"
       class="fr-modal"
       :class="{'fr-modal--opened': opened}"
+      :open="opened"
     >
       <div class="fr-container fr-container--fluid fr-container-md">
         <div class="fr-grid-row fr-grid-row--center">
@@ -97,7 +106,7 @@ async function close () {
               </div>
               <div class="fr-modal__content">
                 <h1
-                  id="fr-modal-title-modal-1"
+                  :id="modalId"
                   class="fr-modal__title"
                 >
                   <span

src/components/DsfrTabs/DsfrTabs.stories.ts

@@ -1,5 +1,6 @@
 import { expect } from '@storybook/jest'
 import { within, userEvent } from '@storybook/testing-library'
+import DsfrButton from '../DsfrButton/DsfrButton.vue'
 import DsfrTabs from './DsfrTabs.vue'
 import DsfrTabContent from './DsfrTabContent.vue'
 
@@ -130,7 +131,7 @@ const customTabTitles = [
 ]
 
 export const OngletsComplexes = (args) => ({
-  components: { DsfrTabs, DsfrTabContent },
+  components: { DsfrTabs, DsfrTabContent, DsfrButton },
   data () {
     return {
       ...args,
@@ -140,6 +141,7 @@ export const OngletsComplexes = (args) => ({
 
   template: `
     <DsfrTabs
+      ref="tabs"
       :tab-list-name="tabListName"
       :tab-titles="tabTitles"
       :initial-selected-index="initialSelectedIndex"
@@ -181,6 +183,24 @@ export const OngletsComplexes = (args) => ({
         <div>Contenu 4 avec d'autres composants</div>
       </DsfrTabContent>
     </DsfrTabs>
+    <div style="display: flex; gap: 1rem; margin-block: 1rem;">
+      <DsfrButton
+        label="Activer le 1er onglet"
+        @click="() => { $refs.tabs.selectFirst() }"
+      />
+      <DsfrButton
+        label="Activer le 2è onglet"
+        @click="() => { $refs.tabs.selectIndex(1) }"
+      />
+      <DsfrButton
+        label="Activer le 3è onglet"
+        @click="() => { $refs.tabs.selectIndex(2) }"
+      />
+      <DsfrButton
+        label="Activer le dernier onglet"
+        @click="() => { $refs.tabs.selectLast() }"
+      />
+    </div>
   `,
 
   methods: {

src/components/DsfrTabs/DsfrTabs.vue

@@ -105,6 +105,12 @@ const selectFirst = async () => {
 const selectLast = async () => {
   await selectIndex(props.tabTitles.length - 1)
 }
+
+defineExpose({
+  selectIndex,
+  selectFirst,
+  selectLast,
+})
 </script>
 
 <template>