fix(redmine 1306613): fixed form elements accessibility errors

Smile-SA · Aug 1, 2024 · 4505b32 · 4505b32
1 parent 4bed473
commit 4505b32
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 10 deletions.
diff --git a/.changeset/spotty-dryers-admire.md 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/ActionList/ActionList.mock.tsx b/packages/haring-react/src/Components/ActionList/ActionList.mock.tsx
@@ -7,6 +7,7 @@ import { action } from '@storybook/addon-actions';
 
 export const actionRowOverflowActionsMock: IThumbnailAction[] = [
   {
+    ariaLabel: 'move in tree',
     icon: <FolderMove size={16} />,
     id: 'move',
     isItemAction: false,

diff --git 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/SelectableList/SelectableList.tsx b/packages/haring-react/src/Components/SelectableList/SelectableList.tsx
@@ -30,6 +30,7 @@ export function SelectableList(props: ISelectableListProps): ReactElement {
           wrap="nowrap"
         >
           <Checkbox
+            aria-label="checkbox input"
             checked={selectedIndexes.includes(index)}
             className="selectableListCheckboxRef"
             onChange={(e) => onSelectChange?.(index, e.currentTarget.checked)}

diff --git 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/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',
   },
 ];