-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Closed
Closed
Copy link
Labels
[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components/packages/components[Status] In ProgressTracking issues with work in progressTracking issues with work in progress[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Description
Description
Error messages need to have an explicit connection to the field that generated the error. The input validation on the link control displays a message which is announced using aria-live, but is not connected to the input. While this will serve in most cases, it will be a problem if the user misses the announcement for any reason (it's overridden by another message, just missed because of distraction, etc.). It won't be announced if the user navigates away from the field (e.g., to the submit button), and then navigates back.
Two suggestions:
- Explicitly connect the two fields by using
aria-describedbywith the ID attribute of the error message. - Announce the message through
a11y.speak()instead of adding a newaria-liveregion specifically for that message.
Step-by-step reproduction instructions
- Add a paragraph with text.
- Select text and add a Link
- Enter a non-URL string like 'test' in the field and click 'Submit' or press the 'Enter' key.
- Note the appended text with the invalid URL error message with no ID connection to the input.
Screenshots, screen recording, code snippet
(Note: the image is using the Text Controls mode in the admin, which also exposes issues with the submit button text, which is unrelated to this issue.)
Environment info
- 7.0-beta5-62067
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components/packages/components[Status] In ProgressTracking issues with work in progressTracking issues with work in progress[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Type
Fields
Give feedbackNo fields configured for issues without a type.