From 934d5d57cdae5f6f0674a302acc1c52177f28106 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Tue, 3 Dec 2024 16:30:51 +0100
Subject: [PATCH] feat(NavigationBar): add ariaLabel prop

---
 packages/orbit-components/src/NavigationBar/README.md  | 5 +++++
 packages/orbit-components/src/NavigationBar/index.tsx  | 2 ++
 packages/orbit-components/src/NavigationBar/types.d.ts | 1 +
 3 files changed, 8 insertions(+)

diff --git a/packages/orbit-components/src/NavigationBar/README.md b/packages/orbit-components/src/NavigationBar/README.md
index 5de3cb3803..88147e5421 100644
--- 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
index 907bb9ee83..20220e51ea 100644
--- 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
index 50aa826ea4..75f3e0d4db 100644
--- 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;
 }