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

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

Browse source
This commit is contained in:
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/rooms/SearchBar.tsx
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} />
</> </>