Move inert attribute to an effect (#1204)

* move inert usage to effect

* attempt to trigger canary by simplifying the workflow

* add changeset

* add todo to component, restore repo check for fork protection

Author: rezrah

.changeset/tricky-geese-leave.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+The `inert` attribute applied to unopened `RiverAccordion` items is now set through a runtime DOM manipulation. This helps to bypass type mismatches between React 18 and 19 but has no material impact to the accessibility or rendering of the final markup.

.github/workflows/release.yml

@@ -2,6 +2,9 @@ name: Release
 
 on:
   push:
+    # Ignore merge queue branches (matches primer/react configuration)
+    branches-ignore:
+      - 'gh-readonly-queue/**'
     tags-ignore:
       - '**'
   workflow_dispatch:
@@ -19,7 +22,7 @@ permissions:
 
 jobs:
   release-main:
-    if: ${{ github.repository == 'primer/brand' && github.ref_name == 'main' }}
+    if: github.repository == 'primer/brand' && github.ref_name == 'main'
     name: Main
     runs-on: ubuntu-latest
     steps:
@@ -59,7 +62,7 @@ jobs:
           GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
 
   release-next-minor:
-    if: ${{ github.repository == 'primer/brand' && github.ref_name == 'next-minor' }}
+    if: github.repository == 'primer/brand' && github.ref_name == 'next-minor'
     name: Next minor
     runs-on: ubuntu-latest
     steps:
@@ -99,7 +102,7 @@ jobs:
           GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
 
   release-candidate:
-    if: ${{ github.repository == 'primer/brand' && github.ref_name == 'changeset-release/main' }}
+    if: github.repository == 'primer/brand' && github.ref_name == 'changeset-release/main'
     name: Candidate
     runs-on: ubuntu-latest
     steps:
@@ -145,7 +148,7 @@ jobs:
             })
 
   release-candidate-next-minor:
-    if: ${{ github.repository == 'primer/brand' && github.ref_name == 'changeset-release/next-minor' }}
+    if: github.repository == 'primer/brand' && github.ref_name == 'changeset-release/next-minor'
     name: Next minor candidate (@next-minor)
     runs-on: ubuntu-latest
     steps:
@@ -197,7 +200,7 @@ jobs:
             })
 
   release-canary:
-    if: ${{ github.repository == 'primer/brand' && github.ref_name != 'main' && github.ref_name != 'next-minor' && !startsWith(github.ref_name, 'changeset-release/') }}
+    if: github.repository == 'primer/brand' && github.ref_name != 'main' && github.ref_name != 'next-minor' && github.ref_name != 'changeset-release/main' && github.ref_name != 'changeset-release/next-minor'
 
     name: Canary
     runs-on: ubuntu-latest

package-lock.json

@@ -1,4 +1,4 @@
-import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState} from 'react'
+import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'
 import {clsx} from 'clsx'
 import {PlusIcon} from '@primer/octicons-react'
 
@@ -110,6 +110,16 @@ const RiverAccordionItem = ({className, index, children, ...props}: RiverAccordi
   const {openIndex} = useRiverAccordionContext()
   const panelId = useId()
   const isOpen = index === openIndex
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (panelRef.current) {
+      // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.
+      // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration
+      // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.
+      panelRef.current.toggleAttribute('inert', !isOpen)
+    }
+  }, [isOpen])
 
   const itemContextValue = useMemo(
     () => ({
@@ -157,12 +167,7 @@ const RiverAccordionItem = ({className, index, children, ...props}: RiverAccordi
         {...props}
       >
         {heading}
-        <div
-          className={styles.RiverAccordion__panel}
-          id={panelId}
-          aria-hidden={!isOpen}
-          {...(!isOpen ? ({inert: true} as React.HTMLAttributes<HTMLDivElement>) : undefined)}
-        >
+        <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>
           {content}
           {visual}
         </div>