Problem/Motivation

While reevaluating #2852874: [Meta] Set the required state for all fields in Core in the Accessibility Object Model (AOM) it turned out that some of the fields in core also have not properly set the invalid state for fields that failed the validation on a form submit and in consequence are not programmatically labeled as invalid (see invalid_data.mp4) The affected fields in the test with Safari and VoiceOver were:

  1. Formatted long text
  2. Formatted long text with summary
  3. Date datetime
  4. Date datetime range
  5. Date timestamp
  6. Comment

The fields in point 1,2, and 6 are not labeled and announced as invalid in Safari, Firefox and Edge with VoiceOver active. While the fields in point 3,4, and 5 are properly announced as invalid in Firefox, but not in Safari and Edge.

Steps to reproduce

  • Create a content type
  • Add all available fields and make each of them required
  • Create a node of the newly created content type
  • Enable your screenreader of choice and submit the form without entering anything so each field errors out

Proposed resolution

Validate all available fields in core in other screenreaders like for example Jaws, NVDA, or Orca and figure out if there are more problems in different set ups.
Create dedicated issues for each affected field type and make sure that the aria-invalid="true" attribute is getting added and the field is properly announced as invalid.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

Issue fork drupal-3600851

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rkoller created an issue. See original summary.

mgifford’s picture

Playwright can be used to test this as well:

mgifford’s picture

StatusFileSize
new31.94 KB
new51.58 KB
new69.37 KB
new57.13 KB

Formatted long text

Long Text

Date and time

date

Screenshots from video by @rkoller

I've confirmed this in my local testing (and using https://www.guidepup.dev )

  • CKEditor fields have aria-invalid="true" in DOM but guidepup doesn't announce "invalid" on the rich text textbox (only the plain Title field does)
  • Date/Time fields have aria-invalid="true" in DOM but guidepup doesn't announce "invalid" on them either
  • Summary sub-textarea still hidden by CKEditor 5
  • Comment body still not rendering (separate entity form issue)

mgifford’s picture

Status: Active » Needs review

AI was used in the creation of this patch and the testing here. I'm still getting the branching wrong, but do look at the main branch not the other.

mgifford’s picture

Status: Needs review » Needs work

This isn't working in my tests locally.