feat(Breadcrumbs): add ariaLabel to improve accessibility

Author: sarkaaa

packages/orbit-components/src/Breadcrumbs/README.md

@@ -21,13 +21,13 @@ The Table below contains all types of props available in the Breadcrumbs compone
 | Name         | Type                       | Default  | Description                                                                                                                |
 | :----------- | :------------------------- | :------- | :------------------------------------------------------------------------------------------------------------------------- |
 | dataTest     | `string`                   |          | Optional prop for testing purposes.                                                                                        |
-| id           | `string`                   |          | Set `id` for `Breadcrumbs`                                                                                                 |
+| id           | `string`                   |          | Set `id` for `Breadcrumbs`.                                                                                                |
 | **children** | `React.Node`               |          | The content of the Breadcrumbs, normally [`BreadcrumbsItem`](#breadcrumbsitem).                                            |
 | onGoBack     | `event => void \| Promise` |          | Callback for handling back button action. If present the back button is visible.                                           |
 | backHref     | `string`                   |          | The location for the back button to direct to. Turns the back button into a link when present (renders as an `a` element). |
 | goBackTitle  | `React.Node`               | `"Back"` | Translation string for the go back link on mobile, defined when onGoBack is defined.                                       |
-|              |
 | spaceAfter   | `enum`                     |          | Additional `margin-bottom` after component.                                                                                |
+| ariaLabel    | `string`                   |          | Optional prop for `aria-label`.                                                                                            |
 
 ### enum
 

packages/orbit-components/src/Breadcrumbs/index.tsx

@@ -18,6 +18,7 @@ const Breadcrumbs = ({
   spaceAfter,
   backHref,
   id,
+  ariaLabel = "Breadcrumb",
 }: Props) => {
   const childEls = React.Children.toArray(children) as React.ReactElement<BreadcrumbsItemProps>[];
 
@@ -26,7 +27,7 @@ const Breadcrumbs = ({
       <Hide on={["smallMobile", "mediumMobile"]}>
         <nav
           className={cx("font-base text-small", spaceAfter && spaceAfterClasses[spaceAfter])}
-          aria-label="Breadcrumb"
+          aria-label={ariaLabel}
           id={id}
           data-test={dataTest}
         >

packages/orbit-components/src/Breadcrumbs/types.d.ts

@@ -10,4 +10,5 @@ export interface Props extends Common.Globals, Common.SpaceAfter {
   readonly goBackTitle?: React.ReactNode;
   readonly onGoBack?: Common.Event<React.SyntheticEvent<HTMLAnchorElement>>;
   readonly backHref?: string;
+  readonly ariaLabel?: string;
 }