Global Search - Replace deprecatedJqueryDropdown with GlDropdown
What
The dropdown in question is here:
We found some bugs to the JavaScript event handlers found in the legacy dropdown. More can be read here: #254409 (comment 482784426)
We also are wanting to add enhancements to the dropdown here: #284139 (closed)
Why
The root cause of the bug seems to be missing event handlers in the deprecated component. Adding a fix to a deprecated component seems like a poor use of time since we should be moving away from it when possible. Since the bug is pretty niche and we also have enhancements to the component already slotted. I felt that going ahead and replacing the component with Pajama's GlDropdown seems like the best approach. We can hit a few birds with one stone by doing so.
How
My recommendation is to do this iteratively behind a feature flag so we can be sure to regression in production as well as be sure that all the existing functionality makes it over into the updated component.
Proposed Feature Flag - (:global-search-updated-dropdown
)
File to be replaced: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/search_autocomplete.js
Release Notes
Previously the Header Search located on almost every page in GitLab has existed with several missing features, especially when it comes to Accessibility (A11y). You may have noticed issues such as the tab and arrow keys both focusing different options in the header search. There was also zero Screen Reader support making it impossible for users to navigate it without sight. Finally there was the rare issue where the legacy architecture made it so the header search didn't work at all and left the user without any visual cues.
When using the new and improved Header Search you will immediately notice the proper keyboard functionality. You will be able to properly navigate the Header and Search with your tab and arrow keys. Additionally there is now full Screen Reader support allowing for navigation without any visual cues. Along with this we have added numerous performance increases through our up to date component architecture. This new architecture will allow for more exciting functionality to be added in the near future!
In the coming days CE customers will begin to see the new search live on GitLab.com. EE customers will have to wait a bit for a full release but can activate it now with the instance feature flag :new_header_search
Empty Search | W/ Search | A11y Demo |
---|---|---|
A11y_Support |