Skip to content

Improve the contrast of the Search Box in GitLab Navbar

Problem to solve

As discussed here, #324134 (comment 572559795)

The current navbar search field fails accessibility checks. Since we do not include a label with this field, this makes it even more important to meet these guidelines for the placeholder text. It has also been observed that users often miss the search field in our navbar (&8275), which improving the contrast could also help with.

Example of insufficient contrast: Screen_Shot_2021-05-10_at_2.21.05_PM

Search Field Current Default State (all themes) Current

Proposal

Update the navbar search field styles to meet accessibility guidelines. See designs below.

Implementation Guide

Link to designs in Figma

  • Update the GitLab project to use the theme color variables from GitLab UI. (#336146 (closed))
  • Update the themes to use the 100 variant for the navbar links ($search-and-nav-links variable)
    • Indigo (and Light Indigo) would use theme-indigo-100, Light Blue would use theme-light-blue-100, etc.
    • Light theme will use gray-500
    • Dark and Dark Mode themes will use gray-100
  • For all themes (except Light - see design in Figma), use the following styles for the search field:
    • Default
      • box-shadow: inset 0 0 0 1px 100 variant of theme color ($search-and-nav-links) at 40% opacity
    • Hover
      • box-shadow: inset 0 0 0 1px 100 variant of theme color ($search-and-nav-links) at 48% opacity
  • For the darker themes (Indigo, Blue, Green, Red, Dark, but not Dark Mode) use the following styles for search field:
    • Default
      • background-color: white 12%
    • Hover
      • background-color: white 20%
  • For the lighter themes (Light Indigo, Light Blue, Light Green, Light Red) as well as Dark Mode, use the following styles for the search field:
    • Default
      • background-color: black 12%
    • Hover
      • background-color: black 20%
  • All themes share a similar focus state (except Dark Mode and Light, which can be found here):
    • Focus
      • background-color: white 100%
      • box-shadow: 0 0 0 1px $navbar-theme-color, 0 0 0 3px $blue-400
      • search icon: $gray-500
      • placeholder text: $gray-500
      • text: $gray-900
  • All themes share a similar placeholder text color (except Light - $gray-500 and Dark Mode - $gray-300):
    • Placeholder
      • 100 variant of theme color at 90% opacity
  • Update the kbd element (/) inside the search field to have the following styles:
    • background-color: white 16% (Light theme uses black 16%)
    • color: 100 variant of theme color (Light uses $gray-500, Dark Mode uses $gray-300)
    • border-radius: 2px
    • padding: 2px 4px
Edited by Nick Brandt