Skip to content

Refine active + focus states for existing interaction layer elements

Created by: quinnkeast

🚨 This is a draft and not final

As part of our effort to improve accessibility and usability, we're looking at systemizing and improving how we handle focus states across Sourcegraph.

This step in the process is about refining the .selected and :focus states for existing "application area" elements.

Dropdown menu:

CleanShot 2021-03-11 at 13 09 48@2x

File sidebar:

CleanShot 2021-03-11 at 13 10 22@2x

Full writeup and design specs can be found in Figma.

For the first actionable steps, we need to update focus states for the following components:

Action items

  • Implement :focus-within state for dropdowns
  • Implement :focus state for dropdown items
  • Update :focus state for file and symbol panel items
  • Update :focus state for definition and references sidebar items

Once we have implemented and finalized these focus states, we will add them to the component library in Figma.