Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

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

Closed
obulat opened this issue Feb 14, 2023 · 0 comments · Fixed by #2185
Closed

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

obulat opened this issue Feb 14, 2023 · 0 comments · Fixed by #2185
Assignees
Labels
♿️ aspect: a11y Concerns related to the project's accessibility 🛠 goal: fix Bug fix 🟧 priority: high Stalls work on the project or its dependents

Comments

@obulat
Copy link
Contributor

obulat commented Feb 14, 2023

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.

@obulat obulat changed the title 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. Expanding the filters sidebar does not focus a screen reader on the filters section Feb 14, 2023
@obulat obulat self-assigned this Feb 15, 2023
@obulat obulat added 🟧 priority: high Stalls work on the project or its dependents 🛠 goal: fix Bug fix ♿️ aspect: a11y Concerns related to the project's accessibility labels Feb 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
♿️ aspect: a11y Concerns related to the project's accessibility 🛠 goal: fix Bug fix 🟧 priority: high Stalls work on the project or its dependents
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant