Merge pull request #99 from samuel-gomez/refactor/update-custom-table-accessibility

Refactor/update custom table accessibility

Author: samuel-gomez

.vscode/settings.json

@@ -9,5 +9,8 @@
   },
   "[feature]": {
     "editor.defaultFormatter": "alexkrechik.cucumberautocomplete"
+  },
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "always"
   }
 }

src/pages/Demos/Members/Members.tsx

@@ -1,11 +1,11 @@
 import { Paging } from '@axa-fr/react-toolkit-all';
-import Resilience from 'shared/components/Resilience';
 import Layout, { type TLayoutPage } from 'Layout';
-import { Tanomaly } from 'shared/types';
 import Loader, { type TLoader } from 'shared/components/Loader';
+import Resilience from 'shared/components/Resilience';
 import Table from 'shared/components/Table';
-import { TITLE_BAR, TITLE, TABLE_HEADERS_MEMBERS } from './constants';
+import type { Tanomaly } from 'shared/types';
 import type { TReturnUseMembers } from './Members.hook';
+import { TABLE_HEADERS_MEMBERS, TABLE_ITEMS_TYPE, TITLE, TITLE_BAR } from './constants';
 
 export type TMembers = TLayoutPage & {
   loaderMode: TLoader['mode'];
@@ -16,6 +16,7 @@ export type TMembers = TLayoutPage & {
   sorting: TReturnUseMembers['sorting'];
   members: TReturnUseMembers['members'];
   anomaly: Tanomaly | null;
+  title?: string;
   headers?: typeof TABLE_HEADERS_MEMBERS;
 };
 
@@ -36,7 +37,7 @@ const Members = ({
     <h1 className="af-title--content">{title}</h1>
     <Loader mode={loaderMode}>
       <Resilience anomaly={anomaly} refetch={refetch as React.MouseEventHandler<HTMLButtonElement>}>
-        <Table items={members} headers={headers} onSort={onChangeSorting} sorting={sorting} aria-label={`Tableau ${title}`} />
+        <Table title={title} items={members} itemsType={TABLE_ITEMS_TYPE} headers={headers} onSort={onChangeSorting} sorting={sorting} />
         <Paging {...pagination} onChange={onChangePaging} id="paging" />
       </Resilience>
     </Loader>

src/pages/Demos/Members/__tests__/Members.spec.tsx

@@ -3,16 +3,16 @@ import { render, screen } from 'shared/testsUtils/customRender';
 import { serverUseGet } from 'shared/testsUtils/msw';
 import {
   JeSuisUnUtilisateurConnuEtConnecteAvecleProfil,
+  LaPageContientUnTableau,
   LeTableauContientLesLignesCorrespondantAuxDonneesRecues,
   LeTableauPresenteDesEntetesDeTriDeColonnesDansLOrdreSuivant,
-  LaPageContientUnTableau,
 } from 'shared/testsUtils/sharedScenarios';
 import Members from '..';
-import { totals } from './Members.mock';
 import type { TresponseBody } from '../Members.hook';
+import { totals } from './Members.mock';
 
 const feature = loadFeature('features/Demos/Members/Members.feature');
-const tableAriaLabel = 'Tableau Liste des membres';
+const tableItemsType = 'membres';
 
 defineFeature(feature, test => {
   let role: string;
@@ -31,18 +31,18 @@ defineFeature(feature, test => {
       expect(await screen.findByText('Samuel')).toBeInTheDocument();
     });
 
-    LaPageContientUnTableau(then, 'la page contient un tableau répertoriant la liste des membres', tableAriaLabel);
+    LaPageContientUnTableau(then, 'la page contient un tableau répertoriant la liste des membres', tableItemsType);
 
     LeTableauPresenteDesEntetesDeTriDeColonnesDansLOrdreSuivant(
       and,
       /^le tableau présente des entêtes de tri de colonnes dans l’ordre suivant : "(.*)", "(.*)", "(.*)", "(.*)"$/,
-      tableAriaLabel,
+      tableItemsType,
     );
 
     LeTableauContientLesLignesCorrespondantAuxDonneesRecues(
       and,
       /^le tableau contient (\d+) lignes avec (\d+) colonnes dans l'ordre suivant :$/,
-      tableAriaLabel,
+      tableItemsType,
     );
   });
 });

src/pages/Demos/Members/constants.ts

@@ -3,6 +3,7 @@ import { ASCENDING, Torder } from 'shared/components/Table';
 export const TITLE_BAR = 'Gestion des membres';
 export const TITLE = 'Liste des membres';
 export const ROUTE_URL_MEMBERS = 'members';
+export const TABLE_ITEMS_TYPE = 'membres';
 
 export const TABLE_HEADERS_MEMBERS = [
   { label: 'Prénom', field: 'firstname', id: 'firstname', key: 'firstname' },

src/pages/Demos/SearchMembers/SearchMembers.tsx

@@ -5,7 +5,7 @@ import Resilience from 'shared/components/Resilience';
 import Table from 'shared/components/Table';
 import DownloadLink from 'shared/components/DownloadLink';
 import { formatDate } from 'shared/helpers/formatDate';
-import { TITLE_BAR, TITLE, SUBTITLE, TABLE_HEADERS_SEARCHMEMBERS } from './constants';
+import { TITLE_BAR, TITLE, SUBTITLE, TABLE_HEADERS_SEARCHMEMBERS, TABLE_ITEMS_TYPE } from './constants';
 import SearchForm from './SearchForm';
 import type { TReturnUseFormSearchMembers, TReturnUseSearchMembers } from './SearchMembers.hook';
 
@@ -36,6 +36,7 @@ type TSearchMembers = TLayoutPage &
   Omit<TReturnUseSearchMembers, 'isLoading'> & {
     loaderMode: TLoader['mode'];
     submitFormSearchMembers: TReturnUseFormSearchMembers['submitFormSearchMembers'];
+    title?: string;
   };
 
 const SearchMembers = ({ titleBar = TITLE_BAR, title = TITLE, loaderMode, searchMembers, anomaly, submitFormSearchMembers }: TSearchMembers) => (
@@ -54,7 +55,7 @@ const SearchMembers = ({ titleBar = TITLE_BAR, title = TITLE, loaderMode, search
     <Loader message="Recherche des membres en cours..." mode={loaderMode}>
       <Resilience anomaly={anomaly}>
         <h2 className="af-title">{SUBTITLE}</h2>
-        <Table items={searchMembers} headers={TABLE_HEADERS_SEARCHMEMBERS} />
+        <Table itemsType={TABLE_ITEMS_TYPE} title={title} items={searchMembers} headers={TABLE_HEADERS_SEARCHMEMBERS} />
       </Resilience>
     </Loader>
   </Layout>

src/pages/Demos/SearchMembers/__tests__/SearchMembers.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { MODES } from 'shared/components/Loader';
 import { emptyFunction, render } from 'shared/testsUtils';
-import SearchMembers, { getDownloadPath, setFileName, DownloadLinkEnhanced } from '../SearchMembers';
+import SearchMembers, { DownloadLinkEnhanced, getDownloadPath, setFileName } from '../SearchMembers';
 
 describe('getDownloadPath', () => {
   it('Should return "members/0064962455/download-detail" When getDownloadPath with memberId "0064962455"', () => {
@@ -40,18 +40,11 @@ describe('<DownloadLinkEnhanced />', () => {
     firstname: 'samuel',
     lastname: 'gomez',
   };
-  it('Should call getDownloadPathFn and setFileNameFn with proper params', () => {
-    const { asFragment } = render(
-      <DownloadLinkEnhanced {...defaultDownloadProps} getDownloadPathFn={getDownloadPathFnMock} setFileNameFn={setFileNameFnMock} />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-    expect(getDownloadPathFnMock).toBeCalledWith('09878817');
-    expect(setFileNameFnMock).toBeCalledWith({ memberId: '09878817', name: 'samuel-gomez' });
-  });
 
-  it('Should call getDownloadPathFn and setFileNameFn with proper params 2 ', () => {
-    const { asFragment } = render(<DownloadLinkEnhanced {...defaultDownloadProps} />);
-    expect(asFragment()).toMatchSnapshot();
+  it('Should call getDownloadPathFn and setFileNameFn with proper params', () => {
+    render(<DownloadLinkEnhanced {...defaultDownloadProps} getDownloadPathFn={getDownloadPathFnMock} setFileNameFn={setFileNameFnMock} />);
+    expect(getDownloadPathFnMock).toHaveBeenCalledWith('09878817');
+    expect(setFileNameFnMock).toHaveBeenCalledWith({ memberId: '09878817', name: 'samuel-gomez' });
   });
 });
 

src/pages/Demos/SearchMembers/__tests__/__snapshots__/SearchMembers.test.tsx.snap

@@ -2,6 +2,7 @@ export const TITLE_BAR = 'Recherche de membres';
 export const TITLE = 'Recherche par Nom';
 export const SUBTITLE = 'Tableau des membres';
 export const ROUTE_URL_SEARCHMEMBERS = 'search-members';
+export const TABLE_ITEMS_TYPE = 'membres';
 
 export const TABLE_HEADERS_SEARCHMEMBERS = [
   { label: 'Prénom du membre', key: 'firstname' },

src/pages/Demos/SearchMembers/constants.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import { Table as TableTk } from '@axa-fr/react-toolkit-all';
+import type { ReactNode } from 'react';
 import Line from './Line';
 
 export type Tcol = {
@@ -20,13 +20,12 @@ type TItems = {
 };
 
 export type TBody = {
-  ariaLabel?: string;
   items?: TItems[];
   children?: ReactNode;
 };
 
-const Body = ({ items = [], children, ariaLabel = 'table-body' }: TBody) => (
-  <TableTk.Body aria-label={ariaLabel}>
+const Body = ({ items = [], children }: TBody) => (
+  <TableTk.Body>
     {items.map(({ key, classModifier, cols }) => (
       <Line key={key} classModifier={classModifier} cols={Object.entries({ ...cols })} />
     ))}

src/shared/components/Table/Body/Body.tsx

@@ -1,14 +1,13 @@
-import { ComponentPropsWithoutRef } from 'react';
 import { Table as TableTk } from '@axa-fr/react-toolkit-all';
+import { ComponentPropsWithoutRef } from 'react';
 import Td, { TTdContainer } from './Td';
 
 export type TLine = ComponentPropsWithoutRef<typeof TableTk.Tr> & {
   columns: (TTdContainer & { keyCol: string })[];
-  ariaLabel?: string;
 };
 
-const Line = ({ className, columns = [], classModifier = '', children, ariaLabel = 'table-body-line' }: TLine) => (
-  <TableTk.Tr classModifier={classModifier} className={className} aria-label={ariaLabel}>
+const Line = ({ className, columns = [], classModifier = '', children }: TLine) => (
+  <TableTk.Tr classModifier={classModifier} className={className}>
     <>
       {columns.map(({ keyCol, ...restTd }) => (
         <Td key={keyCol} {...restTd} />