diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 0ea35b4ecb..1e352fa12a 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 (
-
+ { this.getLabel("Start chat", this.state.peopleHover) } -
-
+ + { this.getLabel("Room directory", this.state.directoryHover) } -
-
+ + { this.getLabel("Create new room", this.state.roomsHover) } -
-
+ + { this.getLabel("Settings", this.state.settingsHover) } -
+
); diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index d1622e5f41..7bd5d3b9ed 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 = -
+
Invite to this room
-
; + ; } } @@ -220,20 +221,26 @@ module.exports = React.createClass({ if (this.props.roomId) { buttonGroup =
-
+
+
{ membersBadge ? membersBadge :  }
{ membersHighlight } +
-
+
+
 
{ filesHighlight } +
-
+
+
 
{ notificationsHighlight } +
; } diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e87f3f8a33..af8500df77 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 (
-
+ { this.props.collapsed ? '' : this.props.label }
{ roomCount }
{ badge } { incomingCall } -
+
); }, @@ -447,11 +450,11 @@ var RoomSubList = React.createClass({ }); return ( -
+
more
-
{ content }
-
+
{ content }
+ ); }, diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 7fc5100049..036ff3f15c 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 = -
+ -
+ } else { toggleCollapse = -
+ -
+ } var searchControls; if (!this.props.collapsed) { searchControls = [ this.state.searchTerm.length > 0 ? -
{ this.refs.search.value = ""; this.onChange(); } }> + { this._clearSearch(); } }> -
+ :
- Close + Close
diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js index a22e15ffc1..dbe4196aad 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({
You are not receiving desktop notifications. Enable them now
-
+
); } diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js index 99e7706416..1653f269a8 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 ( -
+
-
Search
-
This Room
-
All Rooms
- + Search + This Room + All Rooms +
); }