feat(apollo,look&feel): commit concernant les retours sur aria labels

Author: neehal-axa

client/apollo/react/src/Form/ItemFile/ItemFileApollo.tsx

@@ -13,7 +13,9 @@ export { itemFileVariants } from "./ItemFileCommon";
 export const ItemFile = ({
   onDeleteClick,
   onVisibilityClick,
-  ariaLabel,
+  ariaLabelVisibility,
+  ariaLabelDelete,
+  filename,
   ...props
 }: ItemFileProps) => (
   <ItemFileCommon
@@ -24,14 +26,14 @@ export const ItemFile = ({
       <ClickIcon
         src={deleteIcon}
         onClick={onDeleteClick}
-        aria-label={ariaLabel}
+        aria-label={ariaLabelDelete || `Suppression du fichier ${filename}`}
       />
     }
     visibilityIcon={
       <ClickIcon
         src={visibilityIcon}
         onClick={onVisibilityClick}
-        aria-label={ariaLabel}
+        aria-label={ariaLabelVisibility || `Observer le fichier ${filename}`}
       />
     }
     {...props}

client/apollo/react/src/Form/ItemFile/ItemFileCommon.tsx

@@ -21,7 +21,9 @@ type ItemFileState = keyof typeof itemFileVariants;
 
 export type ItemFileCommonProps = {
   state: ItemFileState;
-  ariaLabel?: string;
+  ariaLabelVisibility?: string;
+  ariaLabelDelete?: string;
+  filename?: string;
   title: string;
   subTitle: string;
   errorMessage?: string;

client/apollo/react/src/Form/ItemFile/ItemFileLF.tsx

@@ -13,7 +13,9 @@ export { itemFileVariants } from "./ItemFileCommon";
 export const ItemFile = ({
   onDeleteClick,
   onVisibilityClick,
-  ariaLabel,
+  ariaLabelVisibility,
+  ariaLabelDelete,
+  filename,
   ...props
 }: ItemFileProps) => (
   <ItemFileCommon
@@ -24,14 +26,14 @@ export const ItemFile = ({
       <ClickIcon
         src={deleteIconFilled}
         onClick={onDeleteClick}
-        aria-label={ariaLabel}
+        aria-label={ariaLabelDelete || `Suppression du fichier ${filename}`}
       />
     }
     visibilityIcon={
       <ClickIcon
         src={visibilityIcon}
         onClick={onVisibilityClick}
-        aria-label={ariaLabel}
+        aria-label={ariaLabelVisibility || `Observer le fichier ${filename}`}
       />
     }
     {...props}

client/apollo/react/src/Form/ItemFile/__tests__/ItemFile.test.tsx

@@ -29,7 +29,7 @@ describe("<ItemFile />", () => {
         title="IMG_879687880"
         subTitle="0.12"
         state={itemFileVariants.error}
-        ariaLabel="Item File error"
+        ariaLabelDelete="Item File error"
       />,
     );
     const itemFileClickIcon = screen.getAllByRole("button", {
@@ -46,13 +46,18 @@ describe("<ItemFile />", () => {
         title="IMG_879687880"
         subTitle="0.12"
         state={itemFileVariants.success}
-        ariaLabel="Item file success"
+        ariaLabelVisibility="Observer le fichier"
+        ariaLabelDelete="Suppression du fichier"
       />,
     );
-    const itemFileClickIcon = screen.getAllByRole("button", {
-      name: "Item file success",
+    const itemFileVisibility = screen.getAllByRole("button", {
+      name: "Observer le fichier",
     });
-    expect(itemFileClickIcon[0]).toBeInTheDocument();
+    const itemFileDelete = screen.getAllByRole("button", {
+      name: "Suppression du fichier",
+    });
+    expect(itemFileVisibility[0]).toBeInTheDocument();
+    expect(itemFileDelete[0]).toBeInTheDocument();
     expect(container.querySelector("svg")).toHaveClass("af-icon__success");
   });
 
@@ -62,7 +67,8 @@ describe("<ItemFile />", () => {
         state={itemFileVariants.success}
         subTitle="0.12"
         title="IMG_879687880"
-        ariaLabel="Item file success"
+        ariaLabelVisibility="Observer le fichier"
+        ariaLabelDelete="Suppression du fichier"
       />,
     );
     expect(await axe(container)).toHaveNoViolations();