[docs] Collapsible table example is unusable with VoiceOver

[mj12albert]

Link: https://mui.com/material-ui/react-table/#collapsible-table

1. Without expanding anything, rows are skipped from announcement

At ~ 00:25s, when moving away from the last cell of the "Ice cream sandwich" row with VO+Right Arrow, "Cupcake" is read, the "Eclair" row is skipped entirely. Row numbers are also wrong.

Screen.Recording.2025-06-20.at.12.44.28.PM.mov

2. Expanded rows are skipped from announcement

At ~ 00:30s, when moving away from the last cell of the "Ice cream sandwich" row with VO+Right Arrow, both the "Ice cream sandwich" details row and "Eclair" are skipped

Untitled.mov

Search keywords:

[mj12albert]

I stumbled onto these issues while testing collapsible table patterns in mui/base-ui#2116

Coincidentally some folks in the discord are using this Material UI example as a reference.

Due to the SR issues I don't think we should continue to promote this pattern and should remove the example, what do you think? @aarongarciah @DiegoAndai

[aarongarciah]

@mj12albert is there a more accessible alternative we can use instead of this example? I assume this is a popular pattern.

[mj12albert]

is there a more accessible alternative we can use instead

I think at a minimum it requires a complete ARIA grid implementation (pretty out of scope) that doesn't use native table elements to work 😅 @aarongarciah

Like the X Data grid master-detail example: https://mui.com/x/react-data-grid/master-detail/#what-is-the-master-detail-pattern

I quickly tested that, and when nothing is expanded, everything seems to work correctly. The only issue was that it was impossible to move VO into any detail row (should I open an issue?😅 @michelengelen )

[michelengelen]

I quickly tested that, and when nothing is expanded, everything seems to work correctly. The only issue was that it was impossible to move VO into any detail row (should I open an issue?😅 @michelengelen )

Oh yes please. 👍🏼

[DiegoAndai]

Due to the SR issues I don't think we should continue to promote this pattern and should remove the example, what do you think?

How feasible do you think it is to fix this demo? Could we add the ready-to-take label and see if anyone in the community is willing to give it a try? We can add a warning in the docs in the meantime to indicate that this demo is lacking accessibility features.

[thelulzy]

I was hoping you could use the component prop to make the Collapse component render as a TableRow, but it looks like that results in collapse wrappers getting between the <tr> generated by the TableRow and any <td> elements you try to place inside of it. This results in the content of the <tr> violating the HTML tr element content model. With these collapse wrappers I'm not sure there's any way to make a fully collapsible row.

  return (
    <React.Fragment>
      <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {row.name}
        </TableCell>
        <TableCell align="right">{row.calories}</TableCell>
        <TableCell align="right">{row.fat}</TableCell>
        <TableCell align="right">{row.carbs}</TableCell>
        <TableCell align="right">{row.protein}</TableCell>
      </TableRow>
      <Collapse component={TableRow} in={open} timeout="auto" unmountOnExit>
        <Box component={TableCell} sx={{ margin: 1 }} colSpan={6}>
          <Typography variant="h6" gutterBottom component="div">
            History
          </Typography>
          <Table size="small" aria-label="purchases">
            <TableHead>
              <TableRow>
                <TableCell>Date</TableCell>
                <TableCell>Customer</TableCell>
                <TableCell align="right">Amount</TableCell>
                <TableCell align="right">Total price ($)</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {row.history.map((historyRow) => (
                <TableRow key={historyRow.date}>
                  <TableCell component="th" scope="row">
                    {historyRow.date}
                  </TableCell>
                  <TableCell>{historyRow.customerId}</TableCell>
                  <TableCell align="right">{historyRow.amount}</TableCell>
                  <TableCell align="right">
                    {Math.round(historyRow.amount * row.price * 100) / 100}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Box>
      </Collapse>
    </React.Fragment>
  );