Fix keyboard navigation with date token in filtered search
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
In !120160 (merged) we hit a number of accessibility/keyboard usage challenges and decided to release the feature behind a feature flag and address the concerns in a follow-up.
I attempted to resolve some of the issues but I believe the effort will likely involve changes to GitLab UI for both GlDatepicker (maybe event bootstrap vue Datepicker) and GlFilteredSearch (and or GlFilteredSearchToken, GlFilteredSearchTokenSegment etc). Worst case scenario, we may even have to drop GlDatepicker and roll our own.
Here are some of the issues raised (some may have been fixed, but worth retesting all as fixing one is likely to bring out another):
- Can't delete a date token (after pressing backspace and clearing the date entirely it magically re-appears)
- Can't navigate "through" a date token (e.g. when it activates it captures keyboard input and using the arrow keys changes the date instead of moving between tokens in the search bar)
- Can't navigate to a date (in some instances, you could move up, down, and left, but not right)
- When selecting a date filter and operator the datepicker (calendar) doesn't appear (using the mouse it does)
- Selected date in the token can be one-off from the date in the datepicker (token shows July 31, 2024, datepicker shows selected date as July 30, 2024)
/cc @kbychu @francoisrose