feat(NavigationBar): add ariaLabel prop

kiwicom · Dec 6, 2024 · 8671855 · 8671855
1 parent 6ee1f45
commit 8671855
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/packages/orbit-components/src/NavigationBar/README.md b/packages/orbit-components/src/NavigationBar/README.md
@@ -35,3 +35,8 @@ Table below contains all types of the props available in the NavigationBar compo
 | hideOnScroll | `boolean`               | `true`                   | Turn on or off hiding navigation bar on scroll                                                        |
 | openTitle    | `string`                | `"Open navigation menu"` | Property for passing translation string to open Button.                                               |
 | bottomStyle  | `"shadow" \| "border"`  | `"shadow"`               | Property for setting bottom style of NavigationBar.                                                   |
+| ariaLabel    | `string`                | `"navigation"`           | Optional prop for `aria-label` value (accessibility).                                                 |
+
+## Accessibility
+
+- The `ariaLabel` prop allows you to specify an `aria-label` attribute for the component. This attribute provides additional information to screen readers, enhancing the accessibility of the component. By using `ariaLabel`, you can ensure that users who rely on assistive technologies receive the necessary context and information about the component's purpose and functionality.
diff --git a/packages/orbit-components/src/NavigationBar/index.tsx b/packages/orbit-components/src/NavigationBar/index.tsx
@@ -20,6 +20,7 @@ const NavigationBar = ({
   onHide,
   hideOnScroll = true,
   bottomStyle = "shadow",
+  ariaLabel = "navigation",
 }: Props) => {
   const resolveCallback = React.useCallback(
     state => {
@@ -71,6 +72,7 @@ const NavigationBar = ({
         bottomStyle === "shadow" && "shadow-fixed",
         bottomStyle === "border" && "border-cloud-normal border-b",
       )}
+      aria-label={ariaLabel}
     >
       <div className="me-200 block w-full">{children}</div>
       {onMenuOpen && (

diff --git a/packages/orbit-components/src/NavigationBar/types.d.ts b/packages/orbit-components/src/NavigationBar/types.d.ts
@@ -12,4 +12,5 @@ export interface Props extends Common.Globals {
   readonly openTitle?: string;
   readonly hideOnScroll?: boolean;
   readonly bottomStyle?: "shadow" | "border";
+  readonly ariaLabel?: string;
 }