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

@@ -285,7 +285,7 @@ export default class RightPanel extends React.Component {
         });
 
         return (
-            <aside className={classes}>
+            <aside className={classes} id="sidebarPanel">
                 { panel }
             </aside>
         );

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 }