The search component includes an input field, an icon-only search button, and an icon-only clear button (only visible when the field has text), as well as suggested searches displayed while typing.
Although it works well overall, there are significant gaps in keyboard accessibility, and some minor issues related to semantics and markup that require attention.
The structure of the search component
<aside> 💡 Focus indicators are addressed globally in 1.1 Focus indicators, what follows below are additions on top of those suggestions.
</aside>
By using the simple outline indicators, the focus states inside this component will resemble the ones shown in the video below.
Simple orange indicators in the search component
Simple orange indicators in the search component
While the outline indicators are visible and meet the necessary contrast requirements, they do have some aesthetic issues. With the exception of the search button, they do not perfectly conform to the shape of the elements, and in some cases, they may be partially cut off. To enhance their appearance, let's explore ways to improve them.
To enhance the appearance of the search field, I suggest moving the padding from the wrapper element to the input and adjusting the sizes and border radiuses of the affected elements. These small modifications can significantly improve the visual appeal of the search field as seen below.
Enhanced indicator on the search field
As for the clear button, while it could be made to look similar to the search button next to it, for the sake of showing different examples, I’m making it round and applying a soft grey background color.
Enhanced indicator on the clear button
The active search query suggestion is indicated by a #282828 background, but the contrast ratio between this and the non-active #333333 background is only 1.26:1, below the required 3:1 for accessibility.