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

Fix usages of ARIA tabpanel (#10628)

Browse source 
* RovingTabIndex handle looping around start/end

* Make TabbedView expose aria tabpanel/tablist/tab roles

* Fix right panel being wrongly specified as aria tabs

Not all right panels map to the top right header buttons so we cannot describe it as a tabpanel relation

* tsc strict

* Update snapshots

* Fix ARIA AXE violation

* Update tests
This commit is contained in:
Michael Telatynski 2023-04-25 09:31:54 +01:00 committed by GitHub
parent 961b843662
commit a1a087f755
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 153 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/integration-manager/get-openid-token.spec.ts
View file

@ -59,7 +59,7 @@ const INTEGRATION_MANAGER_HTML = `
`;
function openIntegrationManager() {
cy.findByRole("tab", { name: "Room info" }).click();
cy.findByRole("button", { name: "Room info" }).click();
cy.findByRole("button", { name: "Add widgets, bridges & bots" }).click();
}

2
cypress/e2e/integration-manager/kick.spec.ts
View file

@ -62,7 +62,7 @@ const INTEGRATION_MANAGER_HTML = `
`;
function openIntegrationManager() {
cy.findByRole("tab", { name: "Room info" }).click();
cy.findByRole("button", { name: "Room info" }).click();
cy.findByRole("button", { name: "Add widgets, bridges & bots" }).click();
}

15
src/accessibility/RovingTabIndex.tsx
View file

@ -156,6 +156,7 @@ export const reducer: Reducer<IState, IAction> = (state: IState, action: IAction
};
interface IProps {
handleLoop?: boolean;
handleHomeEnd?: boolean;
handleUpDown?: boolean;
handleLeftRight?: boolean;
@ -167,6 +168,7 @@ export const findSiblingElement = (
refs: RefObject<HTMLElement>[],
startIndex: number,
backwards = false,
loop = false,
): RefObject<HTMLElement> | undefined => {
if (backwards) {
for (let i = startIndex; i < refs.length && i >= 0; i--) {
@ -174,12 +176,18 @@ export const findSiblingElement = (
return refs[i];
}
}
if (loop) {
return findSiblingElement(refs.slice(startIndex + 1), refs.length - 1, true, false);
}
} else {
for (let i = startIndex; i < refs.length && i >= 0; i++) {
if (refs[i].current?.offsetParent !== null) {
return refs[i];
}
}
if (loop) {
return findSiblingElement(refs.slice(0, startIndex), 0, false, false);
}
}
};
@ -188,6 +196,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
handleHomeEnd,
handleUpDown,
handleLeftRight,
handleLoop,
onKeyDown,
}) => {
const [state, dispatch] = useReducer<Reducer<IState, IAction>>(reducer, {
@ -252,7 +261,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
handled = true;
if (context.state.refs.length > 0) {
const idx = context.state.refs.indexOf(context.state.activeRef!);
focusRef = findSiblingElement(context.state.refs, idx + 1);
focusRef = findSiblingElement(context.state.refs, idx + 1, false, handleLoop);
}
}
break;
@ -266,7 +275,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
handled = true;
if (context.state.refs.length > 0) {
const idx = context.state.refs.indexOf(context.state.activeRef!);
focusRef = findSiblingElement(context.state.refs, idx - 1, true);
focusRef = findSiblingElement(context.state.refs, idx - 1, true, handleLoop);
}
}
break;
@ -289,7 +298,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
});
}
},
[context, onKeyDown, handleHomeEnd, handleUpDown, handleLeftRight],
[context, onKeyDown, handleHomeEnd, handleUpDown, handleLeftRight, handleLoop],
);
return (

46
src/components/structures/TabbedView.tsx
View file

@ -22,9 +22,9 @@ import { logger } from "matrix-js-sdk/src/logger";
import { _t } from "../../languageHandler";
import AutoHideScrollbar from "./AutoHideScrollbar";
import AccessibleButton from "../views/elements/AccessibleButton";
import { PosthogScreenTracker, ScreenName } from "../../PosthogTrackers";
import { NonEmptyArray } from "../../@types/common";
import { RovingAccessibleButton, RovingTabIndexProvider } from "../../accessibility/RovingTabIndex";
/**
* Represents a tab for the TabbedView.
@ -98,9 +98,10 @@ export default class TabbedView extends React.Component<IProps, IState> {
}
private renderTabLabel(tab: Tab): JSX.Element {
let classes = "mx_TabbedView_tabLabel ";
if (this.state.activeTabId === tab.id) classes += "mx_TabbedView_tabLabel_active";
const isActive = this.state.activeTabId === tab.id;
const classes = classNames("mx_TabbedView_tabLabel", {
mx_TabbedView_tabLabel_active: isActive,
});
let tabIcon: JSX.Element | undefined;
if (tab.icon) {
@ -108,24 +109,35 @@ export default class TabbedView extends React.Component<IProps, IState> {
}
const onClickHandler = (): void => this.setActiveTab(tab);
const id = this.getTabId(tab);
const label = _t(tab.label);
return (
<AccessibleButton
<RovingAccessibleButton
className={classes}
key={"tab_label_" + tab.label}
onClick={onClickHandler}
data-testid={`settings-tab-${tab.id}`}
role="tab"
aria-selected={isActive}
aria-controls={id}
>
{tabIcon}
<span className="mx_TabbedView_tabLabel_text">{label}</span>
</AccessibleButton>
<span className="mx_TabbedView_tabLabel_text" id={`${id}_label`}>
{label}
</span>
</RovingAccessibleButton>
);
}
private getTabId(tab: Tab): string {
return `mx_tabpanel_${tab.id}`;
}
private renderTabPanel(tab: Tab): React.ReactNode {
const id = this.getTabId(tab);
return (
<div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
<div className="mx_TabbedView_tabPanel" key={id} id={id} aria-labelledby={`${id}_label`}>
<AutoHideScrollbar className="mx_TabbedView_tabPanelContent">{tab.body}</AutoHideScrollbar>
</div>
);
@ -147,7 +159,23 @@ export default class TabbedView extends React.Component<IProps, IState> {
return (
<div className={tabbedViewClasses}>
{screenName && <PosthogScreenTracker screenName={screenName} />}
<div className="mx_TabbedView_tabLabels">{labels}</div>
<RovingTabIndexProvider
handleLoop
handleHomeEnd
handleLeftRight={this.props.tabLocation == TabLocation.TOP}
handleUpDown={this.props.tabLocation == TabLocation.LEFT}
>
{({ onKeyDownHandler }) => (
<div
className="mx_TabbedView_tabLabels"
role="tablist"
aria-orientation={this.props.tabLocation == TabLocation.LEFT ? "vertical" : "horizontal"}
onKeyDown={onKeyDownHandler}
>
{labels}
</div>
)}
</RovingTabIndexProvider>
{panel}
</div>
);

3
src/components/views/right_panel/HeaderButton.tsx
View file

@ -54,8 +54,7 @@ export default class HeaderButton extends React.Component<IProps> {
return (
<AccessibleTooltipButton
{...props}
aria-selected={isHighlighted}
role="tab"
aria-current={isHighlighted ? "true" : "false"}
title={title}
alignment={Alignment.Bottom}
className={classes}

6
src/components/views/right_panel/HeaderButtons.tsx
View file

@ -98,10 +98,6 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
public abstract renderButtons(): JSX.Element;
public render(): React.ReactNode {
return (
<div className="mx_HeaderButtons" role="tablist">
{this.renderButtons()}
</div>
);
return <div className="mx_HeaderButtons">{this.renderButtons()}</div>;
}
}

27
test/components/structures/__snapshots__/TabbedView-test.tsx.snap
View file

@ -6,12 +6,16 @@ exports[`<TabbedView /> renders tabs 1`] = `
class="mx_TabbedView mx_TabbedView_tabsOnLeft"
>
<div
aria-orientation="vertical"
class="mx_TabbedView_tabLabels"
role="tablist"
>
<div
aria-controls="mx_tabpanel_GENERAL"
aria-selected="true"
class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
data-testid="settings-tab-GENERAL"
role="button"
role="tab"
tabindex="0"
>
<span
@ -19,43 +23,52 @@ exports[`<TabbedView /> renders tabs 1`] = `
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_GENERAL_label"
>
General
</span>
</div>
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_LABS"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-LABS"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon labs"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_LABS_label"
>
Labs
</span>
</div>
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_SECURITY"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-SECURITY"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon security"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_SECURITY_label"
>
Security
</span>
</div>
</div>
<div
aria-labelledby="mx_tabpanel_GENERAL_label"
class="mx_TabbedView_tabPanel"
id="mx_tabpanel_GENERAL"
>
<div
class="mx_AutoHideScrollbar mx_TabbedView_tabPanelContent"

41
test/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap
View file

@ -3,9 +3,11 @@
exports[`<RoomSettingsDialog /> Settings tabs renders default tabs correctly 1`] = `
NodeList [
<div
aria-controls="mx_tabpanel_ROOM_GENERAL_TAB"
aria-selected="true"
class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
data-testid="settings-tab-ROOM_GENERAL_TAB"
role="button"
role="tab"
tabindex="0"
>
<span
@ -13,66 +15,79 @@ NodeList [
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_ROOM_GENERAL_TAB_label"
>
General
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_ROOM_SECURITY_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-ROOM_SECURITY_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_securityIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_ROOM_SECURITY_TAB_label"
>
Security & Privacy
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_ROOM_ROLES_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-ROOM_ROLES_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_rolesIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_ROOM_ROLES_TAB_label"
>
Roles & Permissions
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_ROOM_NOTIFICATIONS_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-ROOM_NOTIFICATIONS_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_notificationsIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_ROOM_NOTIFICATIONS_TAB_label"
>
Notifications
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_ROOM_POLL_HISTORY_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-ROOM_POLL_HISTORY_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_RoomSettingsDialog_pollsIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_ROOM_POLL_HISTORY_TAB_label"
>
Poll history
</span>

77
test/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap
View file

@ -3,9 +3,11 @@
exports[`<UserSettingsDialog /> renders tabs correctly 1`] = `
NodeList [
<div
aria-controls="mx_tabpanel_USER_GENERAL_TAB"
aria-selected="true"
class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
data-testid="settings-tab-USER_GENERAL_TAB"
role="button"
role="tab"
tabindex="0"
>
<span
@ -13,126 +15,151 @@ NodeList [
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_GENERAL_TAB_label"
>
General
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-USER_APPEARANCE_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_appearanceIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_APPEARANCE_TAB_label"
>
Appearance
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_USER_NOTIFICATIONS_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-USER_NOTIFICATIONS_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_bellIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_NOTIFICATIONS_TAB_label"
>
Notifications
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_USER_PREFERENCES_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-USER_PREFERENCES_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_preferencesIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_PREFERENCES_TAB_label"
>
Preferences
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_USER_KEYBOARD_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-USER_KEYBOARD_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_keyboardIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_KEYBOARD_TAB_label"
>
Keyboard
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_USER_SIDEBAR_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-USER_SIDEBAR_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_sidebarIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_SIDEBAR_TAB_label"
>
Sidebar
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_USER_SECURITY_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-USER_SECURITY_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_securityIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_SECURITY_TAB_label"
>
Security & Privacy
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_USER_LABS_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-USER_LABS_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_labsIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_LABS_TAB_label"
>
Labs
</span>
</div>,
<div
class="mx_AccessibleButton mx_TabbedView_tabLabel "
aria-controls="mx_tabpanel_USER_HELP_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
data-testid="settings-tab-USER_HELP_TAB"
role="button"
tabindex="0"
role="tab"
tabindex="-1"
>
<span
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_helpIcon"
/>
<span
class="mx_TabbedView_tabLabel_text"
id="mx_tabpanel_USER_HELP_TAB_label"
>
Help & About
</span>