From 5edb5f6487404b89da45f13f3d8444dd1f533d0f Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 6 Jan 2017 01:37:12 +0200
Subject: [PATCH 1/2] Turned divs to button-likes to comply with MDN's
recommendations
---
src/components/structures/BottomLeftMenu.js | 17 ++++----
src/components/structures/RightPanel.js | 17 +++++---
src/components/structures/RoomSubList.js | 13 +++---
src/components/structures/SearchBox.js | 43 +++++++++++++++----
src/components/views/elements/ImageView.js | 3 +-
src/components/views/globals/MatrixToolbar.js | 3 +-
src/components/views/rooms/SearchBar.js | 11 ++---
7 files changed, 74 insertions(+), 33 deletions(-)
diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index 0ea35b4e..1e352fa1 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -20,6 +20,7 @@ var React = require('react');
var ReactDOM = require('react-dom');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'BottomLeftMenu',
@@ -101,22 +102,22 @@ module.exports = React.createClass({
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
- <div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
+ <AccessibleButton className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
<TintableSvg src="img/icons-people.svg" width="25" height="25" />
{ this.getLabel("Start chat", this.state.peopleHover) }
- </div>
- <div className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
+ </AccessibleButton>
+ <AccessibleButton className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
<TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
{ this.getLabel("Room directory", this.state.directoryHover) }
- </div>
- <div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
+ </AccessibleButton>
+ <AccessibleButton className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
<TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
{ this.getLabel("Create new room", this.state.roomsHover) }
- </div>
- <div className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
+ </AccessibleButton>
+ <AccessibleButton className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
<TintableSvg src="img/icons-settings.svg" width="25" height="25" />
{ this.getLabel("Settings", this.state.settingsHover) }
- </div>
+ </AccessibleButton>
</div>
</div>
);
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index d1622e5f..7bd5d3b9 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -23,6 +23,7 @@ var dis = require('matrix-react-sdk/lib/dispatcher');
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
var Modal = require('matrix-react-sdk/lib/Modal');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'RightPanel',
@@ -207,12 +208,12 @@ module.exports = React.createClass({
if (user_is_in_room) {
inviteGroup =
- <div className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+ <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
<div className="mx_RightPanel_icon" >
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
</div>
<div className="mx_RightPanel_message">Invite to this room</div>
- </div>;
+ </AccessibleButton>;
}
}
@@ -220,20 +221,26 @@ module.exports = React.createClass({
if (this.props.roomId) {
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
- <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
+ <div className="mx_RightPanel_headerButton">
+ <AccessibleButton title="Members" onClick={ this.onMemberListButtonClick }>
<div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span> </span>}</div>
<TintableSvg src="img/icons-people.svg" width="25" height="25"/>
{ membersHighlight }
+ </AccessibleButton>
</div>
- <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files" onClick={ this.onFileListButtonClick }>
+ <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
+ <AccessibleButton title="Files" onClick={ this.onFileListButtonClick }>
<div className="mx_RightPanel_headerButton_badge"> </div>
<TintableSvg src="img/icons-files.svg" width="25" height="25"/>
{ filesHighlight }
+ </AccessibleButton>
</div>
- <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications" onClick={ this.onNotificationListButtonClick }>
+ <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton">
+ <AccessibleButton title="Notifications" onClick={ this.onNotificationListButtonClick }>
<div className="mx_RightPanel_headerButton_badge"> </div>
<TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
{ notificationsHighlight }
+ </AccessibleButton>
</div>
</div>;
}
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index e87f3f8a..af8500df 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -26,6 +26,7 @@ var Unread = require('matrix-react-sdk/lib/Unread');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
// turn this on for drop & drag console debugging galore
var debug = false;
@@ -417,15 +418,17 @@ var RoomSubList = React.createClass({
}
}
+ var tabindex = this.props.searchFilter === "" ? "0" : "-1";
+
return (
<div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
- <div onClick={ this.onClick } className="mx_RoomSubList_label">
+ <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
{ this.props.collapsed ? '' : this.props.label }
<div className="mx_RoomSubList_roomCount">{ roomCount }</div>
<div className={chevronClasses}></div>
{ badge }
{ incomingCall }
- </div>
+ </AccessibleButton>
</div>
);
},
@@ -447,11 +450,11 @@ var RoomSubList = React.createClass({
});
return (
- <div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
+ <AccessibleButton className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
<div className="mx_RoomSubList_line"></div>
<div className="mx_RoomSubList_more">more</div>
- <div className={ badgeClasses }>{ content }</div>
- </div>
+ <div className={ badgeClasses }>{ content }</div>
+ </AccessibleButton>
);
},
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index 7fc51000..036ff3f1 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -20,6 +20,7 @@ var React = require('react');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'SearchBox',
@@ -35,6 +36,25 @@ module.exports = React.createClass({
};
},
+ componentDidMount: function() {
+ this.dispatcherRef = dis.register(this.onAction);
+ },
+
+ componentWillUnmount: function() {
+ dis.unregister(this.dispatcherRef);
+ },
+
+ onAction: function(payload) {
+ switch (payload.action) {
+ // Clear up the text field when a room is selected.
+ case 'view_room':
+ if (this.refs.search) {
+ this._clearSearch();
+ }
+ break;
+ }
+ },
+
onChange: function() {
if (!this.refs.search) return;
this.setState({ searchTerm: this.refs.search.value });
@@ -61,35 +81,42 @@ module.exports = React.createClass({
}
},
+ _clearSearch: function() {
+ this.refs.search.value = "";
+ this.onChange();
+ },
+
render: function() {
var TintableSvg = sdk.getComponent('elements.TintableSvg');
+ var collapseTabIndex = this.refs.search && this.refs.search.value !== "" ? "-1" : "0";
+
var toggleCollapse;
if (this.props.collapsed) {
toggleCollapse =
- <div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
+ <AccessibleButton className="mx_SearchBox_maximise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, true) }>
<TintableSvg src="img/maximise.svg" width="10" height="16" alt="<"/>
- </div>
+ </AccessibleButton>
}
else {
toggleCollapse =
- <div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
+ <AccessibleButton className="mx_SearchBox_minimise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, false) }>
<TintableSvg src="img/minimise.svg" width="10" height="16" alt="<"/>
- </div>
+ </AccessibleButton>
}
var searchControls;
if (!this.props.collapsed) {
searchControls = [
this.state.searchTerm.length > 0 ?
- <div key="button"
- className="mx_SearchBox_closeButton"
- onClick={ ()=>{ this.refs.search.value = ""; this.onChange(); } }>
+ <AccessibleButton key="button"
+ className="mx_SearchBox_closeButton"
+ onClick={ ()=>{ this._clearSearch(); } }>
<TintableSvg
className="mx_SearchBox_searchButton"
src="img/icons-close.svg" width="24" height="24"
/>
- </div>
+ </AccessibleButton>
:
<TintableSvg
key="button"
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index c47fecfe..4a0c1663 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -22,6 +22,7 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var DateUtils = require('matrix-react-sdk/lib/DateUtils');
var filesize = require('filesize');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'ImageView',
@@ -162,7 +163,7 @@ module.exports = React.createClass({
<img src={this.props.src} style={style}/>
<div className="mx_ImageView_labelWrapper">
<div className="mx_ImageView_label">
- <img className="mx_ImageView_cancel" src="img/cancel-white.svg" width="18" height="18" alt="Close" onClick={ this.props.onFinished }/>
+ <AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src="img/cancel-white.svg" width="18" height="18" alt="Close"/></AccessibleButton>
<div className="mx_ImageView_shim">
</div>
<div className="mx_ImageView_name">
diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js
index a22e15ff..dbe4196a 100644
--- a/src/components/views/globals/MatrixToolbar.js
+++ b/src/components/views/globals/MatrixToolbar.js
@@ -19,6 +19,7 @@ limitations under the License.
var React = require('react');
var Notifier = require("matrix-react-sdk/lib/Notifier");
var sdk = require('matrix-react-sdk')
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'MatrixToolbar',
@@ -38,7 +39,7 @@ module.exports = React.createClass({
<div className="mx_MatrixToolbar_content">
You are not receiving desktop notifications. <a className="mx_MatrixToolbar_link" onClick={ this.onClick }>Enable them now</a>
</div>
- <div className="mx_MatrixToolbar_close"><img src="img/cancel.svg" width="18" height="18" onClick={ this.hideToolbar } /></div>
+ <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
</div>
);
}
diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js
index 99e77064..1653f269 100644
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.js
@@ -20,6 +20,7 @@ var React = require('react');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var sdk = require('matrix-react-sdk');
var classNames = require('classnames');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
module.exports = React.createClass({
displayName: 'SearchBar',
@@ -57,12 +58,12 @@ module.exports = React.createClass({
var allRoomsClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'All' });
return (
- <div className="mx_SearchBar">
+ <div className="mx_SearchBar">
<input ref="search_term" className="mx_SearchBar_input" type="text" autoFocus={true} placeholder="Search..." onKeyDown={this.onSearchChange}/>
- <div className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt="Search"/></div>
- <div className={ thisRoomClasses } onClick={this.onThisRoomClick}>This Room</div>
- <div className={ allRoomsClasses } onClick={this.onAllRoomsClick}>All Rooms</div>
- <img className="mx_SearchBar_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.props.onCancelClick} />
+ <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt="Search"/></AccessibleButton>
+ <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick}>This Room</AccessibleButton>
+ <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick}>All Rooms</AccessibleButton>
+ <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
</div>
);
}
From 7ceaabb166fe1c07357e0d7d99f23cbc62c07c93 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 3 Feb 2017 12:00:33 +0000
Subject: [PATCH 2/2] RightPanel: remove superfluous divs
---
src/components/structures/RightPanel.js | 18 ++++++++----------
1 file changed, 8 insertions(+), 10 deletions(-)
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index f609a4cd..04a98119 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -197,27 +197,26 @@ module.exports = React.createClass({
if (this.props.roomId) {
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
- <div className="mx_RightPanel_headerButton">
- <AccessibleButton title="Members" onClick={ this.onMemberListButtonClick }>
+ <AccessibleButton className="mx_RightPanel_headerButton"
+ title="Members" onClick={ this.onMemberListButtonClick }>
<div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span> </span>}</div>
<TintableSvg src="img/icons-people.svg" width="25" height="25"/>
{ membersHighlight }
</AccessibleButton>
- </div>
- <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
- <AccessibleButton title="Files" onClick={ this.onFileListButtonClick }>
+ <AccessibleButton
+ className="mx_RightPanel_headerButton mx_RightPanel_filebutton"
+ title="Files" onClick={ this.onFileListButtonClick }>
<div className="mx_RightPanel_headerButton_badge"> </div>
<TintableSvg src="img/icons-files.svg" width="25" height="25"/>
{ filesHighlight }
</AccessibleButton>
- </div>
- <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton">
- <AccessibleButton title="Notifications" onClick={ this.onNotificationListButtonClick }>
+ <AccessibleButton
+ className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton"
+ title="Notifications" onClick={ this.onNotificationListButtonClick }>
<div className="mx_RightPanel_headerButton_badge"> </div>
<TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
{ notificationsHighlight }
</AccessibleButton>
- </div>
<div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title="Hide panel" onClick={ this.onCollapseClick }>
<TintableSvg src="img/minimise.svg" width="10" height="16"/>
</div>
@@ -262,4 +261,3 @@ module.exports = React.createClass({
);
}
});
-