diff --git a/docs/src/docs/others/nprogress.mdx b/docs/src/docs/others/nprogress.mdx index aa493ed9c81..32ef0e427ac 100644 --- a/docs/src/docs/others/nprogress.mdx +++ b/docs/src/docs/others/nprogress.mdx @@ -108,3 +108,11 @@ export default function App(props: AppProps) { ); } ``` + +## Accessibility + +`NavigationProgress` uses `Progress` component under the hood, to pass `aria-label` use `progressLabel` props + +```tsx + +``` diff --git a/src/mantine-nprogress/src/NavigationProgress.tsx b/src/mantine-nprogress/src/NavigationProgress.tsx index d6f3bbbae46..8b918af49eb 100644 --- a/src/mantine-nprogress/src/NavigationProgress.tsx +++ b/src/mantine-nprogress/src/NavigationProgress.tsx @@ -42,6 +42,9 @@ export interface NavigationProgressProps { /** Progressbar z-index */ zIndex?: React.CSSProperties['zIndex']; + + /** aria-label for `Progress`*/ + progressLabel?: string; } export function NavigationProgress({ @@ -56,6 +59,7 @@ export function NavigationProgress({ autoReset = false, withinPortal = true, zIndex = getDefaultZIndex('max'), + progressLabel, }: NavigationProgressProps) { const theme = useMantineTheme(); const shouldReduceMotion = useReducedMotion(); @@ -167,6 +171,7 @@ export function NavigationProgress({ transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`, }, }} + aria-label={progressLabel} /> )}