#a11y-headings - Dashboard heading fixes

[Cheffheid]

On the Dashboard page there are a number of headings that need to be changed.

The main "Welcome to WordPress" heading needs to be changed from H3 to H2. And in that same box, the headings "Get Started", "Next Steps", and "More Actions" need to be changed from H4 to H3.

The "Activity" Dashboard widget has a few H4 headings that need to be changed to H3s ("Recently Published", "Comments").

Also, this widget adds an H4 on the comment meta that is probably unnecessary and should be removed:

The titles for the Dashboard widgets are taken care of by #33557.

#a11y-headings

[afercia]

Replying to Cheffheid:

Also, this widget adds an H4 on the comment meta that is probably unnecessary and should be removed:

I'd agree to remove it, I think we need just one main heading to identify the Comments section and we already have that, then the Comments list should be... a list (would need separate ticket).

[Cheffheid]

Heading + CSS fixes for Dashboard

[afercia]

We should address also the headings inside the Dashboard widgets (e.g. "Publishing Soon", "Recently Published", "Comments", "Drafts"). For this, we have to wait for #33557 which changes the main Meta Boxes heading from h3 to h2 so the headings inside widgets should be bumped up from h4 to h3.

Also, additional headings may appear depending on settings or particular conditions for example the "Storage Space" in multisite installations and the outdated/insecure browser nag.

The Latest Comments box can display pingbacks/trackbacks too, and the comment-meta headings there should be changed as done for standard comments.

Plugins can add their own meta boxes in the dashboard and in the CSS so we should probably keep supporting the styles for plugins that won't update their headings.

[afercia]

Refreshed patch to take care of some of the items outlined in the previous comment. Please consider this patch depends on #33557 (the meta boxes headings) that should be applied first for proper testing.
Many things appear conditionally in the dashboard so I may be missing something, any feedback and testing more than welcome.

[wonderboymusic]

probably needs back-compat selectors in the CSS

[afercia]

Not sure about how to fully test this, would need some help :) I've tested with 3 plugins that add their own widgets in the Dashboard (see screenshot below) and the main headings look OK. By the way, not sure about widgets that have headings inside their content, like for example the "Activity" > "Recently Published" one.

In the refreshed patch, tried to add some CSS back compatibility for H4 headings inside widgets, see #dashboard-widgets-wrap .inside h4.

Any thoughts and help more than welcome.

[afercia]

Refreshed patch, looks like the only concern here is about widgets that have headings inside their content, see for example a well known plugin widget in the screenshot below:

Unfortunately we can't predict widgets content. The refreshed patch makes the h3 and h4 inside the widgets look the same, which maybe is the only sane option we have. I guess plugin authors would need to make some adjustments anyways.

Any help in testing the patch would be greatly appreciated :)

[rianrietveld]

Tested the dashboard plugins of Gravity Forms, Jetpack, Google Analytics Dashboard: they all are ok heading wise and visually.

Also tested Widget Builder and Custom Dashboard help, but they only have the widget title as heading, the rest in up to the user.

[afercia]

@rianrietveld thanks very much :) Screenshot with some of the tested Plugins Dashboard widgets:

[rianrietveld]

WordFence. Looks ok.
One remark: it has H2 headings inside the widgets

[afercia]

Refreshed patch, takes care of a few more edge cases and introduces a bit more CSS back compatibility.

[wonderboymusic]

In 35414:

Dashboard: make tags used for headings more semantic.

Props Cheffheid, afercia.
Fixes #33558.

[SergeyBiryukov]

[35414] broke "Recently Published" and "Comments" headers in Activity widget​, due to this rule:

#dashboard-widgets .inside h3 {
    margin-left: 0;
    margin-right: 0;
}

[afercia]

fixing the activity widget

[afercia]

Patch 33558.6.patch​ to fix the Activity widget. Also, a minor fix for the Quick Drafts widget. Screenshot with patch applied:

[wonderboymusic]

@afercia cool, please commit

[wonderboymusic]

In 35420:

Dashboard: cleanup after [35414].

Props afercia.
Fixes #33558.

[afercia]

In 35469:

Dashboard: Activity widget CSS cleanup after [35420].

Props tyxla.
Fixes #34524. See #33558.