nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Improve screen reader accessibility of auth pages (#31236)

Browse Source 
* 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 <7t3chguy@gmail.com>

* Iterate

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

* Update snapshot

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

* Iterate

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

* Update snapshots

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

* Fix double landmark

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

* Update screenshot

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-11-14 12:46:15 +00:00
committed by GitHub
parent 333bec33ee
commit ac0a91be9e
9 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
View File

@@ -120,9 +120,11 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
class="mx_AuthPage_modalBlur"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
/>
<div
<main
aria-live="polite"
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
tabindex="-1"
>
<div
class="mx_Welcome"
@@ -166,7 +168,7 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
</div>
</div>
</div>
</div>
</main>
</div>
<footer
class="mx_AuthFooter"
@@ -238,9 +240,11 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
class="mx_AuthPage_modalBlur"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
/>
<div
<main
aria-live="polite"
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
tabindex="-1"
>
<div
class="mx_AuthHeader"
@@ -280,7 +284,7 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
</div>
</div>
</div>
<main
<div
class="mx_AuthBody"
>
<h1>
@@ -341,8 +345,8 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
Clear all data
</div>
</div>
</main>
</div>
</div>
</main>
</div>
<footer
class="mx_AuthFooter"

12
test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
View File

@@ -9,9 +9,11 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
class="mx_AuthPage_modal"
style="position: relative;"
>
<div
<main
aria-live="polite"
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; border-radius: 8px;"
tabindex="-1"
>
<div
class="mx_Dialog_border _glass_sepwu_8"
@@ -127,7 +129,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
</div>
</div>
</div>
</div>
</main>
</div>
<footer
class="mx_AuthFooter"
@@ -175,9 +177,11 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
class="mx_AuthPage_modal"
style="position: relative;"
>
<div
<main
aria-live="polite"
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; border-radius: 8px;"
tabindex="-1"
>
<div
class="mx_Dialog_border _glass_sepwu_8"
@@ -282,7 +286,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
</div>
</div>
</div>
</div>
</main>
</div>
<footer
class="mx_AuthFooter"