Sortable table

[RoseSAK]

Existing

• MoJ Pattern Library sortable table component - https://design-patterns.service.justice.gov.uk/components/sortable-table/
• Sortable table component Google doc
• There is no sortable table component in the GOVUK design system, and as far as I can see there are no relevant discussions in the backlog either

Use case: When the user needs to see and sort through a lot of data.

Alternative option

In Apply we have our own version of a sortable and responsive table.

This table appears on two pages in the provider pathway in our service (see images below):

• On the applications dashboard, which is the main page providers see when they log in. On this page they can see all their applications. The sortable table enables them to sort and find applications easily
• Categorise bank transactions pages. On these pages, the provider views and selects bank transactions from a large dataset. The sortable table component here is used in conjunction with the multi-select component from the MoJ pattern library: https://design-patterns.service.justice.gov.uk/components/multi-select/

User research and motivation

We implemented this table as the one from the MoJ pattern library didn't test well in our user research - the arrows were too small and close to the text and it wasn't obvious when a column is sorted. Unfortunately this was a long time ago and we can't find the actual research write ups to substantiate this. However, our version of the sortable table has been used in our service on two pages for over two years now and we have not had any negative feedback on it in user research.

One thing we have found from user research on the categorise transactions page is that users don't tend to use the sort functionality. We are hoping to probe this in our next round of user research.

Examples

Screenshots of the sortable table implemented in the Apply service. All data is fake.

Applications dashboard

Categorise transactions

Accessibility

For keyboard navigation, users can tab into the table as usual. There is a screenreader message describing the table and the columns by which it can be sorted. Tabbing takes the user across the column headers and then down through the table. Pressing 'Enter' while focused on a column header will sort the table by that column, and trigger a screenreader message indicating that the table is now sorted by that column and the direction of sort. For example: 'sorted by LAA Reference Number, ascending'.

Known issues

• The table has a caption which is read out by a screenreader, informing the user that the table is sortable and by which values/columns. One problem is that this caption is read out twice. We don't know why this is.
• For the table to display nicely on smaller screens, the columns are merged below a certain breakpoint (width 550). However for this to work properly there is an extra column in between each pair of columns which merge together. We add the class 'nullcell' and set aria-hidden=true so that the cell is hidden from keyboard navigation but WAVE flags it as an error since the table column header is empty.

Implementation

The table uses the standard table classes from the GOVUK design system table component - https://design-system.service.gov.uk/components/table/

Each column header has classes added which provide the sort behaviour and also make the table responsive.

• CSS can be found here
• JS is here

Example minimal table HTML with relevant classes added (shows the first row of the applications table in the screenshot above):

<table class="govuk-table sortable table-merge_columns">
    <caption class="govuk-visually-hidden"><%= t('.table_description') %></caption>
    <thead class="govuk-table__head">
        <tr class="govuk-table__row">
          <th role="columnheader" scope="col" data-sort-type="alphabetic" class="govuk-table__header sort js-sortable 
                 header-sort-desc" tabindex="0" aria-sort="descending">
                 <span class="aria-sort-description">Name</span>
                 <span class="govuk-visually-hidden">, button</span>
                 <span class="sort-direction-indicator"></span>
         </th>
         <th role="columnheader" scope="col" data-sort-type="date" class="govuk-table__header sort js-sortable 
                 header-sort-desc" tabindex="0" aria-sort="descending">
                 <span class="aria-sort-description">Start date</span>
                 <span class="govuk-visually-hidden">, button</span>
                 <span class="sort-direction-indicator"></span>
         </th>
         <th role="columnheader" scope="col" data-sort-type="alphabetic" class="govuk-table__header sort js-sortable 
                 header-sort-desc" tabindex="0" aria-sort="descending">
                 <span class="aria-sort-description">LAA Reference</span>
                 <span class="govuk-visually-hidden">, button</span>
                 <span class="sort-direction-indicator"></span>
         </th>
        <th class="nullcell" aria-hidden="true"></th>
         <th role="columnheader" scope="col" data-sort-type="alphabetic" class="govuk-table__header sort js-sortable 
                 header-sort-desc" tabindex="0" aria-sort="descending">
                 <span class="aria-sort-description">Certificate Type</span>
                 <span class="govuk-visually-hidden">, button</span>
                 <span class="sort-direction-indicator"></span>
         </th>
         <th role="columnheader" scope="col" data-sort-type="alphabetic" class="govuk-table__header sort js-sortable 
                 header-sort-desc" tabindex="0" aria-sort="descending">
                 <span class="aria-sort-description">Status</span>
                 <span class="govuk-visually-hidden">, button</span>
                 <span class="sort-direction-indicator"></span>
         </th>
         <th scope="col" class="govuk-table__header"><span class="aria-sort-description">Action</span></th>
       </tr>
    </thead>
    <tbody class="govuk-table__body">
        <tr class="govuk-table__row">
            <td class="govuk-table__cell sortable-cell" data-sort-value="Tom  Walker">Tom  Walker</td>
            <td class="govuk-table__cell sortable-cell table-combine_right_if_narrow narrow_555" data-sort-value="1620908922">13 May 2021</td>
            <td class="govuk-table__cell sortable-cell">L-5W2-8UK</td>
            <td class="nullcell" aria-hidden="true"></td>
            <td class="govuk-table__cell sortable-cell table-combine_right_if_narrow narrow_555" data-sort-value="true"> Emergency<br><span class="govuk-body-s">Substantive due: 31 Mar 2021</span></td>
            <td class="govuk-table__cell sortable-cell" data-sort-value="In progress"><strong class="govuk-tag no-wrap govuk-tag--blue">In progress</strong></td>
            <td><a class="govuk-button govuk-button--secondary govuk-!-margin-bottom-0" suffix=" application L-5W2-8UK for Tom Walker" aria-label="Delete  application L-5W2-8UK for Tom  Walker" href="/delete">Delete</a></td>
        </tr>
    </tbody>
</table>
<div id="screen-reader-messages" class="govuk-visually-hidden" aria-live="polite" role="region"></div>

[JamieTurnerIPO]

Hi MOJ team, we borrowed this component for some of our services at the IPO and hit a snag with accessibility testing. Sharing our resolution back here in case it helps anyone else.

The issue was where a screen-reader would read aloud the arrows that are being used to display the current table column sort order, this was occurring due to way the arrows were being rendered through the CSS.

Originally the CSS styles were using the context property with values of Unicode characters (U+25BC and U+25B2) which both have descriptive names ('black down-pointing triangle' and 'black up-pointing triangle'), and due to them being genuine Unicode characters, the screen-reader attempts to announce their descriptive names.

The fix that we implemented was to refactor the CSS styles to use a common technique where different properties are combined to generate shape elements. As these elements are no longer text characters, the screen-reader no longer reads them aloud.