From 7e2a35b95912b44a47fe159658dae8bc568466e8 Mon Sep 17 00:00:00 2001
From: Ilza Medeiros <ilza.medeiros@liferay.com>
Date: Fri, 12 Jan 2024 16:13:37 -0300
Subject: [PATCH] fix(@clayui/vertical-nav): Add aria-controls on vertical
 navbar itens and change role to menuitem

---
 packages/clay-core/src/vertical-nav/Item.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/clay-core/src/vertical-nav/Item.tsx b/packages/clay-core/src/vertical-nav/Item.tsx
index f476528f8f..72c10ec005 100644
--- a/packages/clay-core/src/vertical-nav/Item.tsx
+++ b/packages/clay-core/src/vertical-nav/Item.tsx
@@ -4,7 +4,7 @@
  */
 
 import {useProvider} from '@clayui/provider';
-import {Keys, setElementFullHeight} from '@clayui/shared';
+import {Keys, setElementFullHeight, useId} from '@clayui/shared';
 import React, {useContext, useMemo, useRef, useState} from 'react';
 import {CSSTransition} from 'react-transition-group';
 
@@ -128,13 +128,15 @@ export function Item<T extends object>({
 
 	const active = depreactedActive ?? activeKey === keyValue;
 
+	const ariaControlsId = useId();
+
 	return (
 		<Nav.Item role="none" {...otherProps}>
 			<Nav.Link
 				active={active}
+				aria-controls={items ? ariaControlsId : undefined}
 				aria-current={active ? ariaCurrent ?? undefined : undefined}
 				aria-expanded={items ? isExpanded : undefined}
-				aria-haspopup={items ? true : undefined}
 				collapsed={!isExpanded}
 				href={href}
 				onClick={(event) => {
@@ -188,7 +190,7 @@ export function Item<T extends object>({
 					}
 				}}
 				ref={itemRef}
-				role={items ? 'button' : 'menuitem'}
+				role="menuitem"
 				showIcon={!!items}
 				spritemap={spritemap}
 				tabIndex={
@@ -229,7 +231,7 @@ export function Item<T extends object>({
 					timeout={prefersReducedMotion ? 0 : 250}
 					unmountOnExit
 				>
-					<Nav ref={menusRef} role="menu" stacked>
+					<Nav id={ariaControlsId} ref={menusRef} role="menu" stacked>
 						<ParentContext.Provider value={itemRef}>
 							<Collection<T> items={items} parentKey={keyValue}>
 								{childrenRoot.current}