Iterate landmarks around the app in order to improve a11y (#12064)

* Iterate landmarks around the app in order to improve a11y

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add missing aria-label

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots which have changed a fraction due to default heading margins being different in different landmarks

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-12-20 15:32:24 +00:00 committed by GitHub
parent af31965866
commit 0a881e2123
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 68 additions and 40 deletions

View file

@ -315,6 +315,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
if (this.state.showBreadcrumbs === BreadcrumbsMode.Legacy && !this.props.isMinimized) {
return (
<IndicatorScrollbar
role="navigation"
aria-label={_t("a11y|recent_rooms")}
className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
verticalScrollsHorizontally={true}
>
@ -356,6 +358,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
onFocus={this.onFocus}
onBlur={this.onBlur}
onKeyDown={this.onKeyDown}
role="search"
>
<RoomSearch isMinimized={this.props.isMinimized} />
@ -397,7 +400,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
selected={this.props.pageType === PageType.HomePage}
minimized={this.props.isMinimized}
/>
<div className="mx_LeftPanel_roomListWrapper">
<nav className="mx_LeftPanel_roomListWrapper" aria-label={_t("common|rooms")}>
<div
className={roomListClasses}
ref={this.listContainerRef}
@ -407,7 +410,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
>
{roomList}
</div>
</div>
</nav>
</div>
</div>
);