mirror of
https://github.com/element-hq/element-web
synced 2024-11-23 01:35:49 +03:00
Merge pull request #17 from ndarilek/master
Make HTML more semantic to improve accessibility
This commit is contained in:
commit
2d9419c380
7 changed files with 23 additions and 15 deletions
|
@ -55,6 +55,10 @@ limitations under the License.
|
|||
display: table;
|
||||
}
|
||||
|
||||
.mx_RoomView_MessageList_ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.mx_RoomView_invitePrompt {
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue