feat(ClickItem): make icons decorative (#572)

AxaFrance · Nov 4, 2024 · 2b71405 · 2b71405
1 parent c1be25d
commit 2b71405
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/look-and-feel/css/src/List/ClickList/ClickList.stories.ts b/look-and-feel/css/src/List/ClickList/ClickList.stories.ts
@@ -82,7 +82,7 @@ const template = ({ items, cardClassModifier }: TClickList) => {
     const itemAction = document.createElement("div");
     itemAction.className = "af-click-item__action";
     itemAction.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
           <path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
         </svg>`;
     clickItem.appendChild(itemAction);
@@ -108,7 +108,7 @@ export const ClickListWithIcon: StoryObj<TClickList> = {
     items: [
       {
         icon: `
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/>
           </svg>`,
         label: "Texte principal",
@@ -117,15 +117,15 @@ export const ClickListWithIcon: StoryObj<TClickList> = {
       },
       {
         icon: `
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/>
           </svg>`,
         label: "Texte principal",
         isDisabled: false,
       },
       {
         icon: `
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"/>
           </svg>`,
         label: "Texte principal",
@@ -134,7 +134,7 @@ export const ClickListWithIcon: StoryObj<TClickList> = {
       },
       {
         icon: `
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M5 5h2v3h10V5h2v6h2V5c0-1.1-.9-2-2-2h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h5v-2H5V5zm7-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z"/><path d="m18.01 13-1.42 1.41 1.58 1.58H12v2h6.17l-1.58 1.59 1.42 1.41 3.99-4z"/>
           </svg>`,
         label: "Texte principal",

diff --git a/look-and-feel/react/src/List/ClickList/ClickItem/ClickItem.tsx b/look-and-feel/react/src/List/ClickList/ClickItem/ClickItem.tsx
@@ -58,7 +58,7 @@ export const ClickItem = ({
         <div className="af-click-item__label">{children || label}</div>
       </div>
       <div className="af-click-item__action">
-        <Svg src={chevron} />
+        <Svg src={chevron} aria-hidden />
       </div>
     </ClickComponent>
   );

diff --git a/look-and-feel/react/src/List/ClickList/ClickList.stories.tsx b/look-and-feel/react/src/List/ClickList/ClickList.stories.tsx
@@ -17,24 +17,24 @@ export const ClickListWithIcon: StoryObj<typeof ClickList> = {
     items: [
       {
         id: "1",
-        icon: <Svg src={error} />,
+        icon: <Svg src={error} aria-hidden />,
         children: "Texte principal",
         classModifier: "small",
       },
       {
         id: "2",
-        icon: <Svg src={error} />,
+        icon: <Svg src={error} aria-hidden />,
         children: "Texte principal",
       },
       {
         id: "3",
-        icon: <Svg src={error} />,
+        icon: <Svg src={error} aria-hidden />,
         children: "Texte principal",
         classModifier: "large",
       },
       {
         id: "4",
-        icon: <Svg src={contentPasteGo} />,
+        icon: <Svg src={contentPasteGo} aria-hidden />,
         children: "Texte principal",
         isDisabled: true,
       },