feat(@clayui/vertical-nav): LPD-46396 - Include an aria-label property on the Clay Vertical Navigation component and ensure its proper implementation in usage.

Author: ilzamcmed

packages/clay-core/package.json

@@ -40,7 +40,8 @@
 		"fuzzy": "^0.1.3",
 		"react-dnd": "^11.1.1",
 		"react-dnd-html5-backend": "^11.1.1",
-		"react-transition-group": "^4.4.1"
+		"react-transition-group": "^4.4.1",
+		"warning": "^4.0.3"
 	},
 	"peerDependencies": {
 		"@clayui/css": "3.x",

packages/clay-core/src/vertical-nav/VerticalNav.tsx

@@ -11,7 +11,8 @@ import {
 	useNavigation,
 } from '@clayui/shared';
 import classNames from 'classnames';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import warning from 'warning';
 
 import {Collection, useCollection} from '../collection';
 import {Nav} from '../nav';
@@ -49,6 +50,11 @@ type Props<T extends Record<string, any> | string> = {
 	 */
 	activation?: 'manual' | 'automatic';
 
+	/**
+	 * Flag to define aria-label.
+	 */
+	'aria-label': string;
+
 	/**
 	 * The component contents.
 	 */
@@ -140,6 +146,7 @@ function VerticalNav<T extends Record<string, any> | string>(
 function VerticalNav<T extends Record<string, any> | string>({
 	active,
 	activation = 'manual',
+	'aria-label': ariaLabel,
 	children,
 	decorated,
 	displayType,
@@ -275,8 +282,16 @@ function VerticalNav<T extends Record<string, any> | string>({
 		</Nav>
 	);
 
+	useEffect(() => {
+		warning(
+			ariaLabel,
+			"[VerticalNav]: Missing required 'aria-label' attribute. Please provide a value to ensure accessibility."
+		);
+	}, [ariaLabel]);
+
 	return (
 		<nav
+			aria-label={ariaLabel}
 			className={classNames('menubar menubar-transparent', {
 				['menubar-decorated']: decorated,
 				['menubar-primary']: displayType === 'primary',