From efcc2061b85ae67b1e662439ffb43bc4feeec4d2 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 10 Aug 2015 15:17:15 +0100
Subject: [PATCH] Hopefully port over ndarilek's accessibility changes to
 Vector (albeit with list elements contained within RoomView)

---
 skins/base/css/organisms/RoomView.css    | 2 ++
 skins/base/views/organisms/LeftPanel.js  | 4 ++--
 skins/base/views/organisms/RightPanel.js | 4 ++--
 skins/base/views/organisms/RoomView.js   | 8 ++++----
 skins/base/views/pages/MatrixChat.js     | 8 ++++----
 src/controllers/organisms/RoomView.js    | 2 +-
 6 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index 5f10bbefe..0e7c183f1 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -82,6 +82,8 @@ limitations under the License.
 
 .mx_RoomView_MessageList {
     width: 100%;
+    list-style-type: none;
+    padding: 0px;
 }
 
 .mx_RoomView_MessageList h2 {
diff --git a/skins/base/views/organisms/LeftPanel.js b/skins/base/views/organisms/LeftPanel.js
index 165759109..a7c2a8b91 100644
--- a/skins/base/views/organisms/LeftPanel.js
+++ b/skins/base/views/organisms/LeftPanel.js
@@ -29,12 +29,12 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div className="mx_LeftPanel">
+            <aside className="mx_LeftPanel">
                 <img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/>
                 <IncomingCallBox />
                 <RoomList selectedRoom={this.props.selectedRoom} />
                 <BottomLeftMenu />
-            </div>
+            </aside>
         );
     }
 });
diff --git a/skins/base/views/organisms/RightPanel.js b/skins/base/views/organisms/RightPanel.js
index 5123691e3..db4634203 100644
--- a/skins/base/views/organisms/RightPanel.js
+++ b/skins/base/views/organisms/RightPanel.js
@@ -66,12 +66,12 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_RightPanel">
+            <aside className="mx_RightPanel">
                 <div className="mx_RightPanel_header">
                     { buttonGroup }
                 </div>
                 { panel }
-            </div>
+            </aside>
         );
     }
 });
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 9bcde890e..fe97a9c72 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -170,11 +170,11 @@ module.exports = React.createClass({
                     </div>
                     <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
                         <div className="mx_RoomView_messageListWrapper">
-                            <div className="mx_RoomView_MessageList" aria-live="polite">
-                                <div className={scrollheader_classes}>
-                                </div>
+                            <ol className="mx_RoomView_MessageList" aria-live="polite">
+                                <li className={scrollheader_classes}>
+                                </li>
                                 {this.getEventTiles()}
-                            </div>
+                            </ol>
                         </div>
                     </div>
                     <div className="mx_RoomView_statusArea">
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js
index 2a4472fca..15da07f9d 100644
--- a/skins/base/views/pages/MatrixChat.js
+++ b/skins/base/views/pages/MatrixChat.js
@@ -81,9 +81,9 @@ module.exports = React.createClass({
                             <MatrixToolbar />
                             <div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
                                 <LeftPanel selectedRoom={this.state.currentRoom} />
-                                <div className="mx_MatrixChat_middlePanel">
+                                <main className="mx_MatrixChat_middlePanel">
                                     {page_element}
-                                </div>
+                                </main>
                                 {right_panel}
                             </div>
                         </div>
@@ -93,9 +93,9 @@ module.exports = React.createClass({
                 return (
                         <div className="mx_MatrixChat">
                             <LeftPanel selectedRoom={this.state.currentRoom} />
-                            <div className="mx_MatrixChat_middlePanel">
+                            <main className="mx_MatrixChat_middlePanel">
                                 {page_element}
-                            </div>
+                            </main>
                             {right_panel}
                         </div>
                 );
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index 2042885c6..2629e33b0 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -353,7 +353,7 @@ module.exports = {
             }
             if (!TileType) continue;
             ret.unshift(
-                <TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation} last={last}/>
+                <li><TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation} last={last}/></li>
             );
             if (dateSeparator) {
                 ret.unshift(dateSeparator);