[ben-basten]

Description

Implement arrow key navigation in the main search dropdown.

Other accessibility improvements include:

• adding a "search" landmark for screen reader users to quickly find the search bar
• changing the focus order of the buttons in the search bar to be more predictable: text input -> advanced filters button -> clear text button -> execute search button
• filtering down recent search suggestions as you type

Also in this change:

• prevent duplicate entries in the recent searches
• search bar outline always changes color to show that it is active
• the search page loads with the search query pre-populated inside of the search bar
• only show the "Clear all" button if no text is inputted in the search bar yet
• add subtle search bar animations for the border radius and outline changes

How Has This Been Tested?

• Tested using VoiceOver on MacOS with Safari, Firefox, and Chrome.
• Verified the dropdown looks as expected in both light mode and dark mode.

Screenshots (if appropriate):

Inactive

Active, with dropdown closed

Active, with dropdown open

[michelheusschen]

It seems unusual to put the Clear all button as the first option in the recent searches list. What’s the reasoning behind that?

[ben-basten]

I wanted to find a way to give keyboard users the ability to clear recent search options, while keeping the UI the same and making the keyboard interactions simple to allow for the search functionality to change down the road. For example, allowing searching on a user's albums or immich pages (ex. Favorites, Explore, Archive, etc).

This solution is generally inspired by how LinkedIn implemented their search combobox. In my opinion, I like that it makes the clearing functionality easily available without adding additional tab stops, and it's in the flow of a normal dropdown menu that users are already familiar with using.

A downside of this solution is that the button to clear a single search option is currently not keyboard accessible. An idea for this is to make the tabindex of the remove single button dynamic - if that option is aria-selected, set it to 0, else set it to -1. Bing search works similar to this.

I'm open to feedback or ideas for different ways to implement this. Adding the "Clear all" button as the first option certainly isn't the only solution.

[michelheusschen]

This solution is generally inspired by how LinkedIn implemented their search combobox. In my opinion, I like that it makes the clearing functionality easily available without adding additional tab stops, and it's in the flow of a normal dropdown menu that users are already familiar with using.

I agree with that, but the Clear all button being the first listbox item is confusing because it's announced as "recent searches list - clear all recent searches one of three" I think it makes more sense how LinkedIn does it by putting the button outside the listbox, where it's simply announced as "clear search history button".

[ben-basten]

I think it makes more sense how LinkedIn does it by putting the button outside the listbox, where it's simply announced as "clear search history button".

Yeah, I agree that announcing the button without the count is easier to understand. Thanks for your feedback, I will fix this!

[ben-basten]

FYI @michelheusschen and @alextran1502, I will be working on a follow-up PR for this next week to resolve this feedback, as I didn't get the fix in before it was merged.

I plan to clean up how the screen reader is announcing the "Clear all" button, and I have some code in progress.

[alextran1502]

Thank you for your work on this! Just a nitpick here, can we make the border really subtle on active state?

[ben-basten]

can we make the border really subtle on active state?

Sure, that's fine. I just bumped the border color in dark mode another step darker to border-gray-700, so it's less obvious. border-gray-800 is so dark that it's almost impossible to see. How's this?

[alextran1502]

Looks good, thank you!