Hopefully port over ndarilek's accessibility changes to Vector (albeit with list elements contained within RoomView)

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 {

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>
         );
     }
 });

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>
         );
     }
 });

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">

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>
                 );

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);