Skip to content

Global Search - Header Search Keyboard Control

Zack Cuddy requested to merge 297396_05_1-gldropdown-topbar-keyboard-nav into master

Intro

This change is broken off from !66007 (closed)
Additionally this change is further split off from a larger Approved A11y MR !70222 (merged)
Work towards #297396 (closed)

This change is behind a feature flag (:new_header_search)
Feature Flag Rollout Issue: #339348 (closed)

This end goal here is to replace the large deprecated jquery component used for the Header Search: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/search_autocomplete.js

Replacing it with GitLab UI will allow us to add features more effectively as well as true up the styles permanently by using the GitLab UI component.

What does this MR do and why?

This MR is the 5th of 6 MRs to fully refactor the deprecated component mentioned above. This MR is actually split off from the A11Y issue that is approved and waiting this MR's merge: !70222 (merged).

Here we are fulfilling the A11y requirement of full keyboard and arrow key navigation on the Header Search dropdown.

IMPORTANT: No aria tags have been added here. In the following MR we add the screen reader requirements.

Here is a full roadmap for when the missing features will be added: #297396 (comment 665578315)

Screenshots or screen recordings

Example of Keyboard A11y

Example

How to setup and validate locally (strongly suggested)

  1. Fetch and checkout this branch
  2. From your GDK terminal, access the rails console by typing rails c
  3. Enable the feature flag by typing Feature.enable(:new_header_search)
  4. Navigate to your GDK homepage (http://127.0.0.1:3000/)

Dropdown focus

  1. Ensure clicking on the search box shows dropdown
  2. Ensure clicking off the dropdown/search box hides dropdown
  3. Ensure tabbing on the search box shows dropdown
  4. Ensure tabbing off the search box hides the dropdown

Clear button

  1. Focus the search field
  2. Type in a search
  3. Tab to the clear button
  4. Ensure dropdown hides
  5. Press enter
  6. Ensure search box clears, gets re-focused, and dropdown re-shows

Arrow Keys

  1. Focus the search field
  2. Optionally search/clear searches
  3. Ensure arrow keys allow you to navigate up/down on the dropdown
  4. Ensure you are able to continue to type in the search even when arrow keyed down on an item
  5. Ensure you are able to arrow key all the way up and re-focus the search field
  6. Hit enter on a focused dropdown item and ensure it navigates to where you expect

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Zack Cuddy

Merge request reports