New site form has non-required fields that have to be filled in

[Shelob9]

In multi-site's New Site form, there are several fields that are not required to submit the form (required and aria-required attributes are not set) but the form will fail server-side validation if these fields, such as admin email are not filled in.

The form really should have client-side and server-side validation for UX and accessibility reasons.

[afercia]

Definitely there's a bit of inconsistency across forms in the admin. Many of them should be reviewed. Some years ago an attempt was made to use the HTML5 'required' attribute but seens browsers implementation was a bit poor at that time. See for example [29030] and #22183.

At the very least, I'd say there should be a visual indication of the required fields and aria-required. Further improvements should be carefully evaluated especially thinking at mobile devices, see the discussion on the ticket mentioned above.

[rianrietveld]

related: #16206

[rianrietveld]

Discussed this in the wpa11y bug scrub:
We'll have a go infixing this for 4.7. together with #16206

[rianrietveld]

Discussion about how to indicate the required field at:
​https://wordpress.slack.com/archives/accessibility/p1476119464001821

[afercia]

Related: #23870

[jackreichert]

Replying to rianrietveld:

Discussion about how to indicate the required field at:
​https://wordpress.slack.com/archives/accessibility/p1476119464001821

I'm not sure the discussion is conclusive, did I understand correctly that it would be best to add sprintf( ' ' . __('Required fields are marked %s'), '<span class="required">⁠⁠⁠</span>' ), or are they likely to circle back to another convention?

[jackreichert]

Building upon @dipesh.kakadiya's patch added note: "Required fields are marked"

[ocean90]

novalide="novalidate" was added on purpose. Can you verify that it doesn't reveal the previous issue? See ticket:22183:6 and [20196].

I don't see the need to make '*' translatable (it's currently not even translatable in the description). I'm curious if we can't add the * with CSS ::after.

[jackreichert]

Replying to ocean90:

novalide="novalidate" was added on purpose. Can you verify that it doesn't reveal the previous issue? See ticket:22183:6 and [20196].

Good point, I'll put it back.

I don't see the need to make '*' translatable (it's currently not even translatable in the description). I'm curious if we can't add the * with CSS ::after.

I was trying to work with the discussion linked to above, but I couldn't find other places in the admin that use *, in new user it has (required) which would make the translation more relevant. I'm happy to update the patch to either.
Would you recommend css or revert to (required)?

[jackreichert]

I found that this convention is being used in https://core.trac.wordpress.org/browser/trunk/src/wp-admin/includes/media.php#L1475 so I updated the patch to reflect that.

[afercia]

Not enough time to discuss and establish a convention for all the required form fields in core, punting for now.

[rianrietveld]

adds required asterisk and required attribute

[rianrietveld]

37331-3.diff​

• adds the message Required fields are marked * just above the form
• adds the attribute required="required" to the input field. I did not add the aria-required attribute, as this is already handled and announced by adding the HTML5 required attribute.
• adds a aria-describedby="site-admin-email" to announce the message below the admin email with the input field.

[afercia]

37331.2.diff​ adds a translator comment and minor coding standards.

[afercia]

Note: the patch keeps novalidate="novalidate" on the form, so the added required attributes will not trigger HTML5 browser validation. I'd tend to think using browser validation is a decision that should be made for all the forms in WordPress, and would probably need some discussion and consensus.

[afercia]

In 42793:

Accessibility: Networks and Sites: mark the New Site required form fields as required.

Also, adds an aria-describedby attribute to associate the Admin Email field with its description.

Props dipesh.kakadiya, jackreichert, rianrietveld.
Fixes #37331.