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

t3chguy/dedup-icons-17oct
Michael Telatynski 2023-03-30 10:26:19 +01:00 committed by GitHub
parent 15523cde36
commit 567248d5c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 2 deletions

View File

@ -123,9 +123,17 @@ export default class SearchBar extends React.Component<IProps, IState> {
placeholder={_t("Search…")} placeholder={_t("Search…")}
onKeyDown={this.onSearchChange} onKeyDown={this.onSearchChange}
/> />
<AccessibleButton className={searchButtonClasses} onClick={this.onSearch} /> <AccessibleButton
className={searchButtonClasses}
onClick={this.onSearch}
aria-label={_t("Search")}
/>
</div> </div>
<AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} /> <AccessibleButton
className="mx_SearchBar_cancel"
onClick={this.props.onCancelClick}
aria-label={_t("Cancel")}
/>
</div> </div>
<SearchWarning isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} /> <SearchWarning isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
</> </>