Merge branch '0.16.x' into Fix/ButtonAccessibilityError

Smile-SA · Sep 5, 2024 · 54cc6ba · 54cc6ba
2 parents f00a3f9 + 69a0aba
commit 54cc6ba
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 14 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/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
@@ -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
@@ -5,14 +5,20 @@ 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[];
 }
 
 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/...ges/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap b/...ges/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
@@ -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/...ges/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap b/...ges/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap
@@ -297,6 +297,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"
@@ -323,7 +324,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
                   />
                 </div>
               </div>
-               Dupont
+               
+              Dupont
             </div>
             <br />
             <div
@@ -343,6 +345,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"
@@ -369,7 +372,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
                   />
                 </div>
               </div>
-               Martin
+               
+              Martin
             </div>
             <br />
             <div
@@ -389,6 +393,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"
@@ -558,6 +563,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"
@@ -584,7 +590,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
                     />
                   </div>
                 </div>
-                 CDI
+                 
+                CDI
               </div>
               <br />
               <div
@@ -604,6 +611,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"
@@ -712,6 +720,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"
@@ -738,7 +747,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
@@ -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/...ges/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap b/...ges/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"