Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

A11y: The Creating a room error messages are not linked to the input box in a way that allows screen-readers to see where the error is #24963

Closed
daniellekirkwood opened this issue Mar 27, 2023 · 7 comments · Fixed by matrix-org/matrix-react-sdk#10522
Closed

A11y: The Creating a room error messages are not linked to the input box in a way that allows screen-readers to see where the error is #24963

daniellekirkwood opened this issue Mar 27, 2023 · 7 comments · Fixed by matrix-org/matrix-react-sdk#10522
Assignees
@t3chguy
Labels
A11y customer-retainer Z-Compound

Comments

@daniellekirkwood
Copy link
Contributor

daniellekirkwood commented Mar 27, 2023 •
edited
Loading

Screenshot 2023-03-27 at 09 22 57

If no name for creating a room is entered in the input field, an error message appears (example marked in red), which is not linked to the input field. Screen reader users therefore do not find out where they can correct the incorrect input.

This problem exists with other input fields on the checked page

Please ask @daniellekirkwood about timesheeting
@t3chguy t3chguy self-assigned this Apr 4, 2023
@t3chguy
Copy link
Member

t3chguy commented Apr 4, 2023

We give it a role of alert so screen readers should read it immediately.

The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user.

Screen.Recording.2023-04-04.at.09.06.43.mov

@daniellekirkwood works fine for me

@daniellekirkwood
Copy link
Contributor Author

We have the same thing for all the input boxes on this screen?

@t3chguy
Copy link
Member

t3chguy commented Apr 4, 2023

That's just how our field validation works, its not specific to this screen

@daniellekirkwood
Copy link
Contributor Author

Notes from call:

  • Alert doesn't connect the error message to the field - its just read immediately when it happens
  • ARIA polite will wait until the user is done typing and then call out the error message
  • It's odd to show an error message when I tab into the field
  • And we need to have it connected: ARIA describe by.

@t3chguy
Copy link
Member

t3chguy commented Apr 5, 2023 •
edited
Loading

Alert doesn't connect the error message to the field - its just read immediately when it happens

And we need to have it connected: ARIA describe by.

Will get this done

ARIA polite will wait until the user is done typing and then call out the error message

But it doesn't use polite, it uses assertive - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true".

It's odd to show an error message when I tab into the field

Not sure I follow what you mean by this @daniellekirkwood

@t3chguy t3chguy mentioned this issue Apr 5, 2023
Merged
@daniellekirkwood
Copy link
Contributor Author

It's odd to show an error message when I tab into the field

Not sure I follow what you mean by this @daniellekirkwood

In the video it appeared as though as soon as you tab into the field it shows the error message, rather than waiting for the user to enter any info or tab out

@t3chguy
Copy link
Member

t3chguy commented Apr 17, 2023

@daniellekirkwood that sounds like a different issue than

A11y: The Creating a room error messages are not linked to the input box in a way that allows screen-readers to see where the error is

Could you open a new issue for that?

bmwiedemann pushed a commit to bmwiedemann/openSUSE that referenced this issue Apr 25, 2023
@bmwiedemann
Update element-desktop to version 1.11.30 / rev 34 via SR 1082749
81df19f 
https://build.opensuse.org/request/show/1082749
by user dheidler + dimstar_suse
- Version 1.11.30
## 🔒 Security
 * Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw
