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

Core 510 nav elements with aria label #71

Merged
merged 3 commits into from
Feb 18, 2025
Merged

Core 510 nav elements with aria label #71

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4565659
prop ariaLabel added for nav components
jomcarvajal Feb 17, 2025
7574515
Merge branch 'main' of github.com:openstax/ui-components into CORE-51…
jomcarvajal Feb 17, 2025
2e30e33
fix typo error
jomcarvajal Feb 18, 2025
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: 3 additions & 2 deletions src/components/BodyPortal.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,10 +235,10 @@ describe('BodyPortal', () => {
`);
});

it('takes an id and testid', () => {
it('takes an id, testid and ariaLabel', () => {
render(
<BodyPortalSlotsContext.Provider value={['header', 'root']}>
<BodyPortal slot='header' tagName='header' id='orange' data-testid='blue'>
<BodyPortal slot='header' tagName='header' id='orange' data-testid='blue' ariaLabel='orange'>
Now you're thinking with portals
</BodyPortal>
</BodyPortalSlotsContext.Provider>,
Expand All @@ -248,6 +248,7 @@ describe('BodyPortal', () => {
expect(document.body).toMatchInlineSnapshot(`
<body>
<header
aria-label="orange"
data-portal-slot="header"
data-testid="blue"
id="orange"
Expand Down
9 changes: 7 additions & 2 deletions src/components/BodyPortal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,11 @@ export type BodyPortalProps = React.PropsWithChildren<{
tagName?: string;
id?: string;
'data-testid'?: string;
ariaLabel?: string;
}>;

export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((
{ children, className, role, slot, tagName, id, ...props }, ref?: React.ForwardedRef<HTMLElement>
{ children, className, role, slot, tagName, id, ariaLabel, ...props }, ref?: React.ForwardedRef<HTMLElement>
) => {
const tag = tagName?.toUpperCase() ?? 'DIV';
const internalRef = React.useRef<HTMLElement>(document.createElement(tag));
Expand Down Expand Up @@ -62,6 +63,8 @@ export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((

if (slot) { element.dataset.portalSlot = slot; }

if (ariaLabel) element.setAttribute('aria-label', ariaLabel);

document.body.insertBefore(element, getInsertBeforeTarget(bodyPortalOrderedRefs, slot));

return () => {
Expand All @@ -73,13 +76,15 @@ export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((

if (role) { element.removeAttribute('role'); }

if (ariaLabel) { element.removeAttribute('aria-label'); }

if (className) { element.classList.remove(...className.split(' ')); }

if (id) { element.id = ''; }

if (testId) { delete element.dataset.testid; }
};
}, [bodyPortalOrderedRefs, className, id, role, slot, tag, testId]);
}, [bodyPortalOrderedRefs, className, id, role, slot, ariaLabel, tag, testId]);

return createPortal(children, internalRef.current);
});
5 changes: 5 additions & 0 deletions src/components/NavBar.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ describe('NavBar', () => {
expect(document.body).toMatchSnapshot();
});

it('sets the ariaLabel', () => {
render(<NavBar ariaLabel='test' maxWidth={128}>NavBar content</NavBar>, { container: root });
expect(document.body).toMatchSnapshot();
});

describe('with a logo', () => {
it('matches snapshot', () => {
render(<NavBar logo={true}>NavBar content</NavBar>, { container: root });
Expand Down
5 changes: 3 additions & 2 deletions src/components/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,16 @@ type NavBarProps = React.PropsWithChildren<{
navMobileHeight?: number;
logo?: boolean | Logo;
justifyContent?: string;
ariaLabel?: string;
}>

export const NavBar = ({ logo = false, maxWidth, navDesktopHeight, navMobileHeight, justifyContent, ...props }: NavBarProps) => {
export const NavBar = ({ logo = false, maxWidth, navDesktopHeight, navMobileHeight, justifyContent, ariaLabel, ...props }: NavBarProps) => {
const logoIsObject = typeof logo === 'object';
const renderAnchor = logoIsObject && 'href' in logo;
const {alt = 'OpenStax Logo', ...anchorProps} = logoIsObject ? logo : {};
const logoComponent = logo ? <OpenstaxLogo alt={alt} /> : null;

return <BarWrapper tagName='nav' slot='nav' {...props}>
return <BarWrapper tagName='nav' ariaLabel={ariaLabel} slot='nav' {...props}>
<StyledNavBar
maxWidth={maxWidth}
navDesktopHeight={navDesktopHeight || Constants.navDesktopHeight}
Expand Down
6 changes: 3 additions & 3 deletions src/components/SidebarNav.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ const SidebarNavAndMain = () => {
<>
<GlobalStyle />
<Wrapper>
<StyledSidebarNav>
<StyledSidebarNav ariaLabel="Main navigation">
{({ setNavIsCollapsed, navIsCollapsed, isMobile }) => (
<NavItemsList
items={items}
Expand Down Expand Up @@ -227,7 +227,7 @@ const BodyPortalSidebarNavAndMain = () => {
<BodyPortalSlotsContext.Provider value={["sidebar", "nav", "main"]}>
<BodyPortalGlobalStyle />
<Wrapper>
<StyledBodyPortalSidebarNav navHeader={<NavBarLogo alt="logo" />}>
<StyledBodyPortalSidebarNav ariaLabel="Header navigation" navHeader={<NavBarLogo alt="logo" />}>
{({ setNavIsCollapsed, navIsCollapsed, isMobile }) => (
<NavItemsList
items={items}
Expand All @@ -237,7 +237,7 @@ const BodyPortalSidebarNavAndMain = () => {
/>
)}
</StyledBodyPortalSidebarNav>
<NavBar>
<NavBar ariaLabel="Main navigation">
<h1>Title</h1>
<InfoMenuButton label="Menu">
<PopoverContainer>
Expand Down
7 changes: 5 additions & 2 deletions src/components/SidebarNav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ interface SidebarNavSharedProps {
mobileBreakpoint?: string;
isMobile?: boolean;
className?: string;
ariaLabel?: string;
}

export const SidebarNavBase = ({
Expand Down Expand Up @@ -157,7 +158,7 @@ export const SidebarNavBase = ({
};

export const SidebarNav = styled(
({ className, id, ...props }: SidebarNavSharedProps) => {
({ className, id, ariaLabel, ...props }: SidebarNavSharedProps) => {
const { isMobile, navIsCollapsed, setNavIsCollapsed } =
useSidebarNavProps(props);
const sidebarNavRef = React.useRef<HTMLElement>(null);
Expand All @@ -176,6 +177,7 @@ export const SidebarNav = styled(
id={id}
ref={sidebarNavRef}
data-testid="sidebarnav"
aria-label={ariaLabel}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo, this needs to be ariaLabel so it gets sent as the right prop

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you mean line 227 in BodyPortal props? I saw the typo error there

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops yes I picked the wrong one

className={classNames(className, {
collapsed: navIsCollapsed,
mobile: isMobile,
Expand All @@ -200,7 +202,7 @@ export const SidebarNav = styled(
`;

export const BodyPortalSidebarNav = styled(
({ className, id, ...props }: SidebarNavSharedProps) => {
({ className, id, ariaLabel, ...props }: SidebarNavSharedProps) => {
const { isMobile, navIsCollapsed, setNavIsCollapsed } =
useSidebarNavProps(props);

Expand All @@ -222,6 +224,7 @@ export const BodyPortalSidebarNav = styled(
tagName="nav"
slot="sidebar"
data-testid="sidebarnav"
aria-label={ariaLabel}
className={classNames(className, {
collapsed: navIsCollapsed,
mobile: isMobile,
Expand Down
19 changes: 19 additions & 0 deletions src/components/__snapshots__/NavBar.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,25 @@ exports[`NavBar matches snapshot 1`] = `
</body>
`;

exports[`NavBar sets the ariaLabel 1`] = `
<body>
<main
id="root"
/>
<nav
aria-label="test"
class="sc-gsnTZi cnSXvF"
data-portal-slot="nav"
>
<div
class="sc-dkzDqf gQjsvL"
>
NavBar content
</div>
</nav>
</body>
`;

exports[`NavBar sets the maxWidth 1`] = `
<body>
<main
Expand Down
Loading