Merge branch 'main' into cookieyes

openstax · Feb 20, 2025 · 4056181 · 4056181
2 parents f9bdf4d + 30babb1
commit 4056181
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 12 deletions.
diff --git 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(
       <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>,
@@ -248,6 +248,7 @@ describe('BodyPortal', () => {
     expect(document.body).toMatchInlineSnapshot(`
 <body>
   <header
+    aria-label="orange"
     data-portal-slot="header"
     data-testid="blue"
     id="orange"

diff --git a/src/components/BodyPortal.tsx b/src/components/BodyPortal.tsx
@@ -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));
@@ -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 () => {
@@ -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);
 });
diff --git 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 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 });

diff --git 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 ? <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}

diff --git a/src/components/NavBarButton.tsx b/src/components/NavBarButton.tsx
@@ -16,7 +16,7 @@ export const NavBarButton = styled(
     "aria-label": ariaLabel,
     ...props
   }: NavBarButtonProps) => (
-    <Button className={className} {...props}>
+    <Button className={className} aria-label={ariaLabel} {...props}>
       {icon &&
         (typeof icon === "string" ? (
           <img aria-hidden="true" src={icon} alt="" />

diff --git a/src/components/SidebarNav.stories.tsx b/src/components/SidebarNav.stories.tsx
@@ -185,7 +185,7 @@ const SidebarNavAndMain = () => {
     <>
       <GlobalStyle />
       <Wrapper>
-        <StyledSidebarNav>
+        <StyledSidebarNav ariaLabel="Main navigation">
           {({ setNavIsCollapsed, navIsCollapsed, isMobile }) => (
             <NavItemsList
               items={items}
@@ -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}
@@ -237,7 +237,7 @@ const BodyPortalSidebarNavAndMain = () => {
             />
           )}
         </StyledBodyPortalSidebarNav>
-        <NavBar>
+        <NavBar ariaLabel="Main navigation">
           <h1>Title</h1>
           <InfoMenuButton label="Menu">
             <PopoverContainer>

diff --git 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<HTMLElement>(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
@@ -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

diff --git a/src/components/__snapshots__/NavBarButton.spec.tsx.snap b/src/components/__snapshots__/NavBarButton.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`NavBarButton matches base64 icon snapshot 1`] = `
 <button
+  aria-label="dots menu"
   className="sc-bczRLJ dKgZvy"
   data-rac=""
   id="react-aria-5"
@@ -68,6 +69,7 @@ exports[`NavBarButton matches icon and text snapshot 1`] = `
 
 exports[`NavBarButton matches svg icon snapshot 1`] = `
 <button
+  aria-label="info"
   className="sc-bczRLJ dKgZvy"
   data-rac=""
   id="react-aria-3"

diff --git a/src/components/__snapshots__/NavBarMenuButtons.spec.tsx.snap b/src/components/__snapshots__/NavBarMenuButtons.spec.tsx.snap
@@ -31,6 +31,7 @@ exports[`NavBarMenuButton matches snapshot 1`] = `
 exports[`NavBarPopoverButton matches custom aria label snapshot 1`] = `
 <button
   aria-expanded={false}
+  aria-label="Custom label"
   className="sc-bczRLJ dKgZvy"
   data-rac=""
   id="react-aria-5"