[wp-trac] [WordPress Trac] #40361: Improvements for wp-signup.php and wp-activate.php markup and CSS

[WordPress Trac]

#40361: Improvements for wp-signup.php and wp-activate.php markup and CSS
-----------------------------------+---------------------------------------
 Reporter:  afercia                |       Owner:
     Type:  defect (bug)           |      Status:  new
 Priority:  normal                 |   Milestone:  Awaiting Review
Component:  Login and              |     Version:
  Registration                     |  Resolution:
 Severity:  normal                 |     Focuses:  accessibility, multisite
 Keywords:  has-screenshots        |
-----------------------------------+---------------------------------------
Description changed by afercia:

Old description:

> Splitting this out from #23197.
>
> First time trying to customize the network registration screens and
> notices 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...":
>
> [[Image(https://cldup.com/MjSr9nih5I.png)]]

New description:

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

 [[Image(https://cldup.com/MjSr9nih5I.png)]]

--

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40361#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform