Merge pull request #17 from ndarilek/master

Make HTML more semantic to improve accessibility

skins/base/css/organisms/RoomView.css

@@ -55,6 +55,10 @@ limitations under the License.
     display: table;
 }
 
+.mx_RoomView_MessageList_ul {
+    list-style-type: none;
+}
+
 .mx_RoomView_invitePrompt {
 }
 

skins/base/views/molecules/MEmoteTile.js

@@ -29,9 +29,9 @@ module.exports = React.createClass({
         var content = mxEvent.getContent();
         var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         return (
-            <span className="mx_MEmoteTile mx_MessageTile_content">
+            <li className="mx_MEmoteTile mx_MessageTile_content">
                 * {name} {content.body}
-            </span>
+            </li>
         );
     },
 });

skins/base/views/molecules/MFileTile.js

@@ -31,11 +31,11 @@ module.exports = React.createClass({
         var cli = MatrixClientPeg.get();
 
         return (
-            <span className="mx_MFileTile">
+            <li className="mx_MFileTile">
                 <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
                     {this.presentableTextForFile(content)}
                 </a>
-            </span>
+            </li>
         );
     },
 });

skins/base/views/molecules/MImageTile.js

@@ -59,11 +59,11 @@ module.exports = React.createClass({
         if (thumbHeight) imgStyle['height'] = thumbHeight;
 
         return (
-            <span className="mx_MImageTile">
+            <li className="mx_MImageTile">
                 <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
                     <img src={cli.mxcUrlToHttp(content.url, 320, 240)} alt={content.body} style={imgStyle} />
                 </a>
-            </span>
+            </li>
         );
     },
 });

skins/base/views/molecules/MessageTile.js

@@ -55,11 +55,11 @@ module.exports = React.createClass({
             mx_MessageTile_highlight: this.shouldHighlight()
         });
         return (
-            <div className={classes}>
+            <li className={classes}>
                 <MessageTimestamp ts={this.props.mxEvent.getTs()} />
                 <SenderProfile mxEvent={this.props.mxEvent} />
                 <TileType mxEvent={this.props.mxEvent} />
-            </div>
+            </li>
         );
     },
 });

skins/base/views/organisms/RoomView.js

@@ -75,17 +75,21 @@ module.exports = React.createClass({
                 <div className="mx_RoomView">
                     <RoomHeader room={this.state.room} />
                     <div className="mx_RoomView_roomWrapper">
-                        <div className="mx_RoomView_messagePanel">
+                        <main className="mx_RoomView_messagePanel">
                             <div ref="messageWrapper" className="mx_RoomView_messageListWrapper" onScroll={this.onMessageListScroll}>
-                                <div className="mx_RoomView_MessageList" aria-live="polite">
+                                <div className="mx_RoomView_MessageList">
                                     <div className={scrollheader_classes}>
                                     </div>
-                                    {this.getEventTiles()}
+                                    <ul className="mx_RoomView_MessageList_ul" aria-live="polite">
+                                        {this.getEventTiles()}
+                                    </ul>
                                 </div>
                             </div>
                             <MessageComposer roomId={this.props.roomId} />
-                        </div>
-                        <MemberList roomId={this.props.roomId} key={this.props.roomId} />
+                        </main>
+                        <aside>
+                            <MemberList roomId={this.props.roomId} key={this.props.roomId} />
+                        </aside>
                     </div>
                 </div>
             );

skins/base/views/pages/MatrixChat.js

@@ -40,10 +40,10 @@ module.exports = React.createClass({
             return (
                 <div className="mx_MatrixChat">
                     <div className="mx_MatrixChat_chatWrapper">
-                        <div className="mx_MatrixChat_leftPanel">
+                        <aside className="mx_MatrixChat_leftPanel">
                             <RoomList selectedRoom={this.state.currentRoom} />
                             <MatrixToolbar />
-                        </div>
+                        </aside>
                         <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
                     </div>
                 </div>