Overview

As the Table component MVP wraps up, we want to revisit the styles and accessibility of non-interactive elements like the table header (th) element. Users interact with the table header (th) element to sort the rows in ascending or descending order. We currently use tabindex <th tabindex="-1"></th> to make the non-interactive element focusable.

Goal

• Improve interactive state styles (hover, active, and focus) when the column is sortable.
• Ensure keyboard navigation allows for keyboard focus on the Table, navigation between table cells in the screen reader, and navigation between interactive elements (<button>).

Keyboard navigation

Refer to "Keyboard shortcuts" in Table - Figma spec v8.

• Key T was removed from the design spec because it's not universally recognized by screen readers.
• Arrow keys ('ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight') for screen reader only.
• Key tab / tab + shift to navigate between interactive elements.
• Key enter on a focused table header button to trigger the sorting.

Exploration: Use buttons in Table column headers

We could explore other solutions to make Table more accessible. As per ARIA Authoring Practices Guide (APG), the th element wraps a button as seen in Sortable Table Example.

<th>
 <button>
  First Name
 </button>
</th>

Notes:

• Refer to the "Accessibility" section from T360078.
• As Volker noted, similar logic can be found in Tabs.

Acceptance Criteria

• Create a PoC patch that explores using buttons within the th element. (This should be time-boxed.)
• Remove native <button> styles like background color, border, and outline.
• Update the interactive state styles (hover, active, focus) as needed to match the Figma spec.
• Enable the <table> element to be focused and included in the tab order via tabindex attribute.
• Share findings with the team.
• Implement changes ---

Findings

Screen reader

What improved the screen reader experience:

• Following guidelines on the HTML structure of table elements and attributes.
  • Tables for visually impaired users (MDN)
    • using column and row headers (More info: table header (<th>) elements)
    • using the scope attribute
  • Note: Recent structural change where we added the <tr> element to the <thead>. This <tr> wraps all the table headers(<th>) within the <thead>.
• Screen readers already have a way to navigate to the table and navigate within the table using the screen reader shortcut keys, so don't worry about trying to make things focusable for screen reader users. ( Reference: StackOverflow)

Prior screen reader experiences

When focused on the table header (<th>) that is without the parent <tr> element, the screen reader reads aloud:

• "blank"
• "blank, sort down"

When focused on the table header (<th>) element with the parent <tr> element, the screen reader reads aloud:

• "Year, has keyboard focus"
• "Entering Recent Nobel laureates in Economic Sciences table. Year, Recent Nobel laureates in Economic Sciences, table, 4 columns, 8 rows"

Current screen reader experience:

When on the <button> inside the table header, the screen reader reads aloud:

• "Entering Recent Nobel laureates in Economic Sciences table. Year, button, Recent Nobel laureates in Economic Sciences, table, 4 columns, 8 rows"
• "Last name, button"
• "You are currently on a button, inside of a cell..."