[@mantine/nprogress] Add option to add aria-label (#2526)

Co-authored-by: zulianrizki <you@example.com>
mantinedev · Sep 24, 2022 · a51eb56 · a51eb56
1 parent bce104d
commit a51eb56
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git 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
+<NavigationProgress progressLabel="Loading Page" />
+```
diff --git 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}
         />
       )}
     </OptionalPortal>