From 38e9d34c87440f23ae822a3b56bf7313dae54134 Mon Sep 17 00:00:00 2001
From: AK <144495202+AKnassa@users.noreply.github.com>
Date: Sat, 1 Aug 2026 03:23:43 -0400
Subject: [PATCH] docs(react-examples): fix GroupedList example a11y

The GroupedList 'custom header and footer' examples (V1 and V2)
return role-less divs from onRenderHeader/onRenderFooter. Those land
directly inside the role="treegrid" list, which only allows row and
rowgroup children, so accessibility scanners flag
aria-required-children and screen readers get a malformed grid.

Give the custom header and footer the same semantics as the built-in
GroupHeader row: role="row" with a role="gridcell" child, plus
aria-level/setsize/posinset/expanded on the header (the props are
already populated by both GroupedList versions). Visual output is
unchanged - the added inner divs are unstyled.

Verified: header/footer now carry row+gridcell semantics and axe
aria-structure rules pass on the rendered example; the react-examples
build (CI type gate) succeeds; lint and prettier clean. The built-in
GroupFooterBase has the same flaw at component level - left for a
follow-up since changing component DOM could affect consumers.

Fixes #33765
---
 .../GroupedList.Custom.Example.tsx            | 35 +++++++++++++------
 .../GroupedListV2.Custom.Example.tsx          | 35 +++++++++++++------
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/packages/react-examples/src/react/GroupedList/GroupedList.Custom.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedList.Custom.Example.tsx
index b6788ac6874214..559863e6e6997b 100644
--- a/packages/react-examples/src/react/GroupedList/GroupedList.Custom.Example.tsx
+++ b/packages/react-examples/src/react/GroupedList/GroupedList.Custom.Example.tsx
@@ -36,16 +36,25 @@ const onRenderHeader = (props?: IGroupHeaderProps): JSXElement | null => {
       props.onToggleCollapse!(props.group!);
     };
     return (
-      <div className={classNames.header}>
-        This is a custom header for {props.group!.name}
-        &nbsp; (
-        <Link
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick={toggleCollapse}
-        >
-          {props.group!.isCollapsed ? 'Expand' : 'Collapse'}
-        </Link>
-        )
+      <div
+        className={classNames.header}
+        role="row"
+        aria-level={props.ariaLevel}
+        aria-setsize={props.ariaSetSize}
+        aria-posinset={props.ariaPosInSet}
+        aria-expanded={!props.group!.isCollapsed}
+      >
+        <div role="gridcell">
+          This is a custom header for {props.group!.name}
+          &nbsp; (
+          <Link
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick={toggleCollapse}
+          >
+            {props.group!.isCollapsed ? 'Expand' : 'Collapse'}
+          </Link>
+          )
+        </div>
       </div>
     );
   }
@@ -64,7 +73,11 @@ const onRenderCell = (nestingDepth?: number, item?: IExampleItem, itemIndex?: nu
 };
 
 const onRenderFooter = (props?: IGroupFooterProps): JSXElement | null => {
-  return props ? <div className={classNames.footer}>This is a custom footer for {props.group!.name}</div> : null;
+  return props ? (
+    <div className={classNames.footer} role="row">
+      <div role="gridcell">This is a custom footer for {props.group!.name}</div>
+    </div>
+  ) : null;
 };
 
 const groupedListProps = {
diff --git a/packages/react-examples/src/react/GroupedList/GroupedListV2.Custom.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedListV2.Custom.Example.tsx
index f9fdf4ef10bc80..b64480df3cd161 100644
--- a/packages/react-examples/src/react/GroupedList/GroupedListV2.Custom.Example.tsx
+++ b/packages/react-examples/src/react/GroupedList/GroupedListV2.Custom.Example.tsx
@@ -37,16 +37,25 @@ const onRenderHeader = (props?: IGroupHeaderProps): JSXElement | null => {
       props.onToggleCollapse!(props.group!);
     };
     return (
-      <div className={classNames.header}>
-        This is a custom header for {props.group!.name}
-        &nbsp; (
-        <Link
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick={toggleCollapse}
-        >
-          {props.group!.isCollapsed ? 'Expand' : 'Collapse'}
-        </Link>
-        )
+      <div
+        className={classNames.header}
+        role="row"
+        aria-level={props.ariaLevel}
+        aria-setsize={props.ariaSetSize}
+        aria-posinset={props.ariaPosInSet}
+        aria-expanded={!props.group!.isCollapsed}
+      >
+        <div role="gridcell">
+          This is a custom header for {props.group!.name}
+          &nbsp; (
+          <Link
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick={toggleCollapse}
+          >
+            {props.group!.isCollapsed ? 'Expand' : 'Collapse'}
+          </Link>
+          )
+        </div>
       </div>
     );
   }
@@ -65,7 +74,11 @@ const onRenderCell = (nestingDepth?: number, item?: IExampleItem, itemIndex?: nu
 };
 
 const onRenderFooter = (props?: IGroupFooterProps): JSXElement | null => {
-  return props ? <div className={classNames.footer}>This is a custom footer for {props.group!.name}</div> : null;
+  return props ? (
+    <div className={classNames.footer} role="row">
+      <div role="gridcell">This is a custom footer for {props.group!.name}</div>
+    </div>
+  ) : null;
 };
 
 const groupedListProps = {