warning: this is my first post (and it’s ended up quite long)
As a front end engineer, accessibility is something that we should consider whenever building a component/feature on a site. It just clicked over this COVID weekend — that I could write an article about it.
tl;dr I had to build a simple search component in a narrow space and it didn’t work well with too many results appearing in the drop down. I wanted to find a better solution, so browsed the web for inspiration.
On a recent project, we built a search component — it was nothing special, an input field and a menu that appears like an autocomplete would. It was in a navigation bar so the component had to share space with a logo and links in the navigation. This meant that there was a constrained width of say 380px for the input and the drop down, cool. We didn’t have the content that would go in the search dropdown when it was initially designed. When we did get the content the search results were A MESS. Imagine typing in “search term” and seeing 30 results in a narrow drop down you could scroll through. There’s a reason why Google autocomplete limits its results to 10. It would be too overwhelming to scroll through all the autocomplete items. …