Skip to content

Commit ac0a91b

Browse files
t3chguyt3chguy
authored
Improve screen reader accessibility of auth pages (#31236)
* Improve screen reader accessibility of auth pages Using a combination of auto-focus + aria-live to ensure content is read as the states progress For https://element-io.atlassian.net/browse/PSB-971 Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update snapshot Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Fix double landmark Signed-off-by: Michael Telatynski <[email protected]> * Update screenshot Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 333bec3 commit ac0a91b

File tree

9 files changed

+33
-18
lines changed

9 files changed

+33
-18
lines changed

‎playwright/e2e/login/login-consent.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ test.describe("Login", () => {
129129
await expect(page.getByRole("heading", { name: "Welcome to Element!" })).toBeVisible();
130130

131131
// Start the login process
132+
await expect(axe).toHaveNoViolations();
132133
await page.getByRole("link", { name: "Sign in" }).click();
133134

134135
// first pick the homeserver, as otherwise the user picker won't be visible
@@ -148,8 +149,6 @@ test.describe("Login", () => {
148149
await selectHomeserver(page, homeserver.baseUrl);
149150

150151
await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
151-
// Disabled because flaky - see https://github.com/vector-im/element-web/issues/24688
152-
// cy.percySnapshot("Login");
153152
await expect(axe).toHaveNoViolations();
154153

155154
await page.getByRole("textbox", { name: "Username" }).fill(credentials.username);

‎playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png‎

91.8 KB
Loading

‎res/welcome.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,11 +167,11 @@
167167

168168
<div class="mx_Parent">
169169
<a href="https://element.io" target="_blank" rel="noopener">
170-
<img src="$logoUrl" alt="" class="mx_Logo" />
170+
<img src="$logoUrl" alt="$brand" class="mx_Logo" />
171171
</a>
172172
<h1 class="mx_Header_title">_t("welcome_to_element")</h1>
173173
<!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it -->
174-
<h4 class="mx_Header_subtitle">_t("powered_by_matrix_with_logo")</h4>
174+
<h2 class="mx_Header_subtitle">_t("powered_by_matrix_with_logo")</h2>
175175
<div class="mx_ButtonGroup">
176176
<div class="mx_ButtonRow">
177177
<a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">

‎src/components/views/auth/AuthBody.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ interface Props {
1414
}
1515

1616
export default function AuthBody({ flex, className, children }: PropsWithChildren<Props>): JSX.Element {
17-
return <main className={classNames("mx_AuthBody", className, { mx_AuthBody_flex: flex })}>{children}</main>;
17+
return <div className={classNames("mx_AuthBody", className, { mx_AuthBody_flex: flex })}>{children}</div>;
1818
}

‎src/components/views/auth/AuthPage.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,14 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
8989
<div className="mx_AuthPage" style={pageStyle}>
9090
<div className={modalClasses} style={modalStyle}>
9191
{modalBlur}
92-
<div className="mx_AuthPage_modalContent" style={modalContentStyle}>
92+
<main
93+
className="mx_AuthPage_modalContent"
94+
style={modalContentStyle}
95+
tabIndex={-1}
96+
aria-live="polite"
97+
>
9398
{this.props.children}
94-
</div>
99+
</main>
95100
</div>
96101
<AuthFooter />
97102
</div>

‎src/components/views/auth/Welcome.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default class Welcome extends React.PureComponent<EmptyObject> {
2626
}
2727

2828
const replaceMap: Record<string, string> = {
29+
"$brand": SdkConfig.get("brand"),
2930
"$riot:ssoUrl": "#/start_sso",
3031
"$riot:casUrl": "#/start_cas",
3132
"$matrixLogo": MATRIX_LOGO_HTML,

‎test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,11 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
120120
class="mx_AuthPage_modalBlur"
121121
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
122122
/>
123-
<div
123+
<main
124+
aria-live="polite"
124125
class="mx_AuthPage_modalContent"
125126
style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
127+
tabindex="-1"
126128
>
127129
<div
128130
class="mx_Welcome"
@@ -166,7 +168,7 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
166168
</div>
167169
</div>
168170
</div>
169-
</div>
171+
</main>
170172
</div>
171173
<footer
172174
class="mx_AuthFooter"
@@ -238,9 +240,11 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
238240
class="mx_AuthPage_modalBlur"
239241
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
240242
/>
241-
<div
243+
<main
244+
aria-live="polite"
242245
class="mx_AuthPage_modalContent"
243246
style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
247+
tabindex="-1"
244248
>
245249
<div
246250
class="mx_AuthHeader"
@@ -280,7 +284,7 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
280284
</div>
281285
</div>
282286
</div>
283-
<main
287+
<div
284288
class="mx_AuthBody"
285289
>
286290
<h1>
@@ -341,8 +345,8 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
341345
Clear all data
342346
</div>
343347
</div>
344-
</main>
345-
</div>
348+
</div>
349+
</main>
346350
</div>
347351
<footer
348352
class="mx_AuthFooter"

‎test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
99
class="mx_AuthPage_modal"
1010
style="position: relative;"
1111
>
12-
<div
12+
<main
13+
aria-live="polite"
1314
class="mx_AuthPage_modalContent"
1415
style="display: flex; z-index: 1; border-radius: 8px;"
16+
tabindex="-1"
1517
>
1618
<div
1719
class="mx_Dialog_border _glass_sepwu_8"
@@ -127,7 +129,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
127129
</div>
128130
</div>
129131
</div>
130-
</div>
132+
</main>
131133
</div>
132134
<footer
133135
class="mx_AuthFooter"
@@ -175,9 +177,11 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
175177
class="mx_AuthPage_modal"
176178
style="position: relative;"
177179
>
178-
<div
180+
<main
181+
aria-live="polite"
179182
class="mx_AuthPage_modalContent"
180183
style="display: flex; z-index: 1; border-radius: 8px;"
184+
tabindex="-1"
181185
>
182186
<div
183187
class="mx_Dialog_border _glass_sepwu_8"
@@ -282,7 +286,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
282286
</div>
283287
</div>
284288
</div>
285-
</div>
289+
</main>
286290
</div>
287291
<footer
288292
class="mx_AuthFooter"

‎test/unit-tests/components/views/auth/__snapshots__/AuthPage-test.tsx.snap‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ exports[`<AuthPage /> should match snapshot 1`] = `
1313
class="mx_AuthPage_modalBlur"
1414
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
1515
/>
16-
<div
16+
<main
17+
aria-live="polite"
1718
class="mx_AuthPage_modalContent"
1819
style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
20+
tabindex="-1"
1921
/>
2022
</div>
2123
<footer

0 commit comments

Comments
 (0)