From f526f7163929f25487e49711a85ea1d13df885e9 Mon Sep 17 00:00:00 2001
From: Seo Minsu <minsu9812@naver.com>
Date: Mon, 19 Jan 2026 01:41:59 +0900
Subject: [PATCH 1/3] fix(docs): prevent VoiceOver from skipping collapsible
 table rows

---
 .../material/components/table/CollapsibleTable.js    | 12 ++++++++++--
 .../material/components/table/CollapsibleTable.tsx   | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/components/table/CollapsibleTable.js b/docs/data/material/components/table/CollapsibleTable.js
index 09f05d9a720190..35c4bc3841019c 100644
--- a/docs/data/material/components/table/CollapsibleTable.js
+++ b/docs/data/material/components/table/CollapsibleTable.js
@@ -40,6 +40,7 @@ function createData(name, calories, fat, carbs, protein, price) {
 function Row(props) {
   const { row } = props;
   const [open, setOpen] = React.useState(false);
+  const [exited, setExited] = React.useState(true);
 
   return (
     <React.Fragment>
@@ -47,6 +48,7 @@ function Row(props) {
         <TableCell>
           <IconButton
             aria-label="expand row"
+            aria-expanded={open}
             size="small"
             onClick={() => setOpen(!open)}
           >
@@ -61,9 +63,15 @@ function Row(props) {
         <TableCell align="right">{row.carbs}</TableCell>
         <TableCell align="right">{row.protein}</TableCell>
       </TableRow>
-      <TableRow>
+      <TableRow sx={{ display: open || !exited ? 'table-row' : 'none' }}>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
+          <Collapse
+            in={open}
+            timeout="auto"
+            unmountOnExit
+            onEnter={() => setExited(false)}
+            onExited={() => setExited(true)}
+          >
             <Box sx={{ margin: 1 }}>
               <Typography variant="h6" gutterBottom component="div">
                 History
diff --git a/docs/data/material/components/table/CollapsibleTable.tsx b/docs/data/material/components/table/CollapsibleTable.tsx
index bc906b577d6d7c..6ca107bcc162c0 100644
--- a/docs/data/material/components/table/CollapsibleTable.tsx
+++ b/docs/data/material/components/table/CollapsibleTable.tsx
@@ -46,6 +46,7 @@ function createData(
 function Row(props: { row: ReturnType<typeof createData> }) {
   const { row } = props;
   const [open, setOpen] = React.useState(false);
+  const [exited, setExited] = React.useState(true);
 
   return (
     <React.Fragment>
@@ -53,6 +54,7 @@ function Row(props: { row: ReturnType<typeof createData> }) {
         <TableCell>
           <IconButton
             aria-label="expand row"
+            aria-expanded={open}
             size="small"
             onClick={() => setOpen(!open)}
           >
@@ -67,9 +69,15 @@ function Row(props: { row: ReturnType<typeof createData> }) {
         <TableCell align="right">{row.carbs}</TableCell>
         <TableCell align="right">{row.protein}</TableCell>
       </TableRow>
-      <TableRow>
+      <TableRow sx={{ display: open || !exited ? 'table-row' : 'none' }}>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
+          <Collapse
+            in={open}
+            timeout="auto"
+            unmountOnExit
+            onEnter={() => setExited(false)}
+            onExited={() => setExited(true)}
+          >
             <Box sx={{ margin: 1 }}>
               <Typography variant="h6" gutterBottom component="div">
                 History

From 317c748b0eb116f1f9b494e020fe04ad2d7f84fe Mon Sep 17 00:00:00 2001
From: Seo Minsu <minsu9812@naver.com>
Date: Mon, 19 Jan 2026 20:01:37 +0900
Subject: [PATCH 2/3] fix(docs): avoid visual regression while fixing VoiceOver
 row skipping

---
 docs/data/material/components/table/CollapsibleTable.js  | 2 +-
 docs/data/material/components/table/CollapsibleTable.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/material/components/table/CollapsibleTable.js b/docs/data/material/components/table/CollapsibleTable.js
index 35c4bc3841019c..ab1d1d4de70e8b 100644
--- a/docs/data/material/components/table/CollapsibleTable.js
+++ b/docs/data/material/components/table/CollapsibleTable.js
@@ -63,7 +63,7 @@ function Row(props) {
         <TableCell align="right">{row.carbs}</TableCell>
         <TableCell align="right">{row.protein}</TableCell>
       </TableRow>
-      <TableRow sx={{ display: open || !exited ? 'table-row' : 'none' }}>
+      <TableRow aria-hidden={!open && exited ? true : undefined}>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse
             in={open}
diff --git a/docs/data/material/components/table/CollapsibleTable.tsx b/docs/data/material/components/table/CollapsibleTable.tsx
index 6ca107bcc162c0..29ae9d12572911 100644
--- a/docs/data/material/components/table/CollapsibleTable.tsx
+++ b/docs/data/material/components/table/CollapsibleTable.tsx
@@ -69,7 +69,7 @@ function Row(props: { row: ReturnType<typeof createData> }) {
         <TableCell align="right">{row.carbs}</TableCell>
         <TableCell align="right">{row.protein}</TableCell>
       </TableRow>
-      <TableRow sx={{ display: open || !exited ? 'table-row' : 'none' }}>
+      <TableRow aria-hidden={!open && exited ? true : undefined}>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse
             in={open}

From 9e138c73d3d22a6d97a1b6702ef9d6eeeab37b23 Mon Sep 17 00:00:00 2001
From: Seo Minsu <minsu9812@naver.com>
Date: Fri, 14 Aug 2026 22:08:30 +0900
Subject: [PATCH 3/3] Simplify aria-hidden and link the expand button to the
 detail row

Address review feedback:
- drop the exited state and derive aria-hidden from open only
- narrate expand/collapse in the button aria-label
- link the button to the detail row with aria-controls and an id

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../material/components/table/CollapsibleTable.js | 15 +++++----------
 .../components/table/CollapsibleTable.tsx         | 15 +++++----------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/docs/data/material/components/table/CollapsibleTable.js b/docs/data/material/components/table/CollapsibleTable.js
index 9b1c3b685cdf09..90907ff473f552 100644
--- a/docs/data/material/components/table/CollapsibleTable.js
+++ b/docs/data/material/components/table/CollapsibleTable.js
@@ -40,15 +40,16 @@ function createData(name, calories, fat, carbs, protein, price) {
 function Row(props) {
   const { row } = props;
   const [open, setOpen] = React.useState(false);
-  const [exited, setExited] = React.useState(true);
+  const detailsId = React.useId();
 
   return (
     <React.Fragment>
       <TableRow sx={{ '& > .MuiTableCell-root': { borderBottom: 'unset' } }}>
         <TableCell>
           <IconButton
-            aria-label="expand row"
+            aria-label={open ? 'collapse row' : 'expand row'}
             aria-expanded={open}
+            aria-controls={detailsId}
             size="small"
             onClick={() => setOpen(!open)}
           >
@@ -63,15 +64,9 @@ function Row(props) {
         <TableCell align="right">{row.carbs}</TableCell>
         <TableCell align="right">{row.protein}</TableCell>
       </TableRow>
-      <TableRow aria-hidden={!open && exited ? true : undefined}>
+      <TableRow id={detailsId} aria-hidden={!open ? true : undefined}>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-          <Collapse
-            in={open}
-            timeout="auto"
-            unmountOnExit
-            onEnter={() => setExited(false)}
-            onExited={() => setExited(true)}
-          >
+          <Collapse in={open} timeout="auto" unmountOnExit>
             <Box sx={{ margin: 1 }}>
               <Typography variant="h6" gutterBottom component="div">
                 History
diff --git a/docs/data/material/components/table/CollapsibleTable.tsx b/docs/data/material/components/table/CollapsibleTable.tsx
index b5e33ce0171382..cf76d887ef2b57 100644
--- a/docs/data/material/components/table/CollapsibleTable.tsx
+++ b/docs/data/material/components/table/CollapsibleTable.tsx
@@ -46,15 +46,16 @@ function createData(
 function Row(props: { row: ReturnType<typeof createData> }) {
   const { row } = props;
   const [open, setOpen] = React.useState(false);
-  const [exited, setExited] = React.useState(true);
+  const detailsId = React.useId();
 
   return (
     <React.Fragment>
       <TableRow sx={{ '& > .MuiTableCell-root': { borderBottom: 'unset' } }}>
         <TableCell>
           <IconButton
-            aria-label="expand row"
+            aria-label={open ? 'collapse row' : 'expand row'}
             aria-expanded={open}
+            aria-controls={detailsId}
             size="small"
             onClick={() => setOpen(!open)}
           >
@@ -69,15 +70,9 @@ function Row(props: { row: ReturnType<typeof createData> }) {
         <TableCell align="right">{row.carbs}</TableCell>
         <TableCell align="right">{row.protein}</TableCell>
       </TableRow>
-      <TableRow aria-hidden={!open && exited ? true : undefined}>
+      <TableRow id={detailsId} aria-hidden={!open ? true : undefined}>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-          <Collapse
-            in={open}
-            timeout="auto"
-            unmountOnExit
-            onEnter={() => setExited(false)}
-            onExited={() => setExited(true)}
-          >
+          <Collapse in={open} timeout="auto" unmountOnExit>
             <Box sx={{ margin: 1 }}>
               <Typography variant="h6" gutterBottom component="div">
                 History