Validation of custom links in admin menu not accessible

[joedolson]

When adding a custom link that doesn't meet validation, the only notification of the error is a red outline on the input field. It doesn't include any spoken notification, no property change, and the visible notification is color only.

This should include a spoken notification via wp.a11y.speak, a property change to mark the field as invalid, and an improved visible notification.

Related: #60916

[audrasjb]

As per today's bug scrub and as this ticket still needs a patch, we agreed to move it to milestone 6.7. Please feel free to move it back to 6.6 if there is ready-to-commit patch before the end of the beta phase.

This pull request addresses accessibility issues related to custom link validation in the WordPress admin menu. Previously, errors were only visually indicated by a red outline on the input field, without providing sufficient spoken notifications or clear visual cues.

#### Changes Made:

1. JavaScript (nav-menu.js):
   • Added event listener for the "Add to Menu" button click.
   • Implemented validation for the custom URL input field.
   • Introduced ARIA attributes (aria-invalid and aria-describedby) to indicate validation errors.
   • Added logic to display an error message below the input field and announce it via screen reader using wp.a11y.speak.

2. HTML (nav-menu.php):
   • Inserted a <span> element with an ID of custom-url-error below the URL input field to display the error message.

3. CSS (nav-menus.css):
   • Added styling for the .error-message class to ensure proper display of the error message.

#### Benefits:

• Improved Accessibility: By adding ARIA attributes and screen reader notifications, users with disabilities will receive clear and immediate feedback about validation errors.
• Enhanced User Experience: The error message is now prominently displayed below the input field, making it easier for all users to understand and correct validation issues.

Trac ticket: https://core.trac.wordpress.org/ticket/60969

[jainil07]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7130

Environment

• WordPress Playground
• WordPress: 6.7-alpha-20240803.123620
• Browser: Chrome (125.0.6422.141 (Official Build) (64-bit))
• Theme: Twenty Twenty-One
• Active Plugins:
  • None

Actual Results

• x Issue is not resolved with patch.

Additional Notes

• If we have saved the custom link at first and then we remove it, it does not show any error.

Supplemental Artifacts

Before:

After:

[joedolson]

Some changes requested in the PR. ​See requested changes.

[davidbaumwald]

With 6.7 RC 1 releasing today this ticket is being moved to 6.8.

If any maintainer or committer feels the remaining work can be competed in time for 6.7 feel free assume ownership and update the milestone accordingly.

[audrasjb]

Hello @snehapatil02 do you plan to update your PR to implement the changes proposed by @joedolson?

Trac ticket: https://core.trac.wordpress.org/ticket/60969

Add error message to URL input field under the add custom link section.
Add CSS to the error message.

@joedolson I made the changes you suggested can you please review it.

Thank You!

@joedolson I made the changes you suggested can you please review it.

Thank You!

@joedolson I made the changes you suggested can you please review it.

Thank You!

[joedolson]

Updated to extend the same accessibility improvements to custom link errors in the customizer nav menus. Also noted a pre-existing bug in the customizer nav menus error handling, where you could only trigger one error at a time due to an inappropriate if/else.

[joedolson]

To test:

1) Appearance > Menus

• Add a custom link, omitting the link field.
• Observe a visible text error, associated with the input via aria-describedby.
• Observe the output of the ARIA live announcement in wp.a11y.speak.

2) Appearance > Customizer > Menus.

• Same test; except the customizer requires text in the link text field, as well.

[audrasjb]

Confirmation that the first test (custom menu items) works correctly.

[audrasjb]

Confirmation that the second test (customizer) works as well

[joedolson]

I've incorporated the same URL Regex used in the customizer to validate the content in the custom link field. With this, there is a change in how nav menus behave: previously, the customizer was stricter than the admin nav menu interface; they are now the same. There may be values that users have added in the admin that will no longer be allowed. They were never valid link structures, but that doesn't mean they don't exist.

Adding #needs-dev-note because of that change. Probably can just be part of a group note. Marking for commit; especially with this change, I think it's better to get this in earlier. We can always strip out the validation in the admin nav menus if necessary.

[joedolson]

In 59948:

Menus: Validate custom links and add accessible error messages.

Add URL validation in the admin navigation menu manager that matches the validation in the customizer when adding custom links. Improve accessibility of both custom link forms by adding aria-invalid and aria-describedby attributes with visible error messages and announcing the error using wp.a11y.speak().

Props joedolson, nikitasolanki1812, akrocks, pathan-amaankhan, rcreators, ironprogrammer, audrasjb, ankit-k-gupta, chaion07, rinkalpagdar, snehapatil02, jainil07, parthvataliya.
Fixes #60619, #60969.

[JeffPaul]

Note that the dev note for this is ​drafted and part of the Miscellaneous Dev Note.

[JeffPaul]

This has now been published as a section in the ​Miscellaneous developer changes in WordPress 6.8 dev note post.