WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#33557 closed defect (bug) (fixed)

#a11y-headings - Post Meta Boxes H3 to H2

Reported by: Cheffheid Owned by: 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 5 years ago.
Change post meta box to h2
33557.2.patch (1.2 KB) - added by joedolson 5 years ago.
Also address responsive styles
33557.3.patch (1.6 KB) - added by afercia 5 years ago.
33557.4.patch (1.9 KB) - added by afercia 5 years ago.
33557.5.patch (1.9 KB) - added by joedolson 5 years ago.
Preserves existing metabox-holder h3 styles
33557.6.patch (2.6 KB) - added by afercia 5 years ago.
33557.7.patch (4.8 KB) - added by afercia 5 years ago.
33557.diff (4.8 KB) - added by wonderboymusic 5 years ago.
33557.2.diff (5.3 KB) - added by afercia 5 years ago.
33557.3.diff (727 bytes) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (43)

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


5 years ago

#2 @joedolson
5 years ago

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

#3 @joedolson
5 years ago

  • Description modified (diff)

#4 follow-up: @afercia
5 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 [6578]

Last edited 5 years ago by SergeyBiryukov (previous) (diff)

#5 @joedolson
5 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
5 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
5 years ago

Change post meta box to h2

#7 @joedolson
5 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.


5 years ago

#9 @afercia
5 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
5 years ago

Updating patch - forgot to address responsive view.

@joedolson
5 years ago

Also address responsive styles

#11 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.4

@afercia
5 years ago

#12 @afercia
5 years ago

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

#13 @afercia
5 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.


5 years ago

@afercia
5 years ago

#15 @afercia
5 years ago

#33650 was marked as a duplicate.

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


5 years ago

#17 @joedolson
5 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
5 years ago

Preserves existing metabox-holder h3 styles

@afercia
5 years ago

#18 @afercia
5 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
5 years ago

#19 @afercia
5 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.


5 years ago

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


5 years ago

#22 @joedolson
5 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.


5 years ago

@wonderboymusic
5 years ago

#24 @wonderboymusic
5 years ago

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

#25 @wonderboymusic
5 years ago

  • Keywords needs-refresh added; commit removed

@afercia
5 years ago

#26 @afercia
5 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
5 years ago

  • Focuses ui added

#28 @SergeyBiryukov
5 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
5 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
5 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
5 years ago

#31 @afercia
5 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.


5 years ago

#33 @SergeyBiryukov
5 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.