Merge pull request #17 from ndarilek/master

Make HTML more semantic to improve accessibility
This commit is contained in:
David Baker 2015-08-10 13:45:36 +01:00
commit 2d9419c380
7 changed files with 23 additions and 15 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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