WordPress / openverse-frontend

The gateway to the Openverse. Openverse is a search tool for CC-licensed and public domain content across the internet.
https://wordpress.org/openverse
MIT License
71 stars 63 forks source link

Expanding the filters sidebar does not focus a screen reader on the filters section #2182

Closed obulat closed 1 year ago

obulat commented 1 year ago

Problem

The desktop version of the search page has an expandable filters sidebar on the right. When the user opens the sidebar by clicking on the "Filters" button, the page focus should move to the sidebar. We have implemented this for the keyboard "tabbing" order. However, this does not help the screenreaders: they follow the DOM order (i.e., the order in which the elements are written in the code)

Possible Solutions

We could move the sidebar to the left side of the screen. Another possible solution to try could be to use the "filters sidebar" -> "main content" order in the DOM, but switch it using CSS. Normally, using CSS for ordering is bad for accessibility, but here it would probably have an opposite effect.

Original description by @alexstine

Expanding the Filters button does not focus the user in the filtering section. Adjust the DOM order so the filtering options appear directly after the Filter button.