Event tiles are now items in a list, improves accessibility.

This commit is contained in:
Nolan Darilek 2015-08-08 17:36:19 -05:00
parent ec8a815688
commit 517bb01f33
6 changed files with 16 additions and 10 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

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