diff --git a/src/components/BodyPortal.spec.tsx b/src/components/BodyPortal.spec.tsx
index 62e8fd4e..93a2c5ee 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 682485e4..75b06418 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 890d0aa8..3a260f25 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 1466f353..95f34c6c 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 b0803c80..9b55a280 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`] = `