WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#33558 closed defect (bug) (fixed)

#a11y-headings - Dashboard heading fixes

Reported by: Cheffheid Owned by: afercia
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-screenshots has-patch
Focuses: ui, accessibility Cc:

Description

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:

http://i.imgur.com/N9NspJc.png

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

#a11y-headings

Attachments (7)

33558.patch (3.3 KB) - added by Cheffheid 5 years ago.
Heading + CSS fixes for Dashboard
33558.2.patch (6.6 KB) - added by afercia 5 years ago.
33558.3.patch (6.7 KB) - added by afercia 5 years ago.
33558.4.patch (6.8 KB) - added by afercia 5 years ago.
33558.5.patch (8.0 KB) - added by afercia 5 years ago.
33558.activity.png (16.2 KB) - added by SergeyBiryukov 5 years ago.
33558.6.patch (1.3 KB) - added by afercia 5 years ago.
fixing the activity widget

Download all attachments as: .zip

Change History (37)

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


5 years ago

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


5 years ago

#3 in reply to: ↑ description @afercia
5 years ago

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
5 years ago

Heading + CSS fixes for Dashboard

#4 @Cheffheid
5 years ago

  • Keywords has-patch added

#5 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.4
  • Owner set to afercia
  • Status changed from new to assigned

#6 @afercia
5 years ago

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.

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


5 years ago

#8 @SergeyBiryukov
5 years ago

  • Keywords needs-patch added; has-patch removed

@afercia
5 years ago

#9 @afercia
5 years ago

  • Focuses ui added
  • Keywords has-patch added; needs-patch removed

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.

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


5 years ago

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


5 years ago

#12 @wonderboymusic
5 years ago

  • Keywords needs-refresh added

probably needs back-compat selectors in the CSS

@afercia
5 years ago

#13 @afercia
5 years ago

  • Keywords needs-refresh removed

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.

https://cldup.com/GPv1PnnxxF.png

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.

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


5 years ago

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


5 years ago

#16 @afercia
5 years ago

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:

https://cldup.com/wEvt_Vk-3D.png

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

@afercia
5 years ago

#17 @rianrietveld
5 years ago

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.

#18 @afercia
5 years ago

  • Keywords has-screenshots added

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

https://cldup.com/7YX_iaphvP.png

#19 @rianrietveld
5 years ago

http://www.rianrietveld.com/wp-content/uploads/2015/10/wordfence.png

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

@afercia
5 years ago

#20 @afercia
5 years ago

  • Keywords commit added

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

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


5 years ago

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


5 years ago

#23 @wonderboymusic
5 years ago

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

In 35414:

Dashboard: make tags used for headings more semantic.

Props Cheffheid, afercia.
Fixes #33558.

#24 @SergeyBiryukov
5 years ago

  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

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

#25 @wonderboymusic
5 years ago

  • Status changed from reopened to assigned

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


5 years ago

@afercia
5 years ago

fixing the activity widget

#27 @afercia
5 years ago

  • Keywords has-patch added; needs-patch removed

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

https://cldup.com/gqXwS4oaIx.png

#28 @wonderboymusic
5 years ago

@afercia cool, please commit

#29 @wonderboymusic
5 years ago

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

In 35420:

Dashboard: cleanup after [35414].

Props afercia.
Fixes #33558.

#30 @afercia
5 years ago

In 35469:

Dashboard: Activity widget CSS cleanup after [35420].

Props tyxla.
Fixes #34524. See #33558.

Note: See TracTickets for help on using tickets.