From d8c37840492cba7814fe28c0c1ba5a7aba100774 Mon Sep 17 00:00:00 2001 From: jomcarvajal <77166182+jomcarvajal@users.noreply.github.com> Date: Tue, 18 Feb 2025 13:51:48 -0600 Subject: [PATCH 1/2] Core 510 nav elements with aria label (#71) * prop ariaLabel added for nav components * fix typo error --- src/components/BodyPortal.spec.tsx | 5 +++-- src/components/BodyPortal.tsx | 9 +++++++-- src/components/NavBar.spec.tsx | 5 +++++ src/components/NavBar.tsx | 5 +++-- src/components/SidebarNav.stories.tsx | 6 +++--- src/components/SidebarNav/index.tsx | 7 +++++-- .../__snapshots__/NavBar.spec.tsx.snap | 19 +++++++++++++++++++ 7 files changed, 45 insertions(+), 11 deletions(-) diff --git a/src/components/BodyPortal.spec.tsx b/src/components/BodyPortal.spec.tsx index 62e8fd4e5..93a2c5eef 100644 --- a/src/components/BodyPortal.spec.tsx +++ b/src/components/BodyPortal.spec.tsx @@ -235,10 +235,10 @@ describe('BodyPortal', () => { `); }); - it('takes an id and testid', () => { + it('takes an id, testid and ariaLabel', () => { render( - + Now you're thinking with portals , @@ -248,6 +248,7 @@ describe('BodyPortal', () => { expect(document.body).toMatchInlineSnapshot(`
; export const BodyPortal = React.forwardRef(( - { children, className, role, slot, tagName, id, ...props }, ref?: React.ForwardedRef + { children, className, role, slot, tagName, id, ariaLabel, ...props }, ref?: React.ForwardedRef ) => { const tag = tagName?.toUpperCase() ?? 'DIV'; const internalRef = React.useRef(document.createElement(tag)); @@ -62,6 +63,8 @@ export const BodyPortal = React.forwardRef(( if (slot) { element.dataset.portalSlot = slot; } + if (ariaLabel) element.setAttribute('aria-label', ariaLabel); + document.body.insertBefore(element, getInsertBeforeTarget(bodyPortalOrderedRefs, slot)); return () => { @@ -73,13 +76,15 @@ export const BodyPortal = React.forwardRef(( 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); }); diff --git a/src/components/NavBar.spec.tsx b/src/components/NavBar.spec.tsx index 682485e44..75b064182 100644 --- a/src/components/NavBar.spec.tsx +++ b/src/components/NavBar.spec.tsx @@ -20,6 +20,11 @@ describe('NavBar', () => { expect(document.body).toMatchSnapshot(); }); + it('sets the ariaLabel', () => { + render(NavBar content, { container: root }); + expect(document.body).toMatchSnapshot(); + }); + describe('with a logo', () => { it('matches snapshot', () => { render(NavBar content, { container: root }); diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 890d0aa82..3a260f25d 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -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 ? : null; - return + return { <> - + {({ setNavIsCollapsed, navIsCollapsed, isMobile }) => ( { - }> + }> {({ setNavIsCollapsed, navIsCollapsed, isMobile }) => ( { /> )} - +

Title

diff --git a/src/components/SidebarNav/index.tsx b/src/components/SidebarNav/index.tsx index 1466f3534..95f34c6ce 100644 --- a/src/components/SidebarNav/index.tsx +++ b/src/components/SidebarNav/index.tsx @@ -31,6 +31,7 @@ interface SidebarNavSharedProps { mobileBreakpoint?: string; isMobile?: boolean; className?: string; + ariaLabel?: string; } export const SidebarNavBase = ({ @@ -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(null); @@ -176,6 +177,7 @@ export const SidebarNav = styled( id={id} ref={sidebarNavRef} data-testid="sidebarnav" + aria-label={ariaLabel} className={classNames(className, { collapsed: navIsCollapsed, mobile: isMobile, @@ -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); @@ -222,6 +224,7 @@ export const BodyPortalSidebarNav = styled( tagName="nav" slot="sidebar" data-testid="sidebarnav" + ariaLabel={ariaLabel} className={classNames(className, { collapsed: navIsCollapsed, mobile: isMobile, diff --git a/src/components/__snapshots__/NavBar.spec.tsx.snap b/src/components/__snapshots__/NavBar.spec.tsx.snap index b0803c80f..9b55a2802 100644 --- a/src/components/__snapshots__/NavBar.spec.tsx.snap +++ b/src/components/__snapshots__/NavBar.spec.tsx.snap @@ -18,6 +18,25 @@ exports[`NavBar matches snapshot 1`] = ` `; +exports[`NavBar sets the ariaLabel 1`] = ` + +
+ + +`; + exports[`NavBar sets the maxWidth 1`] = `
Date: Tue, 18 Feb 2025 15:50:44 -0600 Subject: [PATCH 2/2] apply aria-label to NavBarButton (#70) add missing prop Co-authored-by: Beth Shook --- src/components/NavBarButton.tsx | 2 +- src/components/__snapshots__/NavBarButton.spec.tsx.snap | 2 ++ src/components/__snapshots__/NavBarMenuButtons.spec.tsx.snap | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/NavBarButton.tsx b/src/components/NavBarButton.tsx index f3cdfc80a..24f84308f 100644 --- a/src/components/NavBarButton.tsx +++ b/src/components/NavBarButton.tsx @@ -16,7 +16,7 @@ export const NavBarButton = styled( "aria-label": ariaLabel, ...props }: NavBarButtonProps) => ( -