feat(@clayui/vertical-nav): LPD-46396 - Update stories

Author: ilzamcmed

packages/clay-core/stories/Accessibility.stories.tsx

@@ -98,6 +98,7 @@ export const UnderlinedLinks = () => (
 			VerticalNav
 		</Heading>
 		<VerticalNav
+			aria-label="vertical navbar"
 			items={[
 				{
 					items: [
@@ -316,6 +317,7 @@ export const TextSpacing = () => (
 			VerticalNav
 		</Heading>
 		<VerticalNav
+			aria-label="vertical navbar"
 			items={[
 				{
 					items: [

packages/clay-core/stories/VerticalNav.stories.tsx

@@ -441,7 +441,7 @@ export default {
 };
 
 export const Default = () => (
-	<VerticalNav active="6" items={items}>
+	<VerticalNav active="6" aria-label="vertical navbar" items={items}>
 		{(item) => (
 			<VerticalNav.Item href={item.href} items={item.items} key={item.id}>
 				{item.label}
@@ -474,6 +474,7 @@ export const ControlledExpandedKeys = () => {
 
 			<VerticalNav
 				active={active}
+				aria-label="vertical navbar"
 				expandedKeys={expandedKeys}
 				items={items_long}
 				onExpandedChange={setExpandedKeys}
@@ -616,6 +617,7 @@ export const Primary = () => {
 	return (
 		<VerticalNav
 			active="Home"
+			aria-label="vertical navbar"
 			displayType="primary"
 			items={items_cms_product_menu}
 		>

packages/clay-nav/stories/Nav.stories.tsx

@@ -70,7 +70,11 @@ export const Default = () => (
 );
 
 export const VerticalNav = (args: any) => (
-	<ClayVerticalNav items={items} large={args.large} />
+	<ClayVerticalNav
+		aria-label="vertical navbar"
+		items={items}
+		large={args.large}
+	/>
 );
 
 VerticalNav.args = {
@@ -79,6 +83,7 @@ VerticalNav.args = {
 
 export const CustomTrigger = () => (
 	<ClayVerticalNav
+		aria-label="vertical navbar"
 		items={items}
 		trigger={(props) => (
 			<ClayVerticalNav.Trigger {...props}>
@@ -92,4 +97,6 @@ export const CustomTrigger = () => (
 	/>
 );
 
-export const WithDecorator = () => <ClayVerticalNav decorated items={items} />;
+export const WithDecorator = () => (
+	<ClayVerticalNav aria-label="vertical navbar" decorated items={items} />
+);