Skip to content

DefaultListItemBackground: use outline only to show focus

Part of teams/vdg/issues#32 and teams/vdg/issues#37.

Currently we use an outline for only the hovered states of these list items. Unfortunately it is inconsistent with everything:

  • In Plasma list items, outlines are used for hover and selection states, but not the pressed state. When focus is locked to selection, the focused state gets an outline too (since it's using the selection state.
  • In Menu items, outlines are used for hover and pressed states, which are visually identical, and focus is also locked to them.
  • In QtWidgets list items, outlines are not used at all (though this is something we do eventually want to change, but it's currently technically challenging).

It's all a bit of a mess and in need of unification; see the Invent issues linked above.

This commit moves towards that unification by implementing one of the things that there was universal agreement on in teams/vdg/issues#32: that we should use outlines only to indicate keyboard focus.

Implementation-wise, the outline color now uses the FocusColor from the theme, as also discussed. And I decided to make the outline thickness 2px rather than 1, since a 1px line was often quite hard to see against the list item background.

Before (top item focused, bottom item hovered) After (top item focused, bottom item hovered)
Before After

@teams/vdg @teams/usability @teams/accessibility

Merge request reports