Sorting lists

[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:

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.

[CharlotteDowns]

This seems to be a specific execution related to the pattern #133 Filter a list