Skip to content

Sorting lists #228

@edwardhorsford

Description

@edwardhorsford

I thought I'd share what we've done for sorting a list in case it's useful to anyone else. It's very similar (and the markup is slightly borrowed from) the HMRC Welsh language toggle.

Video:
sorting-a-list

Some implementation details:

  • Sorting is just a link that ultimately sets a param in the query string
  • The page uses the query string to work out sorting
  • Make sure to have a default sort order if no query string
  • The links make sure to include any existing query strings (this page has filtering too)
  • We've got some hidden markup to hopefully make this communicate well for screen reader users
  • We're not using aria="current" on the selected item because after a discussion with Leonie Watson on Twitter we were advised that the item not being a link would be sufficient.

For now we've gone with a nav but this might be too verbose. We have an external accessibility audit booked shortly so will report back if it gets flagged.

We chose this over a select for a few reasons:

  • We've only got two options
  • Easier to implement
  • With a select you'd need js to auto-submit or else a submit button

You can find our code for this component here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    componentGoes in the 'Components' section of the Design System

    Type

    No type

    Projects

    Status

    Not published

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions