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 1/2] 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} />
From bd0db01515d73482ed3774454462745b35ae82fb Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Sat, 8 Aug 2015 18:09:37 -0500
Subject: [PATCH 2/2] Add landmarks around major view regions for easier
navigation.
---
skins/base/views/organisms/RoomView.js | 8 +++++---
skins/base/views/pages/MatrixChat.js | 4 ++--
2 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index aaed8776a2..20d073b990 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -75,7 +75,7 @@ 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">
<div className={scrollheader_classes}>
@@ -86,8 +86,10 @@ module.exports = React.createClass({
</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>
);
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js
index 0231af4420..be4cd43417 100644
--- a/skins/base/views/pages/MatrixChat.js
+++ b/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>