fix(VerticalNavigation): arial labels added to navigation slider butt…

…ons (#3556)
lumada-design · Aug 3, 2023 · 739fe55 · 739fe55
1 parent b05c0ac
commit 739fe55
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/packages/core/src/components/VerticalNavigation/Header/Header.tsx b/packages/core/src/components/VerticalNavigation/Header/Header.tsx
@@ -97,7 +97,7 @@ export const HvVerticalNavigationHeader = ({
       {...others}
     >
       {isOpen && headerTitle && slider && (
-        <HvButton icon onClick={backButtonClickHandler} {...backButtonProps}>
+        <HvButton icon onClick={backButtonClickHandler} aria-label="Back" {...backButtonProps}>
           <Backwards iconSize="XS" />
         </HvButton>
       )}

diff --git a/packages/core/src/components/VerticalNavigation/Navigation/Navigation.tsx b/packages/core/src/components/VerticalNavigation/Navigation/Navigation.tsx
@@ -93,6 +93,8 @@ export interface HvVerticalNavigationTreeProps
    * target - the behavior when opening an url.
    */
   data?: NavigationData[];
+  /** Aria label to apply to the navigate to submenu button on the navigation slider list items. */
+  sliderForwardButtonAriaLabel?: string;
 }
 
 const createListHierarchy = (
@@ -200,6 +202,8 @@ export const HvVerticalNavigationTree = ({
   defaultSelected,
   onChange,
 
+  sliderForwardButtonAriaLabel = "Navigate to submenu",
+
   ...others
 }: HvVerticalNavigationTreeProps) => {
   const [selected, setSelected] = useControlled(selectedProp, defaultSelected);
@@ -399,6 +403,7 @@ export const HvVerticalNavigationTree = ({
           selected={selected}
           onNavigateToTarget={navigateToTargetHandler}
           onNavigateToChild={navigateToChildHandler}
+          forwardButtonAriaLabel={sliderForwardButtonAriaLabel}
         />
       ) : (
         <HvVerticalNavigationTreeView

diff --git a/packages/core/src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx b/packages/core/src/components/VerticalNavigation/NavigationSlider/NavigationSlider.tsx
@@ -50,6 +50,8 @@ export interface HvVerticalNavigationSliderProps {
     event: React.MouseEvent<HTMLButtonElement>,
     item: NavigationData
   ) => void;
+  /** Aria label to apply to the navigate to submenu button on the list items. */
+  forwardButtonAriaLabel?: string;
 }
 
 export const HvVerticalNavigationSlider = ({
@@ -59,6 +61,7 @@ export const HvVerticalNavigationSlider = ({
   selected,
   onNavigateToTarget,
   onNavigateToChild,
+  forwardButtonAriaLabel = "Navigate to submenu",
 }: HvVerticalNavigationSliderProps) => {
   return (
     <HvListContainer interactive id={id}>
@@ -89,6 +92,7 @@ export const HvVerticalNavigationSlider = ({
                   onClick={(event) => {
                     onNavigateToChild?.(event, item);
                   }}
+                  aria-label={forwardButtonAriaLabel}
                 >
                   <DropRightXS />
                 </HvButton>