feat(Loader): improve client loader accessibility (#531)

Co-authored-by: NOURELAYNE Salah eddine <[email protected]>
AxaFrance · Oct 4, 2024 · 93651b2 · 93651b2
1 parent 39e0889
commit 93651b2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/look-and-feel/css/src/Loader/Loader.stories.ts b/look-and-feel/css/src/Loader/Loader.stories.ts
@@ -11,6 +11,10 @@ export const Loader: StoryObj = {
   render: (args) => {
     const loader = document.createElement("div");
     loader.classList.add("af-loader__container");
+    loader.role = "alert";
+    loader.ariaLabel = "Chargement en cours";
+    loader.ariaBusy = "true";
+    loader.ariaLive = "assertive";
     loader.style.width = `${args.size}px`;
     loader.style.height = `${args.size}px`;
     loader.style.border = `${args.borderSize}px solid #f3f3f3`;

diff --git a/look-and-feel/react/src/Loader/Loader.tsx b/look-and-feel/react/src/Loader/Loader.tsx
@@ -1,13 +1,21 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
-import { ComponentPropsWithRef } from "react";
 
-type Props = ComponentPropsWithRef<"input"> & {
-  size?: number;
+type LoaderProps = {
   border?: number;
+  size?: number;
+  text?: string;
 };
 
-const Loader = ({ size = 60, border = 5 }: Props) => (
+const Loader = ({
+  border = 5,
+  size = 60,
+  text = "Chargement en cours",
+}: LoaderProps) => (
   <div
+    role="alert"
+    aria-busy
+    aria-label={text}
+    aria-live="assertive"
     className="af-loader__container"
     style={{
       width: `${size}px`,