bodyportal needs to take an id for accessiblilty use (aria-controls)

openstax · Aug 29, 2024 · 53b3d1f · 53b3d1f
1 parent ba03764
commit 53b3d1f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/BodyPortal.spec.tsx b/src/components/BodyPortal.spec.tsx
@@ -179,13 +179,13 @@ describe('BodyPortal', () => {
 `);
   });
 
-  it('takes a ref', () => {
+  it('takes a ref and ids', () => {
     const ref = { current: document.createElement("HEADER") };
 
     render(
       <BodyPortalSlotsContext.Provider value={['header', 'root']}>
         <div>
-          <BodyPortal slot='header' tagName='header' externalRef={ref}>
+          <BodyPortal slot='header' tagName='header' externalRef={ref} id="orange" data-testid="blue">
             Now you're thinking with portals
           </BodyPortal>
         </div>
@@ -197,6 +197,8 @@ describe('BodyPortal', () => {
 <body>
   <header
     data-portal-slot="header"
+    data-testid="blue"
+    id="orange"
   >
     Now you're thinking with portals
   </header>

diff --git a/src/components/BodyPortal.tsx b/src/components/BodyPortal.tsx
@@ -22,14 +22,15 @@ const getInsertBeforeTarget = (bodyPortalSlots: string[], slot?: string) => {
 }
 
 export const BodyPortal = ({
-  children, className, role, slot, tagName, externalRef, ...props
+  children, className, role, slot, tagName, externalRef, id, ...props
 }: React.PropsWithChildren<{
   className?: string;
   role?: string;
   slot?: string;
   tagName?: string;
   externalRef?: React.MutableRefObject<HTMLElement>;
   'data-testid'?: string;
+  id?: string;
 }>) => {
   const tag = tagName?.toUpperCase() ?? 'DIV';
   const ref = externalRef ?? React.useRef<HTMLElement>(document.createElement(tag));
@@ -44,6 +45,8 @@ export const BodyPortal = ({
 
     if (className) { element.classList.add(...className.split(' ')); }
 
+    if (id) { element.id = id; }
+
     if (role) { element.setAttribute('role', role); }
 
     if (slot) { element.dataset.portalSlot = slot; }
@@ -63,6 +66,8 @@ export const BodyPortal = ({
 
       if (className) { element.classList.remove(...className.split(' ')); }
 
+      if (id) { element.id = ''; }
+
       if (props['data-testid']) { delete element.dataset.testid; }
     };
   }, [bodyPortalOrderedRefs, className, role, slot, tag]);