diff --git a/packages/core-components/src/components/Progress/Progress.test.tsx b/packages/core-components/src/components/Progress/Progress.test.tsx
index 918c9ba518..f72454754e 100644
--- a/packages/core-components/src/components/Progress/Progress.test.tsx
+++ b/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('', () => {
const { queryByTestId } = await renderInTestApp();
expect(queryByTestId('progress')).toBeInTheDocument();
});
+
+ it('provides an accessible name for the progress bar', async () => {
+ await renderInTestApp();
+ expect(
+ await screen.findByRole('progressbar', { name: 'Loading' }),
+ ).toBeInTheDocument();
+ });
});
diff --git a/packages/core-components/src/components/Progress/Progress.tsx b/packages/core-components/src/components/Progress/Progress.tsx
index b7176a5825..f1dea0ed5c 100644
--- a/packages/core-components/src/components/Progress/Progress.tsx
+++ b/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) {
+ const { 'aria-label': ariaLabel, ...progressProps } = props;
const theme = useTheme();
const [isVisible, setIsVisible] = useState(false);
@@ -34,7 +35,11 @@ export function Progress(props: PropsWithChildren) {
}, [theme.transitions.duration.short]);
return isVisible ? (
-
+
) : (
);