From 6319407cab89a762a7db0312f468eb36e08653ee Mon Sep 17 00:00:00 2001
From: Marco Zehe <marcozehe@mailbox.org>
Date: Thu, 13 Feb 2020 16:02:58 +0100
Subject: [PATCH 1/2] Move the sidebar to below the sidebar tab buttons for
 screen readers.

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 vector-im/riot-web/issues/11319

Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
---
 src/components/structures/RightPanel.js  | 2 +-
 src/components/views/rooms/RoomHeader.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 45722caa98..90e71a770b 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -285,7 +285,7 @@ export default class RightPanel extends React.Component {
         });
 
         return (
-            <aside className={classes}>
+            <aside className={classes} id="sidebarPanel">
                 { panel }
             </aside>
         );
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 3c0f2e3d41..cabfc48ec5 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -314,7 +314,7 @@ export default createReactClass({
 
         return (
             <div className="mx_RoomHeader light-panel">
-                <div className="mx_RoomHeader_wrapper">
+                <div className="mx_RoomHeader_wrapper" aria-owns="sidebarPanel">
                     <div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div>
                     { privateIcon }
                     { name }

From 7840aa74fdbfe842aa7cd45dedd61e2c9e599966 Mon Sep 17 00:00:00 2001
From: Marco Zehe <marcozehe@mailbox.org>
Date: Thu, 13 Feb 2020 19:18:21 +0100
Subject: [PATCH 2/2] Fix ID to be namespaced

Signed-off-by: Marco Zehe <marcozehe@mailbox.org>
---
 src/components/structures/RightPanel.js  | 2 +-
 src/components/views/rooms/RoomHeader.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 90e71a770b..eddd26c857 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -285,7 +285,7 @@ export default class RightPanel extends React.Component {
         });
 
         return (
-            <aside className={classes} id="sidebarPanel">
+            <aside className={classes} id="mx_RightPanel">
                 { panel }
             </aside>
         );
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index cabfc48ec5..61abfe86cf 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -314,7 +314,7 @@ export default createReactClass({
 
         return (
             <div className="mx_RoomHeader light-panel">
-                <div className="mx_RoomHeader_wrapper" aria-owns="sidebarPanel">
+                <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
                     <div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div>
                     { privateIcon }
                     { name }