Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Move the sidebar to below the sidebar tab buttons for screen readers. #4071

Merged
merged 2 commits into from
Feb 13, 2020

Conversation

MarcoZehe
Copy link
Contributor

Do this by aria-owning the sidebar into the header wrapper. aria-owned subtrees get added as the last child after all other child elements that are in the DOM. This way, if a sidebar tab is activated, the aside element now is inserted in a position following the tabs, before the main messages list. The association for screen readers is therefore more logical. This has no bearing on the DOM order or CSS properties. aria-owns simply rearranges the accessibility tree.

Fixes element-hq/element-web/issues/11319

Signed-off-by: Marco Zehe marcozehe@mailbox.org

Do this by aria-owning the sidebar into the header wrapper. aria-owned subtrees get added as the last child after all other child elements that are in the DOM. This way, if a sidebar tab is activated, the aside element now is inserted in a position following the tabs, before the main messages list. The association for screen readers is therefore more logical. This has no bearing on the DOM order or CSS properties. aria-owns simply rearranges the accessibility tree.

Fixes element-hq/element-web/issues/11319

Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
src/components/structures/RightPanel.js Outdated Show resolved Hide resolved
Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
@t3chguy
Copy link
Member

t3chguy commented Feb 13, 2020

Thanks for your contribution :D

@t3chguy t3chguy merged commit 256659e into matrix-org:develop Feb 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Semantically connect the tab list to the right side bar
2 participants