UI & Accessibility issues in customizer menus section

[dilipbheda]

I have found 2 issues in customizer menu section

1) Input box-shadow issue if the input is invalid.

2) Add button properly not display

I have attached an image for better understanding.

[dilipbheda]

Before apply patch

[dilipbheda]

After apply patch

[dilipbheda]

Updated patch

[dlh]

Hi @dilipbheda,

What browser was used to generate these screenshots? Can you explain more what the box-shadow issue is?

[dilipbheda]

Hello @dlh

System info:

Server architecture: Linux 4.15.0-88-generic x86_64
Web server: Apache/2.4.29 (Ubuntu)
PHP version: 7.4.8 (Supports 64bit values)
Browser: Google Chrome ( Version 84.0.4147.89 (Official Build) (64-bit) )

Box shadow issue

• Red box-shadow proper not displaying if the field is invalid and focus on input.

Go to - customize -> Homepage Settings -> Click on Add New Page

[celloexpressions]

I cannot reproduce the add button alignment issue. I can confirm the box-shadow issue, although the exact display is variable depending on the browser. The issue is that the "invalid" styling (border: 1px solid #d63638;) conflicts with the focus styling (blue box-shadow).

We need to maintain a visually distinct focus style even when the field is invalid. 50696.2.patch​ won't create enough of a distinction for this focus style. I would suggest using a different style for the invalid state, perhaps with a user notification for improved accessibility.

Can the design or accessibility teams weigh in on a preferred pattern for this?

[joedolson]

I'm going to change this to address the general accessibility issues about this input's error state. In addition to the visual indicator not meeting standards, the input does not produce a spoken error message and is not indicated as being invalid to screen reader users, and would be improved by visible error text.

These are both very fixable.

For design, I'd use the invalid state triggered by .form-invalid .form-required, which would be consistent with other similar cases.

Adding visual indicators, aria attributes, and aria live announcements for errors on the 'Home Page Settings' panel of the customizer.

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

[joedolson]

Made a couple of minor requests in the PR, @jeremiahbratton. But this is basically in good shape!

[jeremiahbratton]

@joedolson Excellent, thanks for the review. I will get on those requests.

[joedolson]

Testing Info:

This patch impacts two places in the Customizer.

1) Homepage Settings: Add new page for Home page and Posts page.
2) Add New Menu item: Add new item of any post type for the menu.

Steps (1):

• Choose "Static Page" as the home page settings.
• Click the Add button without providing text.

Steps (2):

• Navigate to Menus in the customizer.
• Add items to a menu.
• Navigate to the 'Add {post type}' item in post lists.
• Click the 'Add' button without providing text.

Before:

• No visible text error.
• No screen reader announcement of behavior.
• Poor quality visual indicator.

After:

• Visible text error.
• Screen reader announcement with text of error.
• Stronger outline consistent with other error messages.

The two inputs have slightly different error messages, but should otherwise behave the same.

[shailu25]

Test Report

This Report Validates that the indicated patch addresses the issue.✅

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/9627

Environment:

WordPress - 6.9-alpha
OS - Windows
Browser - Chrome
Theme: Twenty Twenty
PHP - 7.4.31
Active Plugin - None

Actual Results:

• Issue Resolved with Patch ✅ (Text Error is Visible with Stronger Outline)

Supplemental Artifacts

• Attached Screenshots.

[shailu25]

Before Home Page Settings n Customizer

[shailu25]

Before Add Menu Item Without Text in Customizer

[shailu25]

After Home Page Settings in Customizer

[shailu25]

After Add Menu Item Without Text in Customizer

[joedolson]

In 60715:

Customizer: Accessible errors when adding new pages.

When setting the home page settings or dynamically adding new pages in the menu manager, the error messages didn't meet accessibility standards.

Add a screen reader announcement, a visible notification, and standardize the error styles.

Props dilipbheda, dlh, celloexpressions, joedolson, jeremiahbratton, shailu25.
Fixes #50696.