fix: ♿ Ajoute des écouteurs d'événements claviers

Author: laruiss

src/components/DsfrTabs/DsfrTabs.e2e.js

@@ -0,0 +1,62 @@
+import { mount } from '@cypress/vue'
+import DsfrTabs from './DsfrTabs.vue'
+import VIcon from '../../icons.js'
+
+import '../../main.css'
+
+describe('DsfrTabs', () => {
+  it('should mount Tabs', () => {
+    mount(DsfrTabs, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        tabListName: 'Liste d’onglets',
+        tabTitles: [
+          { title: 'Titre 1', icon: 'ri-checkbox-circle-line' },
+          { title: 'Titre 2', icon: 'ri-checkbox-circle-line' },
+          { title: 'Titre 3', icon: 'ri-checkbox-circle-line' },
+          { title: 'Titre 4', icon: 'ri-checkbox-circle-line' },
+        ],
+        tabContents: [
+          'Contenu Tab1',
+          'Contenu Tab2',
+          'Contenu Tab3',
+          'Contenu Tab4',
+        ],
+      },
+    })
+
+    cy.tab()
+
+    cy.get('li:first-child button')
+      .should('have.focus')
+      .type('{rightArrow}')
+      .should('not.have.focus')
+
+    cy.get('li:nth-child(2)  button')
+      .should('have.focus')
+      .type('{end}')
+      .should('not.have.focus')
+
+    cy.get('li:last-child  button')
+      .should('have.focus')
+      .type('{home}')
+      .should('not.have.focus')
+
+    cy.get('li:first-child  button')
+      .should('have.focus')
+      .type('{leftArrow}')
+      .should('not.have.focus')
+
+    cy.get('li:last-child  button')
+      .should('have.focus')
+      .type('{rightArrow}')
+      .should('not.have.focus')
+
+    cy.get('li:first-child  button')
+      .should('have.focus')
+  })
+})

src/components/DsfrTabs/DsfrTabs.spec.js

@@ -23,7 +23,7 @@ describe('DsfrTabs', () => {
     const tabContents = ['Contenu1', 'Contenu2', 'Contenu3', 'Contenu4']
 
     // When
-    const { getByText, getByTestId, getAllByRole } = render(DsfrTabs, {
+    const { getByText, getByTestId, getAllByRole, getByRole } = render(DsfrTabs, {
       global: {
         components: {
           VIcon,
@@ -36,17 +36,92 @@ describe('DsfrTabs', () => {
       },
     })
 
+    const tabListEl = getByRole('tablist')
+
     const firstTabEl = getByTestId('test-tab1')
     const secondTabEl = getByText(title2)
     const thirdTabEl = getByText(title3)
     const tabTitleEls = getAllByRole('presentation')
+    const tabItemEls = getAllByRole('tab')
+
+    let i = 0
+    for (const tabItemEl of tabItemEls) {
+      if (i === 0) {
+        expect(tabItemEl).toHaveAttribute('aria-selected', 'true')
+      } else {
+        expect(tabItemEl).toHaveAttribute('aria-selected', 'false')
+      }
+      expect(tabItemEl).toHaveClass('fr-tabs__tab')
+      i++
+    }
+
     await fireEvent.click(secondTabEl)
     await fireEvent.click(thirdTabEl)
     await fireEvent.click(secondTabEl)
 
+    i = 0
+    for (const tabItemEl of tabItemEls) {
+      if (i === 1) {
+        expect(tabItemEl).toHaveAttribute('aria-selected', 'true')
+      } else {
+        expect(tabItemEl).toHaveAttribute('aria-selected', 'false')
+      }
+      i++
+    }
+
     // Then
     expect(tabTitleEls[0]).toContainElement(firstTabEl)
     expect(tabTitleEls[0].textContent).toContain(title1)
     expect(tabTitleEls[0].textContent).toContain(title1)
+    expect(tabListEl).toHaveClass('fr-tabs__list')
+    expect(tabItemEls).toHaveLength(4)
+  })
+
+  it('should render tabs with proper aria-* attributes', async () => {
+    // Given
+    const tabListName = 'Liste d’onglet'
+    const title1 = 'Titre 1'
+    const title2 = 'Titre 2'
+    const title3 = 'Titre 3'
+
+    const tabTitles = [
+      { title: title1 },
+      { title: title2 },
+      { title: title3 },
+      { title: 'Titre 4' },
+    ]
+
+    const tabContents = ['Contenu1', 'Contenu2', 'Contenu3', 'Contenu4']
+
+    // When
+    const { container, getAllByRole, getByRole } = render(DsfrTabs, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        tabListName,
+        tabTitles,
+        tabContents,
+      },
+    })
+
+    getByRole('tablist')
+
+    const tabItemEls = getAllByRole('tab')
+    const panelEls = container.querySelectorAll('.fr-tabs__panel')
+
+    // Then
+    expect(tabItemEls).toHaveLength(tabTitles.length)
+    expect(panelEls).toHaveLength(tabTitles.length)
+    let i = 0
+    for (const tabPanelEl of panelEls) {
+      expect(tabPanelEl).toHaveAttribute('role', 'tabpanel')
+      expect(tabItemEls[i]).toHaveAttribute('role', 'tab')
+      expect(tabPanelEl).toHaveAttribute('aria-labelledby', tabItemEls[i].id)
+      expect(tabItemEls[i]).toHaveAttribute('aria-controls', tabPanelEl.id)
+      i++
+    }
   })
 })

src/components/DsfrTabs/DsfrTabs.vue

@@ -15,6 +15,8 @@
         @click="selectIndex(index)"
         @next="selectNext()"
         @previous="selectPrevious()"
+        @first="selectFirst()"
+        @last="selectLast()"
       >
         {{ tabTitle.title }}
       </DsfrTabItem>
@@ -101,6 +103,12 @@ export default {
       const newIndex = this.selectedIndex === this.tabTitles.length - 1 ? 0 : this.selectedIndex + 1
       this.selectIndex(newIndex)
     },
+    async selectFirst () {
+      this.selectIndex(0)
+    },
+    async selectLast () {
+      this.selectIndex(this.tabTitles.length - 1)
+    },
   },
 }
 </script>