Accessible expanding/collapsing table

This is an accessible table that supports expanding/collapsing the last cell using flexbox instead of colspan. Most other implementations of this patttern simply add a new row with a td element and a colspan attribute to accomplish the same task, but this removes the column header relationship, removes the row context, and creates a weird kind of combination data/layout table.

Notes and concerns

• ARIA table roles are attached to all native elements. Without this, some screen readers (VO) would not read the table correctly, due to display: flex being used.
• The column header for the last row is visually hidden using css, so that it is still available to screen reader users
• The button to show more details has an aria-expanded attribute, and the state changes as it is pressed
• Tested and works in VO for mac + Safari, VO + sfari for iOS, NVDA + FF, JAWS+IE11
• Disadvantage: being a table, this will still have accessibility issues if the expanded cell contains a nested table or other such pattern that causes screen reader compatibility issues
• The best solution is to avoid this pattern entirely due to the possibility of screen reader compatability issues and weird hybrid data/layout tableness

Created by Michael Fairchild. Props to @shaderpixel for some flexbox advice.