Improvements for wp-signup.php and wp-activate.php markup and CSS

[afercia]

Splitting this out from #23197.

First time trying to customize the network registration screens and noticed a few issues.

Bugs that should be addressed, also related to accessibility:

• labels not correctly associated (see screenshot)
• mixed use of explicitly and implicitly associated labels: explicitly associated ones should be preferred
• text not wrapped in semantic elements, often just within <div>s
• an <ul> list (noemail-tips) output within a paragraph
• buttons have a very unique styling, pretty inconsistent with the default WP styles. They don't use the .button CSS class so loading the .buttons.css stylesheet won-t have any effect; the body element also would need a wp-core-ui CSS class
• indentation: spaces instead of tabs

Possible improvements, maybe to split out in separate tickets:

• I'm not sure to understand why wpmu_signup_stylesheet() and wpmu_activate_stylesheet() output inline styles, maybe it's just for historical reasons; ideally, deprecate them or move the styles to login.css
• wp-activate fails to output a proper document <title> tag, not sure this can be solved (see #23197)
• when customizing the registration/activation screens, it's very difficult to distinguish all the screens for styling purposes: there's $stage that can be used to some extent, for example to add CSS classes on the body but it doesn't cover all the cases. Ideally, there should be an easy way to add CSS classes for each step or they should be built-in

Two labels for the same element, the first one should be a fieldset legend together with the sentence "Allow search engines...":

[SergeyBiryukov]

Replying to afercia:

wp-activate fails to output a proper document <title> tag, not sure this can be solved (see #23197)

This was previously fixed in #13638 and #24960, looks like it was reintroduced at some point.

[afercia]

The first part related to markup and CSS could be ideal for a good first bug. Moving to future release.

[allisonplus]

converts spaces to tabs, extracts <ul> from within <p>

[allisonplus]

My patch is partial in nature. I wanted to clarify with @afercia if these were the buttons were the ones you were referencing (see screenshots below) that needed the button class added (with other alignment adjustments as well)

[afercia]

@allisonplus thanks! I was referring to the buttons in the signup form, the ones you get on a multisite installation when you register on the front-end.

P.S. The form changes depending on the registration option enabled.

[afercia]

Related #23637

[DrewAPicture]

Assigning ownership to mark the good-first-bug as "claimed".

[jeremyfelt]

Also related: #34149

[allisonplus]

I'm unable to replicate this on my end multi-site-wise so if someone else is able to, please feel free to transfer ownership.

[afercia]

@jeremyfelt anyone in the Network and Sites team willing to have a look at this for 5.2?

[SteelWagstaff]

Don't know if this is the appropriate place for this, but we had an a11y issue filed in our WordPress based project noting that the wp-signup.php page lacks a main landmark role. See ​https://github.com/pressbooks/pressbooks/issues/1786 & ​https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role. Is that in scope for already planned work?

## wp-signup markup changes:

• Adds id attributes for error messages and includes those IDs at the beginning of aria-describedby when there is an error. The generic error has an ID in case custom fields should refer to that.
• Wraps the blogname input with either its prefix or suffix, so people could arrange them side-by-side if they choose. The div eliminates the need for the line break tag.
• Assigns id attributes for the Site Name prefix and Site Domain suffix and includes those IDs with aria-describedby.
• Wraps input description text for Username and Email Address in paragraph tags with IDs, removing br tags, and uses aria-describedby to associate those with their input.
• Edits Username description text string to specify that letters need to be _lowercase_, to avoid an error.
• Changes the privacy-intro paragraph to a fieldset and uses paragraph tags inside there—including within the legend—to retain most paragraph styles from the theme.
• Wraps "Privacy:" in a label-heading span to restore the original label styling that had been removed along with the tag in changeset:47074.
• Pulls the 'Yes' and 'No' radio buttons out of the label tags and wraps each button with its label in span tags. Directory searches on .mu_register label.checkbox did not find any themes or plugins that override the inline styling, but any authors who might have that would need to adjust their styles because of this change.
• Removes strong tags around 'Yes' and 'No' so they have the labels' font-weight of 600.
• Groups the options for creating a site in a fieldset (when both options are allowed). The legend is new text and visible. Again, the radio buttons and their labels are wrapped inside spans within a paragraph, but these spans stack.
• Pulls noemail-tips list out of the paragraph tag and adjusts indentation accordingly.

## wp-signup CSS changes:

• Resets margin, padding and border for fieldset, legend and paragraphs inside the legend in signup form.
• Uses lowercase color values, abbreviated to three characters when possible.
• Adds box-sizing: border-box to the input fields that were set to 100% width.
• Sets .prefix_address and .suffix_address to display: inline-block with direction: ltr for better display in RTL languages.
• Assigns a new .label-heading class to match label styling.
• Declares a default style for links within the top .mu_alert message to include an underline and match the text color of the rest of the message. (For example, Twenty Twenty-One's dark mode assigns a light link color with low contrast against this light background.)
• Sets the radio button site/account options on separate lines with display: block.
• Adds a small margin to the Privacy 'Yes' and 'No' radio button containers.

## wp-signup file formatting changes:

• Renames $errormsg variables so they are unique to the input instead of redefining the same variable.
• Keeps error message conditional statements within PHP for a _little_ more consistency (jumping in and out of <?php ?> tags was a complaint on ticket:49059). Then both Username and Email Address fields, with their descriptions, are outside the PHP tag.

## wp-activate changes (mostly CSS):

• Centers .wp-activate-container with 90% width, to match .mu_register on the signup page.
• Expands #submit and #key to 100% width and includes box-sizing: border-box.
• Uses .wp-activate-container for form and .error selectors so styles do not affect elements in the header or footer.
• Adds leading zero for #language margin value.
• Assigns a default #333 text color for error messages (if/when they show) to contrast against the light background.
• Adds the autofocus attribute to the Activation Key input and removes the JS that defined the same behavior.

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

[sabernhardt]

Heading considerations probably belong on a different ticket, but I should mention that these pages do not have a specific H1 heading. Some theme authors might add one in a header-wp-signup.php template file, and many themes have the site title as the H1 on these pages because is_home() mistakenly returns true (see #43536 and #39703 about that).

[joedolson]

Per review on Github, the only change I think is needed is to replace the p elements in legends so that the HTML will be valid.

In addition to removing paragraph elements from within legends last month, wp-signup.php has a few other updates in this patch:

1. Makes legend styles consistent with labels and the .label-heading class (span).
2. Fixes the RTL direction and alignment for the blogname field label URL.
3. Removes the top padding from paragraphs that follow a legend or an input. This is not the case in Step 2 of site sign-up for users that are logged out.

Twenty Twenty-Two and other themes still have the margin for the Site Name paragraph in Step 2:

Twenty Thirteen is one theme that does not have the margin:

Screenshots in each bundled theme up to Twenty Twenty-Two

Below are links to ten large image files that show the result of applying the patch, positioning 'before' and 'after' screenshots side-by-side. The logged-out view is only step 1, but step 2 is very similar to the logged-in form (except for the Site Name paragraph). All screenshots use the setting "Both sites and user accounts can be registered."

• ​wp-activate in English (LTR)
• ​wp-signup for logged-in users, using recent themes
• ​wp-signup for logged-in users, using older themes
• ​wp-signup when logged out, using recent themes
• ​wp-signup when logged out, using older themes
• ​wp-activate in Hebrew (RTL)
• ​wp-signup for logged-in users, in Hebrew, using recent themes
• ​wp-signup for logged-in users, in Hebrew, using older themes
• ​wp-signup in Hebrew, logged out, using recent themes
• ​wp-signup in Hebrew, logged out, using older themes

If you want to compare them in one column, you could try the ​zipped collection of 'before' and 'after' screenshots. For example, you could open them in different browser tabs to alternate between them, and the Page Down key can make the scroll distance uniform.

[sabernhardt]

RTL is not a major focus of the ticket, but the patch includes two RTL style changes now.

[joedolson]

Changes look good. Marking for commit.

[joedolson]

In 54191:

Login and Registration: Access improvements to network signup.

Fix a variety of accessibility issues with the network registration and activation screens. Fix associations between error messages and fields, improve labels for radio buttons, add fieldset and legend to properly group fields.

Props afercia, allisonplus, sabernhardt.
Fixes #40361.

Committed in r54191

[sabernhardt]

The new markup should be mentioned in a dev note, either one specifically written for theme authors or the miscellaneous changes note.