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

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"