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

Merge pull request #3708 from matrix-org/t3chguy/search_accessible_radios

Browse source 
Mark the This/All Rooms scope buttons as radios for a11y
This commit is contained in:
Michael Telatynski 2019-12-09 13:43:32 +00:00 committed by GitHub
commit b1788fb4b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/views/rooms/_SearchBar.scss
View file

@ -37,6 +37,10 @@ limitations under the License.
mask-position: center; mask-position: center;
} }
.mx_SearchBar_buttons {
display: inherit;
}
.mx_SearchBar_button { .mx_SearchBar_button {
border: 0; border: 0;
margin: 0 0 0 22px; margin: 0 0 0 22px;

26
src/components/views/rooms/SearchBar.js
View file

@ -57,19 +57,31 @@ module.exports = createReactClass({
}, },
render: function() { render: function() {
const searchButtonClasses = classNames({ mx_SearchBar_searchButton: true, mx_SearchBar_searching: this.props.searchInProgress }); const searchButtonClasses = classNames("mx_SearchBar_searchButton", {
const thisRoomClasses = classNames({ mx_SearchBar_button: true, mx_SearchBar_unselected: this.state.scope !== 'Room' }); mx_SearchBar_searching: this.props.searchInProgress,
const allRoomsClasses = classNames({ mx_SearchBar_button: true, mx_SearchBar_unselected: this.state.scope !== 'All' }); });
const thisRoomClasses = classNames("mx_SearchBar_button", {
mx_SearchBar_unselected: this.state.scope !== 'Room',
});
const allRoomsClasses = classNames("mx_SearchBar_button", {
mx_SearchBar_unselected: this.state.scope !== 'All',
});
return ( return (
<div className="mx_SearchBar"> <div className="mx_SearchBar">
<AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick}>{_t("This Room")}</AccessibleButton> <div className="mx_SearchBar_buttons" role="radiogroup">
<AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick}>{_t("All Rooms")}</AccessibleButton> <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick} aria-checked={this.state.scope === 'Room'} role="radio">
{_t("This Room")}
</AccessibleButton>
<AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick} aria-checked={this.state.scope === 'All'} role="radio">
{_t("All Rooms")}
</AccessibleButton>
</div>
<div className="mx_SearchBar_input mx_textinput"> <div className="mx_SearchBar_input mx_textinput">
<input ref="search_term" type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} /> <input ref="search_term" type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
<AccessibleButton className={ searchButtonClasses } onClick={this.onSearch}></AccessibleButton> <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch} />
</div> </div>
<AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}></AccessibleButton> <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
</div> </div>
); );
}, },