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

fix(@clayui/vertical-nav): Update Vertical Navigation markup to fix JAWS read #5750

Merged
merged 2 commits into from
Jan 22, 2024
Merged

fix(@clayui/vertical-nav): Update Vertical Navigation markup to fix JAWS read #5750

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
7e2a35b
fix(@clayui/vertical-nav): Add aria-controls on vertical navbar itens…
ilzamcmed Jan 12, 2024
714281d
fix(@clayui/vertical-nav): Update tests and snapshots
ilzamcmed Jan 16, 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
10 changes: 6 additions & 4 deletions packages/clay-core/src/vertical-nav/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -188,7 +190,7 @@ export function Item<T extends object>({
}
}}
ref={itemRef}
role={items ? 'button' : 'menuitem'}
role="menuitem"
showIcon={!!items}
spritemap={spritemap}
tabIndex={
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/clay-core/src/vertical-nav/__tests__/__snapshots__/BasicRendering.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ exports[`VerticalNav basic rendering render dynamic content 1`] = `
role="none"
>
<button
aria-controls="clay-id-6"
aria-expanded="false"
aria-haspopup="true"
class="nav-link collapse-icon collapsed btn btn-unstyled"
role="button"
role="menuitem"
type="button"
>
Home
Expand Down
5 changes: 3 additions & 2 deletions packages/clay-nav/src/__tests__/__snapshots__/index.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ exports[`ClayVerticalNav renders 1`] = `
role="none"
>
<button
aria-controls="clay-id-2"
aria-expanded="true"
aria-haspopup="true"
class="nav-link collapse-icon btn btn-unstyled"
role="button"
role="menuitem"
type="button"
>
Home
Expand Down Expand Up @@ -73,6 +73,7 @@ exports[`ClayVerticalNav renders 1`] = `
</button>
<ul
class="nav nav-stacked"
id="clay-id-2"
role="menu"
>
<li
Expand Down
33 changes: 11 additions & 22 deletions packages/clay-nav/src/__tests__/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@
*/

import {ClayVerticalNav} from '..';
import {
cleanup,
fireEvent,
getAllByRole as docGetAllByRole,
render,
} from '@testing-library/react';
import {cleanup, fireEvent, render} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';

Expand Down Expand Up @@ -92,11 +87,11 @@ describe('ClayVerticalNav', () => {
});

it('expand items by pressing the right arrow key', () => {
const {getAllByRole} = render(
const {getByText} = render(
<ClayVerticalNav items={ITEMS} spritemap="/path/to" />
);

const [, , projects] = getAllByRole('button');
const projects = getByText('Projects');

userEvent.tab();
userEvent.tab();
Expand All @@ -109,11 +104,11 @@ describe('ClayVerticalNav', () => {
});

it('collapse items by pressing the left arrow key', () => {
const {getAllByRole} = render(
const {getByText} = render(
<ClayVerticalNav items={ITEMS} spritemap="/path/to" />
);

const [, , projects] = getAllByRole('button');
const projects = getByText('Projects');

userEvent.tab();
userEvent.tab();
Expand All @@ -130,11 +125,11 @@ describe('ClayVerticalNav', () => {
});

it('moves focus to first item if item is expanded', () => {
const {getAllByRole} = render(
const {getByText} = render(
<ClayVerticalNav items={ITEMS} spritemap="/path/to" />
);

const [, , projects] = getAllByRole('button');
const projects = getByText('Projects');

userEvent.tab();
userEvent.tab();
Expand All @@ -147,20 +142,17 @@ describe('ClayVerticalNav', () => {

userEvent.keyboard('[ArrowRight]');

const [first] = docGetAllByRole(
projects!.parentNode as HTMLElement,
'menuitem'
);
const first = getByText('Five');

expect(first).toEqual(document.activeElement);
});

it('move focus to parent if focus is on child when pressing left arrow key', () => {
const {getAllByRole} = render(
const {getByText} = render(
<ClayVerticalNav items={ITEMS} spritemap="/path/to" />
);

const [, , projects] = getAllByRole('button');
const projects = getByText('Projects');

userEvent.tab();
userEvent.tab();
Expand All @@ -173,10 +165,7 @@ describe('ClayVerticalNav', () => {

userEvent.keyboard('[ArrowRight]');

const [first] = docGetAllByRole(
projects!.parentNode as HTMLElement,
'menuitem'
);
const first = getByText('Five');

expect(first).toEqual(document.activeElement);

Expand Down
Loading