From 86e52d1ef334d7b9333f965d3b34fc17808e38b0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 7 Dec 2019 12:45:28 +0000
Subject: [PATCH] Mark the This/All Rooms scope buttons as radios for a11y

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_SearchBar.scss     |  4 ++++
 src/components/views/rooms/SearchBar.js | 26 ++++++++++++++++++-------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss
index 894473a5fe..b6748e5ad2 100644
--- a/res/css/views/rooms/_SearchBar.scss
+++ b/res/css/views/rooms/_SearchBar.scss
@@ -37,6 +37,10 @@ limitations under the License.
         mask-position: center;
     }
 
+    .mx_SearchBar_buttons {
+        display: inherit;
+    }
+
     .mx_SearchBar_button {
         border: 0;
         margin: 0 0 0 22px;
diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js
index 5e0ac9a953..08cb9bbee0 100644
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.js
@@ -57,19 +57,31 @@ module.exports = createReactClass({
     },
 
     render: function() {
-        const searchButtonClasses = classNames({ mx_SearchBar_searchButton: true, mx_SearchBar_searching: this.props.searchInProgress });
-        const thisRoomClasses = classNames({ mx_SearchBar_button: true, mx_SearchBar_unselected: this.state.scope !== 'Room' });
-        const allRoomsClasses = classNames({ mx_SearchBar_button: true, mx_SearchBar_unselected: this.state.scope !== 'All' });
+        const searchButtonClasses = classNames("mx_SearchBar_searchButton", {
+            mx_SearchBar_searching: this.props.searchInProgress,
+        });
+        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 (
             <div className="mx_SearchBar">
-                <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick}>{_t("This Room")}</AccessibleButton>
-                <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick}>{_t("All Rooms")}</AccessibleButton>
+                <div className="mx_SearchBar_buttons" role="radiogroup">
+                    <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">
                     <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>
-                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}></AccessibleButton>
+                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
             </div>
         );
     },