Table sorting - accessibility fixes

[rsmithadhoc]

Description

Accessibility fixes for the sortable table.

Details

• Browser zoom in (on desktop) - when zoomed in, content gets cut-off, and there is no way to see it.

  • To remedy this, I believe the container around <table> will need to be made scrollable if there is any overflow, since we aren't going to stack the table like we would for the standard version. It's not the most ideal, ideally it wouldn't require any horizontal scrolling, but it will allow viewing of wider tables.

  display: block;
  width: 100%;
  overflow-x: auto;
  

  

• Screen readers (all)/title text on buttons: If a column has been sorted in ascending order, then you tab to the next unsorted column with the double arrow the title says "Click to sort (column name) in descending order", but when you click it, it sorts in ascending order.
  Before:
  
  After:
  

• Screen readers (all) - does not announce when the table is sorted. Currently, it sorts, but then reads out the button's new title attribute. We have aria-live="polite" SR text in there, but I believe focusing the button is overriding the reading of that text. I believe we do that because of a re-render of the table. We do want to maintain focus on the button, but I'm not sure how we can avoid re-rendering.

  • NVDA + Firefox & Narrator + Edge - sorting the table will repeat the table description "this is a sortable table with 5 rows and 8 columns", then reads the button title. I believe this is also from re-rendering.

Tasks

• Fix accessibility issues.

Acceptance Criteria

• Accessibility issues have been fixed.

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc