Sortable table

[RoseSAK]

Existing

The sortable table component is live in the MoJ Design System.

Use this discussion to suggest changes and improvements to this component.

• 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.

[Whersi]

Ticket number

#259

The details of the ticket is as follows:

Summary

Make the sorted data of a sortable table (https://design-patterns.service.justice.gov.uk/components/sortable-table/) stay sorted for the duration of a user's session.

Motivation

Users interacting with a sorted table refer back to it as part of task completion, and expectation is that it remains in the state they left it in.

Describe alternatives you've considered

Users can re-sort, but this is not a great user experience. It would be much better for work done not to be 'undone' in this instance.

Additional context

The persistent pattern is particularly necessary where the sortable table contains links, as users get 'lost' when returning to the screen.

further comments

We could add a persistent option to sortable (so that it's not default behaviour, for backwards compatibility) that:

Stores the column and sort order whenever the table is sorted
Uses the stored column and order when the page is loaded
We'd need the user to pass in an ID to store it under so that if there are multiple Sortables in an application they don't all persist with the same setting (but by sharing an ID, you could link two identical-in-practice tables).

[Whersi]

Ticket number

#59

The details of the ticket is as follows:

As seen here on smaller screens:

This was raised as a problem in the recent Accessibility Audit. We should add a "Responsive table" component which can be used to wrap tables in a 100% width div with overflow-x: auto;. This will allow tables to be scrollable rather than overflowing outside their parent element or the page in general.

Basically, we should replicate Boostrap's table-responsive class but as moj-table-responsive.

This actually already exists as .moj-scrollable-pane__wrapper: I just spotted it in use on the Filter a list pattern. It also adds a shadow to indicate scrollability, but it's always there: to avoid confusion it should only appear when there is some overflow.

So we just need to:

Fix the shadow
Fully test and make improvements
Document it