Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Aug 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd7f4c7
feat(@clayui/navigation-bar): Add sr-only description for mobile view
SelenaAungst Jul 25, 2024
6bc4bf6
chore(@clayui/navigation-bar): add messages as optional prop
matuzalemsteles Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/clay-navigation-bar/src/__tests__/__snapshots__/index.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
35 changes: 35 additions & 0 deletions packages/clay-navigation-bar/src/__tests__/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand All @@ -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}
>
Expand All @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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}
>
Expand Down Expand Up @@ -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}
>
Expand Down Expand Up @@ -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}
>
Expand Down
20 changes: 19 additions & 1 deletion packages/clay-navigation-bar/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.
*/
Expand All @@ -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
Expand Down Expand Up @@ -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',
Expand Down
5 changes: 5 additions & 0 deletions packages/clay-navigation-bar/stories/NavigationBar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}>
Expand Down
Loading