Add aria labels to message search bar to improve accessibility (#10476)

matrix-org · Mar 30, 2023 · 567248d · 567248d
1 parent 15523cd
commit 567248d
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx
@@ -123,9 +123,17 @@ export default class SearchBar extends React.Component<IProps, IState> {
                             placeholder={_t("Search…")}
                             onKeyDown={this.onSearchChange}
                         />
-                        <AccessibleButton className={searchButtonClasses} onClick={this.onSearch} />
+                        <AccessibleButton
+                            className={searchButtonClasses}
+                            onClick={this.onSearch}
+                            aria-label={_t("Search")}
+                        />
                     </div>
-                    <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
+                    <AccessibleButton
+                        className="mx_SearchBar_cancel"
+                        onClick={this.props.onCancelClick}
+                        aria-label={_t("Cancel")}
+                    />
                 </div>
                 <SearchWarning isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
             </>