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

This commit is contained in:
Michael Telatynski
2023-03-30 10:26:19 +01:00
committed by GitHub
parent 15523cde36
commit 567248d5c5

View File

@@ -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} />
</>