Merge pull request #4627 from mastermaxx03/fix/loader-a11y-4613

frontend: Loader: Add translatable aria-label fallback

Author: illume

frontend/src/components/common/Loader.test.tsx

@@ -72,16 +72,28 @@ describe('Loader Component', () => {
     const progress = screen.getByRole('progressbar');
     expect(progress).toHaveClass('MuiCircularProgress-colorSecondary');
   });
+  it('uses title as aria-label when provided', () => {
+    render(
+      <TestContext>
+        <Loader title="Fetching data..." />
+      </TestContext>
+    );
 
-  it('renders with empty title', () => {
+    const progress = screen.getByRole('progressbar');
+    // Verify the explicit title is used as the accessible label
+    expect(progress).toHaveAttribute('title', 'Fetching data...');
+    expect(progress).toHaveAttribute('aria-label', 'Fetching data...');
+  });
+  it('uses translated fallback aria-label when title is empty', () => {
     render(
       <TestContext>
         <Loader title="" />
       </TestContext>
     );
 
     const progress = screen.getByRole('progressbar');
-    expect(progress).toHaveAttribute('title', '');
+    expect(progress).toHaveAttribute('title', 'Loading...');
+    expect(progress).toHaveAttribute('aria-label', 'Loading...');
   });
 
   it('passes additional props to CircularProgress', () => {

frontend/src/components/common/Loader.tsx

@@ -17,15 +17,23 @@
 import Box from '@mui/material/Box';
 import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export interface LoaderProps extends CircularProgressProps {
   noContainer?: boolean;
   title: string;
 }
 
 export default function Loader(props: LoaderProps) {
+  const { t } = useTranslation();
   const { noContainer = false, title, ...other } = props;
-  const progress = <CircularProgress title={title} aria-label={title} {...other} />;
+  const progress = (
+    <CircularProgress
+      title={title || t('Loading...')}
+      aria-label={title || t('Loading...')}
+      {...other}
+    />
+  );
 
   if (noContainer) return progress;
 

frontend/src/components/common/__snapshots__/Loader.NoTitleProvided.stories.storyshot

@@ -4,11 +4,11 @@
       class="MuiBox-root css-5cned0"
     >
       <span
-        aria-label=""
+        aria-label="Loading..."
         class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-1g0vz9s-MuiCircularProgress-root"
         role="progressbar"
         style="width: 40px; height: 40px;"
-        title=""
+        title="Loading..."
       >
         <svg
           class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"