From 93651b24ba2c5a704ac7928f5583718371b57395 Mon Sep 17 00:00:00 2001
From: Salah Eddine Nourelayne <69311378+Nourelayne@users.noreply.github.com>
Date: Fri, 4 Oct 2024 11:01:05 +0200
Subject: [PATCH] feat(Loader): improve client loader accessibility (#531)

Co-authored-by: NOURELAYNE Salah eddine <salaheddine.nourelayne@axa.fr>
---
 look-and-feel/css/src/Loader/Loader.stories.ts |  4 ++++
 look-and-feel/react/src/Loader/Loader.tsx      | 16 ++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/look-and-feel/css/src/Loader/Loader.stories.ts b/look-and-feel/css/src/Loader/Loader.stories.ts
index ba0de96a6..70d7fee04 100644
--- 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
index 2ce4b4442..4f46be65e 100644
--- 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`,