feat(NavigationBar): add ariaLabel prop

kiwicom · Dec 3, 2024 · cab4e20 · cab4e20
1 parent c9f7027
commit cab4e20
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/packages/orbit-components/src/NavigationBar/README.md b/packages/orbit-components/src/NavigationBar/README.md
@@ -35,3 +35,4 @@ 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).                                                 |
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 => {
@@ -67,10 +68,11 @@ const NavigationBar = ({
         "bg-white-normal p-300 z-navigation-bar fixed inset-x-0 top-0 box-border flex w-full translate-x-0 items-center",
         "duration-normal transform-gpu transition-transform ease-in-out",
         "tb:h-1600 h-[52px]", // As defined on the const above
-        shown ? "translate-y-0" : "tb:-translate-y-1600 translate-y-[-52px]", // As defined on the const above
+        shown ? "translate-y-0" : "tb:-translate-y-1600 -translate-y-xxxl", // As defined on the const above
         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;
 }