PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

TopUnreadMessagesBar: turn clickables into accessible buttons and fix

Browse source 
over verbosity for the accessible name.
This commit is contained in:
Peter Vágner 2018-03-31 17:42:10 +02:00
parent a79c558763
commit 778ebe63ff
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/rooms/TopUnreadMessagesBar.js
View file

@ -20,6 +20,7 @@ limitations under the License.
const React = require('react'); const React = require('react');
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import AccessibleButton from '../elements/AccessibleButton';
const sdk = require('../../../index'); const sdk = require('../../../index');
module.exports = React.createClass({ module.exports = React.createClass({
@ -33,14 +34,19 @@ module.exports = React.createClass({
render: function() { render: function() {
return ( return (
<div className="mx_TopUnreadMessagesBar"> <div className="mx_TopUnreadMessagesBar">
<div className="mx_TopUnreadMessagesBar_scrollUp" <AccessibleButton className="mx_TopUnreadMessagesBar_scrollUp"
onClick={this.props.onScrollUpClick}> onClick={this.props.onScrollUpClick}>
<img src="img/scrollto.svg" width="24" height="24" <img src="img/scrollto.svg" width="24" height="24"
alt={_t('Scroll to unread messages')} // No point on setting up non empty alt on this image
title={_t('Scroll to unread messages')} /> // as it only complements the text which follows it.
alt=""
title={_t('Scroll to unread messages')}
// In order not to use this title attribute for accessible name
// calculation of the parent button set the role presentation
role="presentation" />
{ _t("Jump to first unread message.") } { _t("Jump to first unread message.") }
</div> </AccessibleButton>
<img className="mx_TopUnreadMessagesBar_close mx_filterFlipColor" <AccessibleButton element='img' className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
src="img/cancel.svg" width="18" height="18" src="img/cancel.svg" width="18" height="18"
alt={_t("Close")} title={_t("Close")} alt={_t("Close")} title={_t("Close")}
onClick={this.props.onCloseClick} /> onClick={this.props.onCloseClick} />