Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Latest release: Component Library: v56.6.1 released on Jun 9, 2026 | Guidance: Sprint 1 released on Jun 16, 2026 | Figma: Changelog

Components

Sort - Design decisions

Key design decisions for the Sort component.

What is an ADR?

We use the ADR (Architecture Decision Record) to structure design decision documentation. Each ADR covers three things: the context that prompted the decision, the decision itself, and its consequences — including trade-offs and any open questions.

ADR 001 - Add a filter and sort variant to Search Filter component

  • Date raised: January 13, 2026

Context

A request was made to modify the Search Results template so that the Search Bar is more closely associated with the results. The problem is that the Sort component currently occupies that space. A team is proposing that we combine Filter and Sort to resolve this. Combining Sort and Filter could resolve the issue where focus skips Sort when Sort is used with Filter.

Decision

Decision pending.

Consequences

  • Combining Filter and Sort is contraindicated by the original ticket: users must navigate through Filter options to Sort when they simply want to Sort.
  • Filter is placed in the left-side rail, which occupies a lot of horizontal space. Using this type of design for just Sort uses space inefficiently.

ADR 002 - Swap position of Sort component and results description

  • Date raised: January 15, 2026
  • Decision date: January 15, 2026

Context

Current placement of Sort below the Filter creates an issue where its focus can be skipped if a filter is applied. Guidance indicates that focus should move to the Results Description (which is after the Sort component), meaning a screen reader user would have to navigate backwards to use Sort.

Decision

Move Sort below the results description.

This will likely manifest as an update to guidance for Sort placement.

Consequences

No accessibility concerns identified. No design concerns identified.

ADR 003 - Remove mention of Sort in the results description

  • Date raised: January 15, 2026
  • Decision date: January 15, 2026

Context

The current results description mentions the sort, which is redundant (the component will announce sort state). It is also awkward to mention that results are being sorted in a particular way before the sort controls are shown in the reading order. This was originally defined to maintain consistency with the VA mobile app, but the mobile app is required to reflect sort state in results description because it is hidden in a modal. The va-sort component itself acts as the visual indicator on web.

Decision

Remove mention of Sort in the results description.

Edit this page in GitHub (Permissions required)
Last updated: May 15, 2026