From 69a0aba210283bfc4374d7c5e5d7cff62d5234b4 Mon Sep 17 00:00:00 2001
From: Antoine SUBRA <92506465+subraAntoine@users.noreply.github.com>
Date: Mon, 12 Aug 2024 14:06:12 +0200
Subject: [PATCH] fix(redmine 1306613): fixed form elements accessibility
 errors (#205)

* fix(redmine 1306613): fixed form elements accessibility errors

* fix(redmine 1306613): fix pr review from tony

* fix(redmine 1306613): fixed lint error

* fix(redmine 1306613): fixed lint error

---------

Co-authored-by: Meriemu <me.achemlal@gmail.com>
Co-authored-by: Quentin Le Caignec <12102823+QuentinLeCaignec@users.noreply.github.com>
---
 .changeset/spotty-dryers-admire.md            |  5 +++
 .../DocumentList/DocumentList.mock.tsx        |  2 +-
 .../__snapshots__/DocumentList.test.tsx.snap  |  4 +++
 .../SelectableList/SelectableList.tsx         |  7 ++++
 .../SelectableList.test.tsx.snap              |  3 ++
 .../SidebarFilters/SidebarFilters.mock.tsx    | 32 +++++++++++++++----
 .../SidebarFilters.test.tsx.snap              | 18 ++++++++---
 .../SwitchableView/SwitchableView.mock.tsx    |  6 ++--
 .../SwitchableView.test.tsx.snap              |  3 ++
 9 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/spotty-dryers-admire.md

diff --git a/.changeset/spotty-dryers-admire.md b/.changeset/spotty-dryers-admire.md
new file mode 100644
index 00000000..9b0b7976
--- /dev/null
+++ b/.changeset/spotty-dryers-admire.md
@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+Fixed form elements accessibility error
diff --git a/packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx b/packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx
index c0316974..6780d68d 100644
--- a/packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx
+++ b/packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx
@@ -14,7 +14,7 @@ export const documentsMock: IDocument[] = [
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         </p>
         <Button color="gray.8">
-          <DownloadSimple width={12} />
+          <DownloadSimple aria-label="download icon" width={12} />
           <Space w={8} />
           PDF, FR - 1Mo
         </Button>
diff --git a/packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap b/packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap
index e130de00..40ee63d2 100644
--- a/packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap
+++ b/packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap
@@ -217,6 +217,7 @@ exports[`DocumentList matches snapshot 1`] = `
               data-label-position="right"
             >
               <input
+                aria-label="checkbox input"
                 class="haring-focus m_26063560 mantine-Checkbox-input"
                 id="mantine-f4bipx4bi"
                 type="checkbox"
@@ -313,6 +314,7 @@ exports[`DocumentList matches snapshot 1`] = `
                     class="m_811560b9 mantine-Button-label"
                   >
                     <svg
+                      aria-label="download icon"
                       fill="currentColor"
                       height="1em"
                       viewBox="0 0 256 256"
@@ -386,6 +388,7 @@ exports[`DocumentList matches snapshot 1`] = `
               data-label-position="right"
             >
               <input
+                aria-label="checkbox input"
                 checked=""
                 class="haring-focus m_26063560 mantine-Checkbox-input"
                 id="mantine-f4bipx4bi"
@@ -555,6 +558,7 @@ exports[`DocumentList matches snapshot 1`] = `
               data-label-position="right"
             >
               <input
+                aria-label="checkbox input"
                 class="haring-focus m_26063560 mantine-Checkbox-input"
                 id="mantine-f4bipx4bi"
                 type="checkbox"
diff --git a/packages/haring-react/src/Components/SelectableList/SelectableList.tsx b/packages/haring-react/src/Components/SelectableList/SelectableList.tsx
index f7c4a5f9..73a6af3a 100644
--- a/packages/haring-react/src/Components/SelectableList/SelectableList.tsx
+++ b/packages/haring-react/src/Components/SelectableList/SelectableList.tsx
@@ -5,7 +5,12 @@ import { Checkbox, Group, Stack } from '@mantine/core';
 
 import classes from './SelectableList.module.css';
 
+export interface ISelectableListAriaLabels {
+  checkboxInput?: string;
+}
+
 export interface ISelectableListProps extends StackProps {
+  ariaLabels?: ISelectableListAriaLabels;
   children: ReactElement[];
   onSelectChange?: (index: number, isSelected: boolean) => void;
   selectedIndexes?: number[];
@@ -13,6 +18,7 @@ export interface ISelectableListProps extends StackProps {
 
 export function SelectableList(props: ISelectableListProps): ReactElement {
   const {
+    ariaLabels,
     children,
     onSelectChange,
     selectedIndexes = [],
@@ -30,6 +36,7 @@ export function SelectableList(props: ISelectableListProps): ReactElement {
           wrap="nowrap"
         >
           <Checkbox
+            aria-label={ariaLabels?.checkboxInput || 'checkbox input'}
             checked={selectedIndexes.includes(index)}
             className="selectableListCheckboxRef"
             onChange={(e) => onSelectChange?.(index, e.currentTarget.checked)}
diff --git a/packages/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap b/packages/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap
index ecf43d7c..273ed669 100644
--- a/packages/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap
+++ b/packages/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`SelectableList matches snapshot 1`] = `
             data-label-position="right"
           >
             <input
+              aria-label="checkbox input"
               class="haring-focus m_26063560 mantine-Checkbox-input"
               id="mantine-f4bipx4bi"
               type="checkbox"
@@ -202,6 +203,7 @@ exports[`SelectableList matches snapshot 1`] = `
             data-label-position="right"
           >
             <input
+              aria-label="checkbox input"
               checked=""
               class="haring-focus m_26063560 mantine-Checkbox-input"
               id="mantine-f4bipx4bi"
@@ -371,6 +373,7 @@ exports[`SelectableList matches snapshot 1`] = `
             data-label-position="right"
           >
             <input
+              aria-label="checkbox input"
               class="haring-focus m_26063560 mantine-Checkbox-input"
               id="mantine-f4bipx4bi"
               type="checkbox"
diff --git a/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.mock.tsx b/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.mock.tsx
index 6ebd8d50..c62ea9b8 100644
--- a/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.mock.tsx
+++ b/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.mock.tsx
@@ -37,15 +37,25 @@ export function getMenu(checked: boolean): IMenuItem<number>[] {
       content: (
         <>
           <Group>
-            <Checkbox defaultChecked={checked} value="Dupont" /> Dupont
+            <Checkbox
+              aria-label="Dupont checkbox"
+              defaultChecked={checked}
+              value="Dupont"
+            />{' '}
+            Dupont
           </Group>
           <br />
           <Group>
-            <Checkbox defaultChecked={checked} value="Martin" /> Martin
+            <Checkbox
+              aria-label="Martin checkbox"
+              defaultChecked={checked}
+              value="Martin"
+            />{' '}
+            Martin
           </Group>
           <br />
           <Group>
-            <Checkbox value="André" /> Andrée
+            <Checkbox aria-label="André checkbox" value="André" /> Andrée
           </Group>
         </>
       ),
@@ -58,11 +68,16 @@ export function getMenu(checked: boolean): IMenuItem<number>[] {
           content: (
             <>
               <Group>
-                <Checkbox defaultChecked={checked} value="CDI" /> CDI
+                <Checkbox
+                  aria-label="CDI checkbox"
+                  defaultChecked={checked}
+                  value="CDI"
+                />{' '}
+                CDI
               </Group>
               <br />
               <Group>
-                <Checkbox value="CDD" /> CDD
+                <Checkbox aria-label="CDD checkbox" value="CDD" /> CDD
               </Group>
             </>
           ),
@@ -72,7 +87,12 @@ export function getMenu(checked: boolean): IMenuItem<number>[] {
         {
           content: (
             <Group>
-              <Checkbox defaultChecked={checked} value="FREELANCE" /> Freelance
+              <Checkbox
+                aria-label="Freelance checkbox"
+                defaultChecked={checked}
+                value="FREELANCE"
+              />{' '}
+              Freelance
             </Group>
           ),
           id: 11,
diff --git a/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap b/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap
index 4e382bf2..68c31611 100644
--- a/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap
+++ b/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap
@@ -295,6 +295,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
                     data-label-position="right"
                   >
                     <input
+                      aria-label="Dupont checkbox"
                       checked=""
                       class="haring-focus m_26063560 mantine-Checkbox-input"
                       id="mantine-f4bipx4bi"
@@ -321,7 +322,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
                   />
                 </div>
               </div>
-               Dupont
+               
+              Dupont
             </div>
             <br />
             <div
@@ -341,6 +343,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
                     data-label-position="right"
                   >
                     <input
+                      aria-label="Martin checkbox"
                       checked=""
                       class="haring-focus m_26063560 mantine-Checkbox-input"
                       id="mantine-f4bipx4bi"
@@ -367,7 +370,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
                   />
                 </div>
               </div>
-               Martin
+               
+              Martin
             </div>
             <br />
             <div
@@ -387,6 +391,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
                     data-label-position="right"
                   >
                     <input
+                      aria-label="André checkbox"
                       class="haring-focus m_26063560 mantine-Checkbox-input"
                       id="mantine-f4bipx4bi"
                       type="checkbox"
@@ -554,6 +559,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
                       data-label-position="right"
                     >
                       <input
+                        aria-label="CDI checkbox"
                         checked=""
                         class="haring-focus m_26063560 mantine-Checkbox-input"
                         id="mantine-f4bipx4bi"
@@ -580,7 +586,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
                     />
                   </div>
                 </div>
-                 CDI
+                 
+                CDI
               </div>
               <br />
               <div
@@ -600,6 +607,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
                       data-label-position="right"
                     >
                       <input
+                        aria-label="CDD checkbox"
                         class="haring-focus m_26063560 mantine-Checkbox-input"
                         id="mantine-f4bipx4bi"
                         type="checkbox"
@@ -707,6 +715,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
                       data-label-position="right"
                     >
                       <input
+                        aria-label="Freelance checkbox"
                         checked=""
                         class="haring-focus m_26063560 mantine-Checkbox-input"
                         id="mantine-f4bipx4bi"
@@ -733,7 +742,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
                     />
                   </div>
                 </div>
-                 Freelance
+                 
+                Freelance
               </div>
             </div>
           </div>
diff --git a/packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx b/packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx
index 22b5f3ad..b7b129fb 100644
--- a/packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx
+++ b/packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx
@@ -37,17 +37,17 @@ export const viewMockC = (
 export const viewsMock = [
   {
     dataView: viewMockA,
-    label: <ListBullets />,
+    label: <ListBullets aria-label="square icon" />,
     value: 'a',
   },
   {
     dataView: viewMockB,
-    label: <SquaresFour />,
+    label: <SquaresFour aria-label="square icon" />,
     value: 'b',
   },
   {
     dataView: viewMockC,
-    label: <Star />,
+    label: <Star aria-label="star icon" />,
     value: 'c',
   },
 ];
diff --git a/packages/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap b/packages/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap
index 7467c915..ce118396 100644
--- a/packages/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap
+++ b/packages/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap
@@ -51,6 +51,7 @@ exports[`SwitchableView matches snapshot 1`] = `
                 class="m_78882f40 mantine-SegmentedControl-innerLabel"
               >
                 <svg
+                  aria-label="square icon"
                   fill="currentColor"
                   height="1em"
                   viewBox="0 0 256 256"
@@ -83,6 +84,7 @@ exports[`SwitchableView matches snapshot 1`] = `
                 class="m_78882f40 mantine-SegmentedControl-innerLabel"
               >
                 <svg
+                  aria-label="square icon"
                   fill="currentColor"
                   height="1em"
                   viewBox="0 0 256 256"
@@ -115,6 +117,7 @@ exports[`SwitchableView matches snapshot 1`] = `
                 class="m_78882f40 mantine-SegmentedControl-innerLabel"
               >
                 <svg
+                  aria-label="star icon"
                   fill="currentColor"
                   height="1em"
                   viewBox="0 0 256 256"