feat(@clayui/navigation-bar): Add sr-only description for mobile view

liferay · Aug 21, 2024 · fd7f4c7 · fd7f4c7
1 parent 557280f
commit fd7f4c7
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 1 deletion.
diff --git a/packages/clay-navigation-bar/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-navigation-bar/src/__tests__/__snapshots__/index.tsx.snap
@@ -55,6 +55,7 @@ exports[`ClayNavigationBar renders 1`] = `
     >
       <button
         aria-expanded="false"
+        aria-label="Open Menu, Current Page: Item 1"
         class="navbar-toggler navbar-toggler-link collapsed btn btn-unstyled"
         data-testid="navbarToggler"
         type="button"
@@ -143,6 +144,7 @@ exports[`ClayNavigationBar renders a custom item 1`] = `
     >
       <button
         aria-expanded="false"
+        aria-label="Open Menu, Current Page: Item 1"
         class="navbar-toggler navbar-toggler-link collapsed btn btn-unstyled"
         data-testid="navbarToggler"
         type="button"
@@ -243,6 +245,7 @@ exports[`ClayNavigationBar renders when passing more than one active item 1`] =
     >
       <button
         aria-expanded="false"
+        aria-label="Open Menu, Current Page: Item 1"
         class="navbar-toggler navbar-toggler-link collapsed btn btn-unstyled"
         data-testid="navbarToggler"
         type="button"
@@ -331,6 +334,7 @@ exports[`ClayNavigationBar renders with a single item 1`] = `
     >
       <button
         aria-expanded="false"
+        aria-label="Open Menu, Current Page: Item 1"
         class="navbar-toggler navbar-toggler-link collapsed btn btn-unstyled"
         data-testid="navbarToggler"
         type="button"
@@ -391,6 +395,7 @@ exports[`ClayNavigationBar throws a warning when passing more than one active pr
     >
       <button
         aria-expanded="false"
+        aria-label="Open Menu, Current Page: Item 1"
         class="navbar-toggler navbar-toggler-link collapsed btn btn-unstyled"
         data-testid="navbarToggler"
         type="button"

diff --git a/packages/clay-navigation-bar/src/__tests__/index.tsx b/packages/clay-navigation-bar/src/__tests__/index.tsx
@@ -21,6 +21,11 @@ describe('ClayNavigationBar', () => {
 		const {container} = render(
 			<ClayNavigationBar
 				inverted
+				messages={{
+					close: 'Close',
+					open: 'Open',
+					trigger: '{0} Menu, Current Page: {1}',
+				}}
 				spritemap={spritemap}
 				triggerLabel={label}
 			>
@@ -47,6 +52,11 @@ describe('ClayNavigationBar', () => {
 		const {container} = render(
 			<ClayNavigationBar
 				inverted
+				messages={{
+					close: 'Close',
+					open: 'Open',
+					trigger: '{0} Menu, Current Page: {1}',
+				}}
 				spritemap={spritemap}
 				triggerLabel={label}
 			>
@@ -67,6 +77,11 @@ describe('ClayNavigationBar', () => {
 		const {container, getByText} = render(
 			<ClayNavigationBar
 				inverted
+				messages={{
+					close: 'Close',
+					open: 'Open',
+					trigger: '{0} Menu, Current Page: {1}',
+				}}
 				spritemap={spritemap}
 				triggerLabel="Trigger Label"
 			>
@@ -103,6 +118,11 @@ describe('ClayNavigationBar', () => {
 		const {container, getByTestId} = render(
 			<ClayNavigationBar
 				inverted
+				messages={{
+					close: 'Close',
+					open: 'Open',
+					trigger: '{0} Menu, Current Page: {1}',
+				}}
 				spritemap={spritemap}
 				triggerLabel="Trigger Label"
 			>
@@ -149,6 +169,11 @@ describe('ClayNavigationBar', () => {
 		const {container} = render(
 			<ClayNavigationBar
 				inverted
+				messages={{
+					close: 'Close',
+					open: 'Open',
+					trigger: '{0} Menu, Current Page: {1}',
+				}}
 				spritemap={spritemap}
 				triggerLabel={label}
 			>
@@ -179,6 +204,11 @@ describe('ClayNavigationBar', () => {
 		const {container} = render(
 			<ClayNavigationBar
 				inverted
+				messages={{
+					close: 'Close',
+					open: 'Open',
+					trigger: '{0} Menu, Current Page: {1}',
+				}}
 				spritemap={spritemap}
 				triggerLabel={label}
 			>
@@ -206,6 +236,11 @@ describe('ClayNavigationBar', () => {
 		const {container} = render(
 			<ClayNavigationBar
 				inverted
+				messages={{
+					close: 'Close',
+					open: 'Open',
+					trigger: '{0} Menu, Current Page: {1}',
+				}}
 				spritemap={spritemap}
 				triggerLabel={label}
 			>

diff --git a/packages/clay-navigation-bar/src/index.tsx b/packages/clay-navigation-bar/src/index.tsx
@@ -7,7 +7,7 @@ import ClayButton from '@clayui/button';
 import ClayIcon from '@clayui/icon';
 import ClayLayout from '@clayui/layout';
 import {useProvider} from '@clayui/provider';
-import {setElementFullHeight} from '@clayui/shared';
+import {setElementFullHeight, sub} from '@clayui/shared';
 import classNames from 'classnames';
 import React, {useState} from 'react';
 import {CSSTransition} from 'react-transition-group';
@@ -43,6 +43,15 @@ export interface IProps
 	 */
 	inverted?: boolean;
 
+	/**
+	 * Defines aria-label messages to display for the screen reader.
+	 */
+	messages: {
+		close: 'Close';
+		open: 'Open';
+		trigger: '{0} Menu, Current Page: {1}';
+	};
+
 	/**
 	 * Path to the location of the spritemap resource.
 	 */
@@ -64,6 +73,11 @@ function ClayNavigationBar({
 	fluidSize,
 	inverted = false,
 	itemAriaCurrent: ariaCurrent = true,
+	messages = {
+		close: 'Close',
+		open: 'Open',
+		trigger: '{0} Menu, Current Page: {1}',
+	},
 	spritemap,
 	triggerLabel,
 	...otherProps
@@ -104,6 +118,10 @@ function ClayNavigationBar({
 				<ClayLayout.ContainerFluid size={fluidSize}>
 					<ClayButton
 						aria-expanded={expanded}
+						aria-label={sub(messages.trigger, [
+							expanded ? messages.close : messages.open,
+							triggerLabel,
+						])}
 						className={classNames(
 							'navbar-toggler',
 							'navbar-toggler-link',

diff --git a/packages/clay-navigation-bar/stories/NavigationBar.stories.tsx b/packages/clay-navigation-bar/stories/NavigationBar.stories.tsx
@@ -21,6 +21,11 @@ export const NavigationBar = (args: any) => {
 		<ClayNavigationBar
 			fluidSize={args.fluidSize}
 			inverted={args.inverted}
+			messages={{
+				close: 'Close',
+				open: 'Open',
+				trigger: '{0} Menu, Current Page: {1}',
+			}}
 			triggerLabel={triggerName}
 		>
 			<ClayNavigationBar.Item active={args.active === 'Item 1'}>