core-components: name the shared progress indicator

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

packages/core-components/src/components/Progress/Progress.test.tsx

@@ -15,6 +15,7 @@
  */
 
 import { renderInTestApp } from '@backstage/test-utils';
+import { screen } from '@testing-library/react';
 
 import { Progress } from './Progress';
 
@@ -23,4 +24,11 @@ describe('<Progress />', () => {
     const { queryByTestId } = await renderInTestApp(<Progress />);
     expect(queryByTestId('progress')).toBeInTheDocument();
   });
+
+  it('provides an accessible name for the progress bar', async () => {
+    await renderInTestApp(<Progress />);
+    expect(
+      await screen.findByRole('progressbar', { name: 'Loading' }),
+    ).toBeInTheDocument();
+  });
 });

packages/core-components/src/components/Progress/Progress.tsx

@@ -22,6 +22,7 @@ import { useTheme } from '@material-ui/core/styles';
 import { PropsWithChildren, useEffect, useState } from 'react';
 
 export function Progress(props: PropsWithChildren<LinearProgressProps>) {
+  const { 'aria-label': ariaLabel, ...progressProps } = props;
   const theme = useTheme();
   const [isVisible, setIsVisible] = useState(false);
 
@@ -34,7 +35,11 @@ export function Progress(props: PropsWithChildren<LinearProgressProps>) {
   }, [theme.transitions.duration.short]);
 
   return isVisible ? (
-    <LinearProgress {...props} data-testid="progress" />
+    <LinearProgress
+      {...progressProps}
+      aria-label={ariaLabel ?? 'Loading'}
+      data-testid="progress"
+    />
   ) : (
     <Box display="none" data-testid="progress" />
   );