Merge branch '0.16.x' into Fix/FormElementsAccessibilityError

Smile-SA · Aug 5, 2024 · 753f178 · 753f178
2 parents 4505b32 + 81ba004
commit 753f178
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 2 deletions.
diff --git a/.changeset/nasty-clocks-raise.md b/.changeset/nasty-clocks-raise.md
@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+(accessibility) make corrections in Image/Avatar component
diff --git a/packages/haring-react/src/Components/DocumentBox/DocumentBox.tsx b/packages/haring-react/src/Components/DocumentBox/DocumentBox.tsx
@@ -18,6 +18,7 @@ import defaultImage from '../../../assets/defaultImage.jpg';
 import classes from './DocumentBox.module.css';
 
 export interface IDocumentBoxProps {
+  altText?: string;
   author?: ReactNode;
   children?: ReactNode;
   date?: ReactNode;
@@ -31,6 +32,7 @@ export interface IDocumentBoxProps {
 
 export function DocumentBox(props: IDocumentBoxProps): ReactNode {
   const {
+    altText = 'thumbnail',
     author,
     children,
     date,
@@ -58,6 +60,7 @@ export function DocumentBox(props: IDocumentBoxProps): ReactNode {
         }`}
       >
         <Image
+          alt={altText}
           classNames={{
             root: classes.imageRoot,
           }}

diff --git a/packages/haring-react/src/Components/DocumentBox/__snapshots__/DocumentBox.test.tsx.snap b/packages/haring-react/src/Components/DocumentBox/__snapshots__/DocumentBox.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`DocumentBox matches snapshot 1`] = `
       class="undefined "
     >
       <img
+        alt="thumbnail"
         class="m_9e117634 mantine-Image-root"
         src=""
         style="--image-radius: calc(1rem * var(--mantine-scale));"

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
@@ -248,6 +248,7 @@ exports[`DocumentList matches snapshot 1`] = `
             class="undefined "
           >
             <img
+              alt="thumbnail"
               class="m_9e117634 mantine-Image-root"
               src=""
               style="--image-radius: calc(1rem * var(--mantine-scale));"
@@ -417,6 +418,7 @@ exports[`DocumentList matches snapshot 1`] = `
             class="undefined "
           >
             <img
+              alt="thumbnail"
               class="m_9e117634 mantine-Image-root"
               src=""
               style="--image-radius: calc(1rem * var(--mantine-scale));"
@@ -584,6 +586,7 @@ exports[`DocumentList matches snapshot 1`] = `
             class="undefined "
           >
             <img
+              alt="thumbnail"
               class="m_9e117634 mantine-Image-root"
               src=""
               style="--image-radius: calc(1rem * var(--mantine-scale));"

diff --git a/packages/haring-react/src/Components/Header/Header.mock.tsx b/packages/haring-react/src/Components/Header/Header.mock.tsx
@@ -58,6 +58,9 @@ export const rightContentMobileMock = (
 export const rightContentMock = (
   <>
     {rightContentMobileMock}
-    <Avatar src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80" />
+    <Avatar
+      alt="profile"
+      src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
+    />
   </>
 );
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
@@ -64,6 +64,7 @@ exports[`SelectableList matches snapshot 1`] = `
           class="undefined "
         >
           <img
+            alt="thumbnail"
             class="m_9e117634 mantine-Image-root"
             src=""
             style="--image-radius: calc(1rem * var(--mantine-scale));"
@@ -233,6 +234,7 @@ exports[`SelectableList matches snapshot 1`] = `
           class="undefined "
         >
           <img
+            alt="thumbnail"
             class="m_9e117634 mantine-Image-root"
             src=""
             style="--image-radius: calc(1rem * var(--mantine-scale));"
@@ -400,6 +402,7 @@ exports[`SelectableList matches snapshot 1`] = `
           class="undefined "
         >
           <img
+            alt="thumbnail"
             class="m_9e117634 mantine-Image-root"
             src=""
             style="--image-radius: calc(1rem * var(--mantine-scale));"

diff --git a/packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx b/packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx
@@ -25,11 +25,13 @@ import classes from './Thumbnail.module.css';
 
 export interface IThumbnailProps extends IThumbnail {
   actions?: IThumbnailAction[];
+  altText?: string;
 }
 
 export function Thumbnail(props: IThumbnailProps): ReactElement {
   const theme = useMantineTheme();
   const {
+    altText = 'thumbnail',
     actions = [],
     iconType,
     image = defaultImage,
@@ -153,7 +155,7 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
             )}
           </div>
         </Group>
-        <Image radius="16px" src={image} />
+        <Image alt={altText} radius="16px" src={image} />
       </Box>
       <ConfirmModal
         {...confirmAction}

diff --git a/packages/haring-react/src/Components/Thumbnail/__snapshots__/Thumbnail.test.tsx.snap b/packages/haring-react/src/Components/Thumbnail/__snapshots__/Thumbnail.test.tsx.snap
@@ -40,6 +40,7 @@ exports[`Thumbnail matches snapshot 1`] = `
       <div />
     </div>
     <img
+      alt="thumbnail"
       class="m_9e117634 mantine-Image-root"
       src=""
       style="--image-radius: calc(1rem * var(--mantine-scale));"

diff --git a/packages/haring-react/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap b/packages/haring-react/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap
@@ -170,6 +170,7 @@ exports[`ThumbnailGrid matches snapshot 1`] = `
           </div>
         </div>
         <img
+          alt="thumbnail"
           class="m_9e117634 mantine-Image-root"
           src=""
           style="--image-radius: calc(1rem * var(--mantine-scale));"
@@ -232,6 +233,7 @@ exports[`ThumbnailGrid matches snapshot 1`] = `
           </div>
         </div>
         <img
+          alt="thumbnail"
           class="m_9e117634 mantine-Image-root"
           src=""
           style="--image-radius: calc(1rem * var(--mantine-scale));"
@@ -295,6 +297,7 @@ exports[`ThumbnailGrid matches snapshot 1`] = `
           </div>
         </div>
         <img
+          alt="thumbnail"
           class="m_9e117634 mantine-Image-root"
           src=""
           style="--image-radius: calc(1rem * var(--mantine-scale));"
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,6 +40,7 @@ exports[`Thumbnail matches snapshot 1`] = ` @@
           <div />
         </div>
         <img
+          alt="thumbnail"
           class="m_9e117634 mantine-Image-root"
           src=""
           style="--image-radius: calc(1rem * var(--mantine-scale));"
@@ Expand Down @@