Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#33557 closed defect (bug) (fixed)

#a11y-headings - Post Meta Boxes H3 to H2

Reported by: cheffheid's profile Cheffheid Owned by: joedolson's profile joedolson
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch commit
Focuses: ui, accessibility Cc:

Description (last modified by joedolson)

The post meta boxes are currently H3s and they need to be upgraded to H2s to ensure a proper heading structure.

We'll also need to make sure that we don't break the styling in the process and make sure to update any of the existing CSS from h3 to h2. As well as add CSS to maintain the current look if necessary.

#a11y-headings

Attachments (10)

33557.patch (1.1 KB) - added by joedolson 10 years ago.
Change post meta box to h2
33557.2.patch (1.2 KB) - added by joedolson 10 years ago.
Also address responsive styles
33557.3.patch (1.6 KB) - added by afercia 10 years ago.
33557.4.patch (1.9 KB) - added by afercia 10 years ago.
33557.5.patch (1.9 KB) - added by joedolson 10 years ago.
Preserves existing metabox-holder h3 styles
33557.6.patch (2.6 KB) - added by afercia 10 years ago.
33557.7.patch (4.8 KB) - added by afercia 10 years ago.
33557.diff (4.8 KB) - added by wonderboymusic 10 years ago.
33557.2.diff (5.3 KB) - added by afercia 10 years ago.
33557.3.diff (727 bytes) - added by afercia 10 years ago.

Download all attachments as: .zip

Change History (43)

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


10 years ago

#2 @joedolson
10 years ago

  • Owner set to joedolson
  • Status changed from new to accepted

#3 @joedolson
10 years ago

  • Description modified (diff)

#4 follow-up: @afercia
10 years ago

In /wp-admin/css/edit.css I can see:

#poststuff h2 {
	margin-top: 20px;
	font-size: 1.5em;
	margin-bottom: 15px;
	padding: 0 0 3px;
	clear: left;
}

#poststuff h3 {
	font-size: 14px;
	padding: 8px 12px;
	margin: 0;
	line-height: 1.4;
}

not 100% sure but looks like there are no #poststuff h2 in core anymore. It was used in Press This old versions but couldn't find any other use. Thoughts? cc @SergeyBiryukov :) First introduced here https://core.trac.wordpress.org/changeset/6578

Version 0, edited 10 years ago by afercia (next)

#5 @joedolson
10 years ago

Probably should scan for usages in plug-ins; don't want to break a ton of plug-ins by removing it.

#6 in reply to: ↑ 4 @SergeyBiryukov
10 years ago

Replying to afercia:

not 100% sure but looks like there are no #poststuff h2 in core anymore.

Looks like it was meant for the Advanced Options header in 2.5.

The header was removed in 2.7: [8691/trunk/wp-admin/edit-form-advanced.php].

@joedolson
10 years ago

Change post meta box to h2

#7 @joedolson
10 years ago

  • Keywords has-patch added

Added patch changing to H2 and removing #poststuff h2 CSS. Based on the slack conversations and references, it seems very unlikely this CSS is needed anymore; even if a plug-in is using it, it would have to be because they haven't updated their CSS in years...

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


10 years ago

#9 @afercia
10 years ago

Yup, removing the rule and merging #poststuff h2 in the current #poststuff h3 seems to most logical thing to do to me. Thanks Joe!

#10 @joedolson
10 years ago

Updating patch - forgot to address responsive view.

@joedolson
10 years ago

Also address responsive styles

#11 @SergeyBiryukov
10 years ago

  • Milestone changed from Awaiting Review to 4.4

@afercia
10 years ago

#12 @afercia
10 years ago

Refreshed patch, rebuilt from the SVN root. Also to address .metabox-holder h3 and change it in .metabox-holder h2.

#13 @afercia
10 years ago

Last change affected headings in the Appearance > Menus screen, refreshed patch to address them till we make a decision about #33603.

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


10 years ago

@afercia
10 years ago

#15 @afercia
10 years ago

#33650 was marked as a duplicate.

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


10 years ago

#17 @joedolson
10 years ago

I think that metabox-holder h2 and metabox-holder h3 need to have matched styles; we can't just replace, because a lot of plug-ins make use of the metabox-holder classes to create their settings page layouts.

Alternate patch attached.

@joedolson
10 years ago

Preserves existing metabox-holder h3 styles

@afercia
10 years ago

#18 @afercia
10 years ago

Refreshed patch to update the dashboard outdated/insecure browser nag heading styling. See screenshots below:

https://cldup.com/Bb4ajUYnGq.png

https://cldup.com/5clwT4ytLu.png

@afercia
10 years ago

#19 @afercia
10 years ago

  • Keywords commit added
  • Refreshed patch after [34241]
  • We should also take care of a couple headings used inside the meta boxes (see meta-boxes.php). Changed them in plain links, didn't see any reason why they should be headings
  • The current CSS selector for + Add New Category is tied to categories, doesn't take into account custom taxonomies. Changed to a more generic selector. It should be changed in a button later (see #26504).

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


10 years ago

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


10 years ago

#22 @joedolson
10 years ago

Took a look at this, and the new patch seems good. I agree that Add New Category should become a button, and that this should happen later.

Didn't see any problems with any of the example plugin meta boxes I looked at.

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


10 years ago

#24 @wonderboymusic
10 years ago

I would add CSS rules, not replace - for general BC. Refreshed the patch to eliminate some fuzz wth recent churn.

#25 @wonderboymusic
10 years ago

  • Keywords needs-refresh added; commit removed

@afercia
10 years ago

#26 @afercia
10 years ago

  • Keywords commit added; needs-refresh removed

Refreshed patch. I'm not sure we should have some back compat for the old h3 but if we want to do that we should select just the first one, i.e. the meta box "title". There might be some redundancy, but even before the patch #poststuff h3 and .metabox-holder h3 are basically overlapping.

Side note: as far as I can see the old #poststuff h2 style was introduced in r6578 and probably unused for a few years now. Couldn't find any previous h2 inside #poststuff.

#27 @afercia
10 years ago

  • Focuses ui added

#28 @SergeyBiryukov
10 years ago

In 35128:

Accessibility: bump headings one level up in post meta boxes for a better headings hierarchy.

Props afercia, joedolson, wonderboymusic.
See #33557.

#29 @SergeyBiryukov
10 years ago

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

In 35129:

Acessibility: "Add New Category" links on Edit Post screen should not be a header.

Props afercia.
Fixes #33557.

#30 @afercia
10 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Testing a few plugins that use a h3 inside the .metabox-holder container, noticed that some of them use a postbox that is always expanded (they don't have the .hndle class) so we should cover also this case for back compatibility. For example, this box "title" would be too big and misaligned:

https://cldup.com/3jMMMgLUVB.png

@afercia
10 years ago

#31 @afercia
10 years ago

New small patch to improve back compatibility. The heading in the example above will now look with a proper font size and correctly aligned:

https://cldup.com/9-w8s9OqDG.png

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


10 years ago

#33 @SergeyBiryukov
10 years ago

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

In 35184:

Acessibility: Add back-compat styles for plugins that use h3 inside the .metabox-holder container.

Props afercia.
Fixes #33557.

Note: See TracTickets for help on using tickets.