## ✨ Features
 * Pick sensible default option for phone country dropdown ([\#10627](matrix-org/matrix-react-sdk#10627)). Fixes element-hq/element-web#3528.
 * Relate field validation tooltip via aria-describedby ([\#10522](matrix-org/matrix-react-sdk#10522)). Fixes element-hq/element-web#24963.
 * Handle more completion types in rte autocomplete ([\#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner.
 * Show a tile for an unloaded predecessor room if it has via_servers ([\#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @
su-ex added a commit to SchildiChat/element-desktop that referenced this issue Apr 25, 2023
@su-ex
Merge tag 'v1.11.30' into sc
7072bb8 
* Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw
* Pick sensible default option for phone country dropdown ([\#10627](matrix-org/matrix-react-sdk#10627)). Fixes element-hq/element-web#3528.
* Relate field validation tooltip via aria-describedby ([\#10522](matrix-org/matrix-react-sdk#10522)). Fixes element-hq/element-web#24963.
* Handle more completion types in rte autocomplete ([\#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner.
* Show a tile for an unloaded predecessor room if it has via_servers ([\#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @andybalaam.
* Exclude message timestamps from aria live region ([\#10584](matrix-org/matrix-react-sdk#10584)). Fixes element-hq/element-web#5696.
* Make composer format bar an aria toolbar ([\#10583](matrix-org/matrix-react-sdk#10583)). Fixes element-hq/element-web#11283.
* Improve accessibility of font slider ([\#10473](matrix-org/matrix-react-sdk#10473)). Fixes element-hq/element-web#20168 and element-hq/element-web#24962.
* fix file size display from kB to KB ([\#10561](matrix-org/matrix-react-sdk#10561)). Fixes element-hq/element-web#24866. Contributed by @NSV1991.
* Handle /me in rte ([\#10558](matrix-org/matrix-react-sdk#10558)). Contributed by @alunturner.
* bind html with switch for manage extension setting option ([\#10553](matrix-org/matrix-react-sdk#10553)). Contributed by @NSV1991.
* Handle command completions in RTE ([\#10521](matrix-org/matrix-react-sdk#10521)). Contributed by @alunturner.
* Add room and user avatars to rte ([\#10497](matrix-org/matrix-react-sdk#10497)). Contributed by @alunturner.
* Support for MSC3882 revision 1 ([\#10443](matrix-org/matrix-react-sdk#10443)). Contributed by @hughns.
* Check profiles before starting a DM ([\#10472](matrix-org/matrix-react-sdk#10472)). Fixes element-hq/element-web#24830.
* Quick settings: Change the copy / labels on the options ([\#10427](matrix-org/matrix-react-sdk#10427)). Fixes element-hq/element-web#24522. Contributed by @justjanne.
* Update rte autocomplete styling ([\#10503](matrix-org/matrix-react-sdk#10503)). Contributed by @alunturner.
* Workaround Squirrel.Mac wedging app restart after failed update check ([\element-hq#629](element-hq#629)).
* Fix error about webContents on log out ([\element-hq#627](element-hq#627)).
* Fix error when breadcrumb image fails to load ([\element-hq#609](element-hq#609)).
* Fix create subspace dialog not working ([\#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq/element-web#24882
* Fix multiple accessibility defects identified by AXE ([\#10606](matrix-org/matrix-react-sdk#10606)).
* Fix view source from edit history dialog always showing latest event ([\#10626](matrix-org/matrix-react-sdk#10626)). Fixes element-hq/element-web#21859.
* #21451 Fix WebGL disabled error message ([\#10589](matrix-org/matrix-react-sdk#10589)). Contributed by @rashmitpankhania.
* Properly translate errors in `AddThreepid.ts` so they show up translated to the user but not in our logs ([\#10432](matrix-org/matrix-react-sdk#10432)). Contributed by @MadLittleMods.
* Fix overflow on auth pages ([\#10605](matrix-org/matrix-react-sdk#10605)). Fixes element-hq/element-web#19548.
* Fix incorrect avatar background colour when using a custom theme ([\#10598](matrix-org/matrix-react-sdk#10598)). Contributed by @jdauphant.
* Remove dependency on `org.matrix.e2e_cross_signing` unstable feature ([\#10593](matrix-org/matrix-react-sdk#10593)).
* Update setting description to match reality ([\#10600](matrix-org/matrix-react-sdk#10600)). Fixes element-hq/element-web#25106.
* Fix no identity server in help & about settings ([\#10563](matrix-org/matrix-react-sdk#10563)). Fixes element-hq/element-web#25077.
* Fix: Images no longer reserve their space in the timeline correctly ([\#10571](matrix-org/matrix-react-sdk#10571)). Fixes element-hq/element-web#25082. Contributed by @kerryarchibald.
* Fix issues with inhibited accessible focus outlines ([\#10579](matrix-org/matrix-react-sdk#10579)). Fixes element-hq/element-web#19742.
* Fix read receipts falling from sky ([\#10576](matrix-org/matrix-react-sdk#10576)). Fixes element-hq/element-web#25081.
* Fix avatar text issue in rte ([\#10559](matrix-org/matrix-react-sdk#10559)). Contributed by @alunturner.
* fix resizer only work with left mouse click ([\#10546](matrix-org/matrix-react-sdk#10546)). Contributed by @NSV1991.
* Fix send two join requests when joining a room from spotlight search ([\#10534](matrix-org/matrix-react-sdk#10534)). Fixes element-hq/element-web#25054.
* Highlight event when any version triggered a highlight ([\#10502](matrix-org/matrix-react-sdk#10502)). Fixes element-hq/element-web#24923 and element-hq/element-web#24970. Contributed by @kerryarchibald.
* Fix spacing of headings of integration manager on General settings tab ([\#10232](matrix-org/matrix-react-sdk#10232)). Fixes element-hq/element-web#24085. Contributed by @luixxiul.
su-ex added a commit to SchildiChat/element-web that referenced this issue Apr 25, 2023
@su-ex
Merge tag 'v1.11.30' into sc
1968a49 
* Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw
* Pick sensible default option for phone country dropdown ([\element-hq#10627](matrix-org/matrix-react-sdk#10627)). Fixes element-hq#3528.
* Relate field validation tooltip via aria-describedby ([\element-hq#10522](matrix-org/matrix-react-sdk#10522)). Fixes element-hq#24963.
* Handle more completion types in rte autocomplete ([\element-hq#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner.
* Show a tile for an unloaded predecessor room if it has via_servers ([\element-hq#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @andybalaam.
* Exclude message timestamps from aria live region ([\element-hq#10584](matrix-org/matrix-react-sdk#10584)). Fixes element-hq#5696.
* Make composer format bar an aria toolbar ([\element-hq#10583](matrix-org/matrix-react-sdk#10583)). Fixes element-hq#11283.
* Improve accessibility of font slider ([\element-hq#10473](matrix-org/matrix-react-sdk#10473)). Fixes element-hq#20168 and element-hq#24962.
* fix file size display from kB to KB ([\element-hq#10561](matrix-org/matrix-react-sdk#10561)). Fixes element-hq#24866. Contributed by @NSV1991.
* Handle /me in rte ([\element-hq#10558](matrix-org/matrix-react-sdk#10558)). Contributed by @alunturner.
* bind html with switch for manage extension setting option ([\element-hq#10553](matrix-org/matrix-react-sdk#10553)). Contributed by @NSV1991.
* Handle command completions in RTE ([\element-hq#10521](matrix-org/matrix-react-sdk#10521)). Contributed by @alunturner.
* Add room and user avatars to rte ([\element-hq#10497](matrix-org/matrix-react-sdk#10497)). Contributed by @alunturner.
* Support for MSC3882 revision 1 ([\element-hq#10443](matrix-org/matrix-react-sdk#10443)). Contributed by @hughns.
* Check profiles before starting a DM ([\element-hq#10472](matrix-org/matrix-react-sdk#10472)). Fixes element-hq#24830.
* Quick settings: Change the copy / labels on the options ([\element-hq#10427](matrix-org/matrix-react-sdk#10427)). Fixes element-hq#24522. Contributed by @justjanne.
* Update rte autocomplete styling ([\element-hq#10503](matrix-org/matrix-react-sdk#10503)). Contributed by @alunturner.
* Fix create subspace dialog not working ([\element-hq#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq#24882
* Fix multiple accessibility defects identified by AXE ([\element-hq#10606](matrix-org/matrix-react-sdk#10606)).
* Fix view source from edit history dialog always showing latest event ([\element-hq#10626](matrix-org/matrix-react-sdk#10626)). Fixes element-hq#21859.
* element-hq#21451 Fix WebGL disabled error message ([\element-hq#10589](matrix-org/matrix-react-sdk#10589)). Contributed by @rashmitpankhania.
* Properly translate errors in `AddThreepid.ts` so they show up translated to the user but not in our logs ([\element-hq#10432](matrix-org/matrix-react-sdk#10432)). Contributed by @MadLittleMods.
* Fix overflow on auth pages ([\element-hq#10605](matrix-org/matrix-react-sdk#10605)). Fixes element-hq#19548.
* Fix incorrect avatar background colour when using a custom theme ([\#10598](matrix-org/matrix-react-sdk#10598)). Contributed by @jdauphant.
* Remove dependency on `org.matrix.e2e_cross_signing` unstable feature ([\element-hq#10593](matrix-org/matrix-react-sdk#10593)).
* Update setting description to match reality ([\element-hq#10600](matrix-org/matrix-react-sdk#10600)). Fixes element-hq#25106.
* Fix no identity server in help & about settings ([\element-hq#10563](matrix-org/matrix-react-sdk#10563)). Fixes element-hq#25077.
* Fix: Images no longer reserve their space in the timeline correctly ([\element-hq#10571](matrix-org/matrix-react-sdk#10571)). Fixes element-hq#25082. Contributed by @kerryarchibald.
* Fix issues with inhibited accessible focus outlines ([\element-hq#10579](matrix-org/matrix-react-sdk#10579)). Fixes element-hq#19742.
* Fix read receipts falling from sky ([\element-hq#10576](matrix-org/matrix-react-sdk#10576)). Fixes element-hq#25081.
* Fix avatar text issue in rte ([\element-hq#10559](matrix-org/matrix-react-sdk#10559)). Contributed by @alunturner.
* fix resizer only work with left mouse click ([\element-hq#10546](matrix-org/matrix-react-sdk#10546)). Contributed by @NSV1991.
* Fix send two join requests when joining a room from spotlight search ([\#10534](matrix-org/matrix-react-sdk#10534)). Fixes element-hq#25054.
* Highlight event when any version triggered a highlight ([\element-hq#10502](matrix-org/matrix-react-sdk#10502)). Fixes element-hq#24923 and element-hq#24970. Contributed by @kerryarchibald.
* Fix spacing of headings of integration manager on General settings tab ([\element-hq#10232](matrix-org/matrix-react-sdk#10232)). Fixes element-hq#24085. Contributed by @luixxiul.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@t3chguy t3chguy

Labels
A11y customer-retainer Z-Compound
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Relate field validation tooltip via aria-describedby matrix-org/matrix-react-sdk
2 participants
@t3chguy @daniellekirkwood