WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#33559 closed defect (bug) (fixed)

#a11y-headings - WordPress Updates headings fixes

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

Description

A number of H3 headings on this page need to be bumped up to H2s:

  • "An updated version of WordPress is available"
  • "You have the latest version of WordPress. Future security updates will be applied automatically."
  • "Plugins"
  • "Themes"
  • "Translations"

Also need to ensure that any design (fontsize, colour, etc) is properly maintained when swapping the headings.

#a11y-headings

Attachments (5)

33559.1.patch (4.2 KB) - added by Cheffheid 5 years ago.
Bumps headings up to h2 and fixes styles - these CSS changes should help with maintaining the look on other h3 to h2 changes.
33559.common.css.patch (626 bytes) - added by Cheffheid 5 years ago.
A patch with just the CSS, since it will apply for more heading tickets.
33559.2.patch (555 bytes) - added by afercia 5 years ago.
33559.3.patch (1.5 KB) - added by afercia 5 years ago.
33559.4.patch (458 bytes) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (25)

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


5 years ago

@Cheffheid
5 years ago

Bumps headings up to h2 and fixes styles - these CSS changes should help with maintaining the look on other h3 to h2 changes.

#2 @Cheffheid
5 years ago

  • Keywords has-patch added

@Cheffheid
5 years ago

A patch with just the CSS, since it will apply for more heading tickets.

#3 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.4

#4 @SergeyBiryukov
5 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 33817:

Bump H3 headings to H2 on WordPress Updates screen for better accessibility.

props Cheffheid.
fixes #33559.

#5 @afercia
5 years ago

  • Focuses ui added
  • Resolution fixed deleted
  • Status changed from closed to reopened

We should still keep the styling for the H2 headings that were removed in [33817] to account for plugins that still use H2 as main headings in their screens. We should probably pair the styling with the current .wrap h1 maybe making it more specific for example .wrap > h2.
Without this, many plugins screens will look like this:

https://cldup.com/bNjCh8VwY0.png

while the correct styling should look like this:

https://cldup.com/OcZ9sCeZzH.png

@afercia
5 years ago

#6 @afercia
5 years ago

The new patch tries to pair the main h1 heading style with .wrap > h2 to take into account plugins that still use a h2 heading in their screens.

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


5 years ago

#8 @afercia
5 years ago

Hm as @Cheffheid pointed out this won't work in some edge cases, for example update-core.php and user-new.php on multisite. Maybe we should use .wrap + h2 instead. Investigating.

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

#9 follow-up: @afercia
5 years ago

Discussed a bit this with @Cheffheid on Slack and we have a couple of options:

  1. Use JavaScript, see what's already in common.js:
// Back compatibility: if there is no H1, apply to first H2.
if ( ! $firstHeading.length ) {
	$firstHeading = $( '.wrap h2:first' );
}

and just add a CSS class to style the first H2. The advantage of this solution is that it will cover all the possible cases of h2 as main heading when there's no h1. We'd prefer a CSS solution though.

  1. Use just CSS and provide a reasonable back compatibility for plugins that still use a H2. We won't be able to cover all the edge cases but maybe we shouldn't try to do that. Sooner or later plugins should update their main heading and use a H1.

We'd propose to style the old H2s only if they're the :first-child of the .wrap container. Any thoughts and suggestions more than welcome.

A couple of edge case examples:

Plugins that use some old code before the main heading:

https://cldup.com/Ra7l91JYzm.png

Notices that are displayed before the main heading and then moved below with JavaScript: for a few milliseconds the main h2 will be styled as h2 and then as h1 after the notice gets moved down:

https://cldup.com/V_xfOnETcV.png

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


5 years ago

#11 @afercia
5 years ago

cc @helen :)

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


5 years ago

#13 in reply to: ↑ 9 @SergeyBiryukov
5 years ago

Replying to afercia:

We'd propose to style the old H2s only if they're the :first-child of the .wrap container. Any thoughts and suggestions more than welcome.

I'm fine with not trying to account for all the edge cases.

Let's also add a comment that these styles are for backwards compatibility only.

@afercia
5 years ago

#14 follow-up: @afercia
5 years ago

Refreshed patch introduces .wrap > h2:first-child for back compatibility with plugins that still use a h2 as main heading in their screens. As agreed, this won't cover all the edge cases.
Adjusted also the h2.nav-tab-wrapper and the tagcloud h2 headings. I think after [33355] there's no h1.nav-tab-wrapper in the admin, keeping it just for back compatibility with plugins.
Testing and feedback more than welcome.

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

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


5 years ago

#16 @SergeyBiryukov
5 years ago

In 35130:

Accessibility: Correct the style for Popular Tags header on Edit Tags screen after [33917].

Props afercia.
See #33559. See #33658.

#17 @SergeyBiryukov
5 years ago

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

In 35131:

Accessibility: Add back-compat styles for plugins that still use h2 as a main heading in their screens.

Props afercia.
Fixes #33559.

#18 in reply to: ↑ 14 @afercia
5 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to afercia:

Adjusted also the h2.nav-tab-wrapper

Noticed some plugins provide the "navigation tab" as first H2 heading in their screens so maybe we should tweak a bit the CSS, just to override .wrap > h2:first-child

https://cldup.com/jTGE17bzfJ.png

@afercia
5 years ago

#19 @SergeyBiryukov
5 years ago

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

In 35496:

Accessibility: After [35130], adjust the h2.nav-tab-wrapper selector to only override .wrap > h2:first-child.

This improves compatibility with plugins that use navigation tabs as a first H2 heading on their screens.

Props afercia.
Fixes #33559.

#20 @ramiy
4 years ago

Related: #37257

Note: See TracTickets for help on using tickets.