Table with Expando Rows

• Rows in this table are hidden.
• These are not responsive tables.
• A disclosure widget is used to display them, notably by using display: table-row in order to retain table semantics (instead of display: block).
• This does not announce to screen reader users any new row count immediately on expand/collapse.
• When navigating the table, a screen reader will announce the row number and row count based on how many rows are showing at that time.
• Disclosure control <button> state styles are managed with attribute selectors keyed off that state (button[aria-expanded="true|false"]); this helps ensure visual styles correspond to programmatic state.

Disclosure Control in Cell

• The disclosure control lives in its own cell/column to aid individual discovery, as opposed to within the first content cell/column.
• Each column must have a column heading (<th>) and it should have a useful value.
• The column heading for the disclosure control column is "Toggle" and uses a visually-hidden style (.visually-hidden).
• Since the abbr attribute (not element) on <th> is not supported by NVDA, this prototype excludes it.
• The <button> has an aria-label that identifies how many new rows will be displayed (to manage expectations for SR users).
• The author name in the cell following a disclosure control has an id (on a <span> to avoid conflicts when folded into another implementation) so it can act as an accessible name somewhere.
• The <button> has an aria-labelledby which concatenates its own accessible name and the author name for a human-understandable and useful accessible name ("[n] more items from [author]").
• The arrow points right when the disclosure control is collapsed, down when the disclosure control is expanded; you can change that of course.

Disclosure Control as Entire Row

• The disclosure control lives in a cell spanning all columns to give it a larger hit area.
• The larger disclosure control provides space for text so all users (not just SR users) can get access to the count of new rows.
• Following other block disclosure controls, the arrow points in the direction the container will go — down to expand, up to collapse; you can change that of course.