Merge pull request #597 from Availity/a11y/breadcrumb

refactor(mui-breadcrumbs): add default aria-label on the Breadcrumbs …
Availity · Dec 9, 2024 · 379e5ac · 379e5ac
2 parents 3fc4185 + 7615173
commit 379e5ac
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/packages/breadcrumbs/src/lib/Breadcrumbs.stories.tsx b/packages/breadcrumbs/src/lib/Breadcrumbs.stories.tsx
@@ -16,6 +16,7 @@ export const _Breadcrumbs: StoryObj<typeof Breadcrumbs> = {
   render: (args: BreadcrumbsProps) => <Breadcrumbs {...args} />,
   args: {
     active: 'Current Page',
+    'aria-label': 'test-breadcrumbs',
     crumbs: [{ name: 'Previous Page', url: '#' }],
   },
 };

diff --git a/packages/breadcrumbs/src/lib/Breadcrumbs.tsx b/packages/breadcrumbs/src/lib/Breadcrumbs.tsx
@@ -29,6 +29,9 @@ export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'
   /** Url for the Home route.
    * @default /public/apps/dashboard */
   homeUrl?: string;
+  /** A string value that can be used to name an element
+   * @default breadcrumbs */
+  'aria-label'?: string;
 }
 
 const Breadcrumb = ({ name, url, target = '_top' }: Crumb) => {
@@ -54,6 +57,7 @@ export const Breadcrumbs = ({
       separator={<NavigateNextIcon fontSize="xsmall" />}
       slotProps={{ collapsedIcon: { className: 'breadcrumbs__collapsed-icon' } }}
       slots={{ CollapsedIcon: MoreHorizontalIcon }}
+      aria-label={rest['aria-label'] || 'breadcrumbs'}
     >
       <Link aria-label="Home" href={homeUrl} loadApp={false}>
         Home