From 517bb01f331f4728e5b14f20e02df9fcdf98fb1f Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Sat, 8 Aug 2015 17:36:19 -0500
Subject: [PATCH] Event tiles are now items in a list, improves accessibility.

---
 skins/base/css/organisms/RoomView.css     | 4 ++++
 skins/base/views/molecules/MEmoteTile.js  | 4 ++--
 skins/base/views/molecules/MFileTile.js   | 4 ++--
 skins/base/views/molecules/MImageTile.js  | 4 ++--
 skins/base/views/molecules/MessageTile.js | 4 ++--
 skins/base/views/organisms/RoomView.js    | 6 ++++--
 6 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index 4176c4b8cc..0c75f8fad4 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/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 {
 }
 
diff --git a/skins/base/views/molecules/MEmoteTile.js b/skins/base/views/molecules/MEmoteTile.js
index e7720e160b..e1b5045db7 100644
--- a/skins/base/views/molecules/MEmoteTile.js
+++ b/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>
         );
     },
 });
diff --git a/skins/base/views/molecules/MFileTile.js b/skins/base/views/molecules/MFileTile.js
index c519bfc43a..7685fc75e0 100644
--- a/skins/base/views/molecules/MFileTile.js
+++ b/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>
         );
     },
 });
diff --git a/skins/base/views/molecules/MImageTile.js b/skins/base/views/molecules/MImageTile.js
index 783583cbdd..97cefc538e 100644
--- a/skins/base/views/molecules/MImageTile.js
+++ b/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>
         );
     },
 });
diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js
index 6808ecd9f0..b28e562b20 100644
--- a/skins/base/views/molecules/MessageTile.js
+++ b/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>
         );
     },
 });
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 8de03a84a7..aaed8776a2 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -77,10 +77,12 @@ module.exports = React.createClass({
                     <div className="mx_RoomView_roomWrapper">
                         <div 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} />