Improve accessibility in the search UI

[SeanFarrow]

Whilst the search UI works for screen readers, it could definitely be improved with the following changes:
Firstly, make the "Search" combobox a required field.
Secondly, there is no easy way of navigating through results. I ended up tabbing though links, but it is then unclear when a new search result refers to a different library.
Finally, could this be made a modal dialog. Screen readers have two ways of navigating the web.
One essentially "flattens" the page in to a buffer so it can be read easily. Tyhe other, which is what we are dealing with here is used in a "live environment" where you have contents that change.

To fix this, we should either have a set of headings for each library the search has found, or have the user actually click a search button rather than the search being automatic.

[vinniefalco]

Thanks for opening this issue! Is there perhaps another existing deployment of the Algolia UI that is already tuned for screen readers that we can simply copy?

[SeanFarrow]

Let me do some digging. Which library are you using specifically? If not, I’m happy to raise a PR if that helps. Is this part of the site open source? From: Vinnie Falco ***@***.***> Sent: Tuesday, July 11, 2023 4:38 AM To: boostorg/website ***@***.***> Cc: Sean Farrow ***@***.***>; Author ***@***.***> Subject: Re: [boostorg/website] Improve accessibility in the search UI (Issue #772) Thanks for opening this issue! Is there perhaps another existing deployment of the Algolia UI that is already tuned for screen readers that we can simply copy? — Reply to this email directly, view it on GitHub<#772 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AALDK7QW47NQTOQN4M4LPVDXPTDDFANCNFSM6AAAAAA2FJ364A>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[ashtum]

Thank you for reporting this issue.
The related code for the UI is here: https://github.com/cppalliance/boost-gecko/tree/develop/lab/search_interface
It is a react app that uses Material UI and Algolia react library to create the search interface.
Did you experience the same issues on a specific library page too? like https://www.boost.org/doc/libs/1_82_0/doc/html/boost_asio.html.
I have created an issue for grouping the results for each library when the search is targeting all libraries.
We can add labels if that helps.

[ashtum]

Finally, could this be made a modal dialog

It uses a material UI dialog component: https://mui.com/material-ui/react-dialog/.
Which I think is equivalent to modal in other UI frameworks.

[SeanFarrow]

It is, however you have to do some work to make it completely accessible. Let me see what I can fix over the next few weeks. Thanks, Sean. From: Mohammad Nejati ***@***.***> Sent: Tuesday, July 11, 2023 2:39 PM To: boostorg/website ***@***.***> Cc: Sean Farrow ***@***.***>; Author ***@***.***> Subject: Re: [boostorg/website] Improve accessibility in the search UI (Issue #772) Finally, could this be made a modal dialog It uses a material UI dialog component: https://mui.com/material-ui/react-dialog/. Which I think is equivalent to modal in other UI frameworks. — Reply to this email directly, view it on GitHub<#772 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AALDK7SZNJDYUU26X2CVZD3XPVJNNANCNFSM6AAAAAA2FJ364A>. You are receiving this because you authored the thread.Message ID: ***@***.***>