diff --git a/playwright/e2e/user-view/user-view.spec.ts b/playwright/e2e/user-view/user-view.spec.ts index 6e642991e26..eddc466fece 100644 --- a/playwright/e2e/user-view/user-view.spec.ts +++ b/playwright/e2e/user-view/user-view.spec.ts @@ -25,7 +25,7 @@ test.describe("UserView", () => { test("should render the user view as expected", async ({ page, homeserver, user, bot }) => { await page.goto(`/#/user/${bot.credentials.userId}`); - const rightPanel = page.getByRole("complementary"); + const rightPanel = page.locator("#mx_RightPanel"); await expect(rightPanel.getByRole("heading", { name: bot.credentials.displayName, exact: true })).toBeVisible(); await expect(rightPanel.getByText("1 session")).toBeVisible(); await expect(rightPanel).toMatchScreenshot("user-info.png", { diff --git a/playwright/pages/settings.ts b/playwright/pages/settings.ts index 347886a0ab4..916ce26e032 100644 --- a/playwright/pages/settings.ts +++ b/playwright/pages/settings.ts @@ -90,11 +90,11 @@ export class Settings { } /** - * Open room settings (via room menu), returns a locator to the dialog + * Open room settings (via room header menu), returns a locator to the dialog * @param tab the name of the tab to switch to after opening, optional. */ public async openRoomSettings(tab?: string): Promise { - await this.page.getByRole("main").getByRole("button", { name: "Room options", exact: true }).click(); + await this.page.getByRole("banner").getByRole("button", { name: "Room options", exact: true }).click(); await this.page.locator(".mx_RoomTile_contextMenu").getByRole("menuitem", { name: "Settings" }).click(); if (tab) await this.switchTab(tab); return this.page.locator(".mx_Dialog").filter({ has: this.page.locator(".mx_RoomSettingsDialog") }); diff --git a/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png b/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png index c41d0b488ab..a01cabd6e4a 100644 Binary files a/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png and b/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png index 81c3b3efcbd..c9c4346c8ed 100644 Binary files a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/registration-linux.png b/playwright/snapshots/register/register.spec.ts/registration-linux.png index cd4d8bcf3f8..9540d32692c 100644 Binary files a/playwright/snapshots/register/register.spec.ts/registration-linux.png and b/playwright/snapshots/register/register.spec.ts/registration-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png index 3bf61e1d1bf..96c67985c99 100644 Binary files a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png b/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png index c7ed8fc8643..6617e64aadc 100644 Binary files a/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png and b/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png differ diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 60c3af16ac4..c2454e04fb0 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -315,6 +315,8 @@ export default class LeftPanel extends React.Component { if (this.state.showBreadcrumbs === BreadcrumbsMode.Legacy && !this.props.isMinimized) { return ( @@ -356,6 +358,7 @@ export default class LeftPanel extends React.Component { onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown} + role="search" > @@ -397,7 +400,7 @@ export default class LeftPanel extends React.Component { selected={this.props.pageType === PageType.HomePage} minimized={this.props.isMinimized} /> -
+
+ ); diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 919b5e6053d..c0707fba260 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -683,7 +683,7 @@ class LoggedInView extends React.Component {
- +
{pageElement}
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index ac90dd9c81b..72aab052f2d 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -406,7 +406,7 @@ export class RoomView extends React.Component { private unmounted = false; private permalinkCreators: Record = {}; - private roomView = createRef(); + private roomView = createRef(); private searchResultsPanel = createRef(); private messagePanel: TimelinePanel | null = null; private roomViewBody = createRef(); @@ -2302,7 +2302,7 @@ export class RoomView extends React.Component { // if statusBar does not exist then statusBarArea is blank and takes up unnecessary space on the screen // show statusBarArea only if statusBar is present const statusBarArea = statusBar && ( -
+
{statusBar} @@ -2528,13 +2528,13 @@ export class RoomView extends React.Component { )} {auxPanel} -
+
{topUnreadMessagesBar} {jumpToBottom} {messagePanel} {searchResultsPanel} -
+ {statusBarArea} {previewBar} {messageComposer} @@ -2550,6 +2550,7 @@ export class RoomView extends React.Component { userId={this.context.client.getSafeUserId()} resizeNotifier={this.props.resizeNotifier} showApps={true} + role="main" /> {previewBar} @@ -2563,6 +2564,7 @@ export class RoomView extends React.Component { room={this.state.room} resizing={this.state.resizing} waitForCall={isVideoRoom(this.state.room)} + role="main" /> {previewBar} @@ -2603,7 +2605,7 @@ export class RoomView extends React.Component { return ( -
{
- +
); } diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 1357c0a8143..b94a70e78c0 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -180,11 +180,11 @@ const EmptyThread: React.FC = ({ hasThreads, filterOption, sh } return ( - +
); }; diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx index 7d1956c8159..16258bb3d78 100644 --- a/src/components/views/emojipicker/EmojiPicker.tsx +++ b/src/components/views/emojipicker/EmojiPicker.tsx @@ -362,7 +362,12 @@ class EmojiPicker extends React.Component { {({ onKeyDownHandler }) => { let heightBefore = 0; return ( -
+
{ selectedEmojis={this.props.selectedEmojis} /> )} -
+ ); }} diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx index fa92987666e..2247edce045 100644 --- a/src/components/views/rooms/AppsDrawer.tsx +++ b/src/components/views/rooms/AppsDrawer.tsx @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { AriaRole } from "react"; import classNames from "classnames"; import { Resizable, Size } from "re-resizable"; import { Room } from "matrix-js-sdk/src/matrix"; @@ -42,6 +42,7 @@ interface IProps { resizeNotifier: ResizeNotifier; showApps?: boolean; // Should apps be rendered maxHeight: number; + role?: AriaRole; } interface IState { @@ -294,7 +295,7 @@ export default class AppsDrawer extends React.Component { } return ( -
+
{drawer} {spinner}
diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index 7210b3a4eaa..4e3e20a7c59 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -65,7 +65,7 @@ export default class AuxPanel extends React.Component { } return ( - + {this.props.children} {appsDrawer} {callView} diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index ac1fa3e5d53..53e05e69a17 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -602,6 +602,8 @@ export class MessageComposer extends React.Component { className={classes} ref={this.ref} aria-describedby={this.state.recordingTimeLeftSeconds ? this.tooltipId : undefined} + role="region" + aria-label={_t("a11y|message_composer")} > {recordingTooltip}
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 92d7c78ac9d..b23836050de 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -182,7 +182,7 @@ export default function RoomHeader({ )} - + {additionalButtons?.map((props) => { const label = props.label(); diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index 6734b2e536f..8f32062fb73 100644 --- a/src/components/views/rooms/RoomListHeader.tsx +++ b/src/components/views/rooms/RoomListHeader.tsx @@ -409,7 +409,7 @@ const RoomListHeader: React.FC = ({ onVisibilityChange }) => { } return ( -
+
+ ); }; diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx index 7e072972aa3..e3b06e5b9f2 100644 --- a/src/components/views/rooms/RoomPreviewBar.tsx +++ b/src/components/views/rooms/RoomPreviewBar.tsx @@ -720,7 +720,7 @@ export default class RoomPreviewBar extends React.Component { ); return ( -
+
{titleElement} {subTitleElements} diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index a773766bdf3..aac1273543f 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -364,10 +364,11 @@ const SpacePanel: React.FC = () => { onDragEndHandler(); }} > -
{ -
+ )} diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 625df3a897c..ee920c02674 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { FC, ReactNode, useState, useContext, useEffect, useMemo, useRef, useCallback } from "react"; +import React, { FC, ReactNode, useState, useContext, useEffect, useMemo, useRef, useCallback, AriaRole } from "react"; import classNames from "classnames"; import { logger } from "matrix-js-sdk/src/logger"; import { defer, IDeferred } from "matrix-js-sdk/src/utils"; @@ -297,9 +297,10 @@ interface StartCallViewProps { resizing: boolean; call: Call | null; setStartingCall: (value: boolean) => void; + role?: AriaRole; } -const StartCallView: FC = ({ room, resizing, call, setStartingCall }) => { +const StartCallView: FC = ({ room, resizing, call, setStartingCall, role }) => { const cli = useContext(MatrixClientContext); // Since connection has to be split across two different callbacks, we @@ -348,7 +349,7 @@ const StartCallView: FC = ({ room, resizing, call, setStarti }, [call, connectDeferred]); return ( -
+
{connected ? null : } {call !== null && ( = ({ room, resizing, call }) => { +const JoinCallView: FC = ({ room, resizing, call, role }) => { const cli = useContext(MatrixClientContext); const connected = isConnected(useConnectionState(call)); const members = useParticipatingMembers(call); @@ -415,7 +417,7 @@ const JoinCallView: FC = ({ room, resizing, call }) => { } return ( -
+
{lobby} {/* We render the widget even if we're disconnected, so it stays loaded */} = ({ room, resizing, waitForCall }) => { +export const CallView: FC = ({ room, resizing, waitForCall, role }) => { const call = useCall(room.roomId); const [startingCall, setStartingCall] = useState(false); if (call === null || startingCall) { if (waitForCall) return null; - return ; + return ( + + ); } else { - return ; + return ; } }; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7b687d9a03f..fe43e73b540 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1,6 +1,8 @@ { "a11y": { + "emoji_picker": "Emoji picker", "jump_first_invite": "Jump to first invite.", + "message_composer": "Message composer", "n_unread_messages": { "one": "1 unread message.", "other": "%(count)s unread messages." @@ -9,7 +11,9 @@ "one": "1 unread mention.", "other": "%(count)s unread messages including mentions." }, + "recent_rooms": "Recent rooms", "room_name": "Room %(name)s", + "room_status_bar": "Room status bar", "unread_messages": "Unread messages.", "user_menu": "User menu" }, diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx index c02d396ce13..3edf0f3cc07 100644 --- a/src/utils/exportUtils/HtmlExport.tsx +++ b/src/utils/exportUtils/HtmlExport.tsx @@ -164,7 +164,7 @@ export default class HTMLExporter extends Exporter { ${_t("export_chat|html_title")} -
- +
`; diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index daa99897d59..1f29fc76bb8 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -373,7 +373,9 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
`; diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap index 9e0fd1a8824..d3cd8e23f8a 100644 --- a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap +++ b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap @@ -13,7 +13,7 @@ exports[`HTMLExport should export 1`] = ` Exported Data -
- +
"