Make WordPress Core

Opened 7 years ago

Closed 15 months ago

Last modified 15 months ago

#40361 closed defect (bug) (fixed)

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

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 6.1 Priority: normal
Severity: normal Version:
Component: Login and Registration Keywords: has-screenshots has-patch needs-dev-note
Focuses: accessibility, css, rtl, multisite Cc:

Description (last modified by 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...":

https://cldup.com/MjSr9nih5I.png

Attachments (1)

40361.patch (3.6 KB) - added by allisonplus 7 years ago.
converts spaces to tabs, extracts <ul> from within <p>

Download all attachments as: .zip

Change History (33)

#1 @afercia
7 years ago

  • Focuses accessibility added

#2 @afercia
7 years ago

  • Description modified (diff)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 years ago

#4 in reply to: ↑ description @SergeyBiryukov
7 years ago

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.

#5 @afercia
7 years ago

  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to Future Release

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

@allisonplus
7 years ago

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

#6 @allisonplus
7 years ago

  • Keywords reporter-feedback added

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)

https://cldup.com/Zcf1LOuGZf.jpghttps://cldup.com/LnA6JBeMz0.jpg

#7 @afercia
7 years ago

  • Keywords reporter-feedback removed

@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.

https://cldup.com/QaxWhf3Buk.png

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

Last edited 7 years ago by afercia (previous) (diff)

#8 @afercia
7 years ago

Related #23637

#9 follow-up: @DrewAPicture
6 years ago

  • Keywords has-patch added
  • Owner set to allisonplus
  • Status changed from new to assigned

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 years ago

This ticket was mentioned in Slack in #core-multisite by flixos90. View the logs.


6 years ago

#12 @jeremyfelt
6 years ago

Also related: #34149

#13 in reply to: ↑ 9 @allisonplus
6 years ago

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

#15 @afercia
5 years ago

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

This ticket was mentioned in Slack in #core-multisite by jeremyfelt. View the logs.


5 years ago

#17 @SteelWagstaff
4 years ago

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?

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


3 years ago

#19 @sabernhardt
18 months ago

  • Keywords needs-patch added; good-first-bug has-patch removed
  • Milestone changed from Future Release to 6.1
  • Owner changed from allisonplus to sabernhardt
  • Status changed from assigned to accepted

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


17 months ago

This ticket was mentioned in PR #3015 on WordPress/wordpress-develop by sabernhardt.


17 months ago
#21

  • Keywords has-patch added; needs-patch removed

## 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

#22 @sabernhardt
17 months ago

  • Focuses css added

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).

Last edited 17 months ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


16 months ago

#24 @joedolson
16 months ago

  • Keywords reviewing added
  • Owner changed from sabernhardt to joedolson

#25 @joedolson
16 months ago

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.

sabernhardt commented on PR #3015:


15 months ago
#26

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:

https://i0.wp.com/user-images.githubusercontent.com/17100257/189969094-a2b0b32b-d4bc-439d-a642-c398d8b43a32.png

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

https://i0.wp.com/user-images.githubusercontent.com/17100257/189969099-ff537890-aea4-49b1-b820-9fac6a79f76d.png

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."

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.

#27 @sabernhardt
15 months ago

  • Focuses rtl added

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

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


15 months ago

#29 @joedolson
15 months ago

  • Keywords commit added; reviewing removed

Changes look good. Marking for commit.

#30 @joedolson
15 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

joedolson commented on PR #3015:


15 months ago
#31

Committed in r54191

#32 @sabernhardt
15 months ago

  • Keywords needs-dev-note added; commit removed

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

Note: See TracTickets for help on using tickets.