Make WordPress Core

Opened 11 months ago

Last modified 3 months ago

#56228 accepted defect (bug)

Add main H1 heading in the site-editor page

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-screenshots has-patch coordinate-with-gutenberg needs-refresh
Focuses: accessibility Cc:

Description

See related issue on the Gutenberg repository: https://github.com/WordPress/gutenberg/issues/42373

In the Site Editor page, the main H1 heading is a JavaScript component. It renders after the Navigation sidebar and after the toolbar in the header. See first attached screenshot.

On the PHP side, site-editor.php doesn't output any heading.

This isn't ideal, as the main H1 heading should be the first thing in the main content. See https://github.com/WordPress/gutenberg/issues/42373#issuecomment-1185565284

This is also inconsistent with the way the main H1 heading is output in the Post editor, where edit-form-blocks.php does output the main H1 heading.

Additionally, when JS is off:

  • the Post editor does show the H1 heading and a notice, see second screenshot
  • the Site editor doesn't show any content (besides the WP admin menu), see third screenshot

I'd like to propose to improve consistency and make the Site editor page output the main H1 and the no-js notice. This way consistency and user experience would be improved. More importantly, the main H1 would be placed in a more appropriate place.

Other headings in the Site Editor will be improved in https://github.com/WordPress/gutenberg/issues/42373

Attachments (5)

01 Screenshot 2022-07-15 at 15.33.44.png (75.4 KB) - added by afercia 11 months ago.
Site editor h1
02 Screenshot 2022-07-14 at 14.48.27.png (157.4 KB) - added by afercia 11 months ago.
Post editor no JS
03 Screenshot 2022-07-14 at 14.49.33.png (139.6 KB) - added by afercia 11 months ago.
Site editor no JS
56228.diff (1.6 KB) - added by afercia 11 months ago.
56228.1.diff (1.6 KB) - added by joedolson 4 months ago.
Refreshes patch

Download all attachments as: .zip

Change History (28)

@afercia
11 months ago

Post editor no JS

@afercia
11 months ago

Site editor no JS

@afercia
11 months ago

#1 @afercia
11 months ago

  • Keywords has-patch added

56228.diff

  • adds a visually hidden H1 heading at the beginning of the main content
  • when JavaScript is off, the page will display a heading and a no-js notice
  • adds a filter for the no-js notice message

This is basically the same pattern already used for the Post Editor page.

This change should be coordinated with the changes for Gutenberg:

  • There are some minor CSS changes that needs to be done on the Gutenberg side.
  • The current H1 will be changed to H2.

See https://github.com/WordPress/gutenberg/issues/42373

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


11 months ago

This ticket was mentioned in Slack in #core-editor by sabernhardt. View the logs.


10 months ago

#4 @sabernhardt
10 months ago

  • Keywords coordinate-with-gutenberg added

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


9 months ago

#6 @joedolson
9 months ago

  • Milestone changed from Awaiting Review to 6.2
  • Owner set to joedolson
  • Status changed from new to accepted

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


5 months ago

#8 @fencermonir
5 months ago

Test report of https://core.trac.wordpress.org/attachment/ticket/56228/56228.diff

Env

WordPress 6.1.1
PHP 7.4
Chrome 108.0.5359.124 (Official Build) (arm64)
macOS 13.1 (Ventura)
Theme: Twenty Twenty-Three
Gutenberg enabled
Plugin: no plugin
In wp-config.php: define( 'WP_DEBUG_LOG', true ); define( 'WP_DEBUG_DISPLAY', true );

Steps to Test

  1. Navigate to Appearance > Editor
  2. Open inspector in chrome browser and enable the Disable JavsScript option from preferences -> Debugger -> Disable JavsScript
  3. reload the editor page and it does not show either any title or notice.
  4. then update the files mentioned in the patch and follow the above 1-3 steps
  5. then it shows the title and a notice.

Expected Results (✅)

Show the title and notice on the editor page

Actual Results

The patch shows the title and notice on the editor page

Screenshot:

  1. before the patch is applied: https://d.pr/i/gayK1d
  2. after the patch is applied: https://d.pr/i/2MD7eJ
Last edited 5 months ago by fencermonir (previous) (diff)

#9 @zebaafiashama
5 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/ticket/56228

Environment

  • OS: Windows 22621.1105
  • Web Server: nginx/1.16.0
  • PHP: 8.1.9
  • WordPress: 6.1.1
  • Browser: Chrome 109.0.5414.74
  • Theme: Twenty Twenty-Two
  • Active plugins: N/A


Actual Results

  • Before adding the code if JavaScript is disabled then on site editor no notice or heading were showing.

-After adding the code problem solved and showing the heading and notice

Before adding code

https://d.pr/i/BrvTyG

After Adding code

https://d.pr/i/C6kbL7

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


5 months ago

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


4 months ago

@joedolson
4 months ago

Refreshes patch

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


4 months ago

#13 @afercia
4 months ago

  • Keywords needs-refresh added

The patch needs some refresh. Some CSS changed on the Gutenberg side after the introduction of the Site editor 'Browse mode'.

Also, it appears that Gutenberg overrides some core styles to change some general layout. It does that by targeting directly some elements, even when JS is off. Not sure that's ideal. for example:

html.wp-toolbar {
	background: $white;
	padding-top: 0;
}

At the very least, this rule should be applied only when JS is on. Same for other CSS rules in Gutenberg. Unfortunately, right now there's no CSS class set on the html element to target whether JS is on or off.

#14 @alexstine
4 months ago

Actually, I do not believe this should be implemented in PHP due to the fact JS is not yet initialized and Gutenberg built-in region navigation does not work until the application receives focus. I think it is okay to add the no JS heading via PHP but the actual heading 1 should be added in React so the proper region navigation hooks get initialized in React. This is currently a problem in the post editor that could use a follow-up TRAC ticket/issue to rethink our approach..

Thanks.

#15 @afercia
4 months ago

Please see my last comment on the related Gutenberg issue at https://github.com/WordPress/gutenberg/issues/42373#issuecomment-1418936670

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


4 months ago

#17 @rudlinkon
4 months ago

Could any tester test please with the refreshed patch?

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


4 months ago

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


3 months ago

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


3 months ago

#21 @hellofromTonya
3 months ago

  • Milestone changed from 6.2 to 6.3

With 6.2 Beta 4 (the last planned beta for 6.2) happening in a few minutes, moving this ticket to 6.3.

However, if this fix is essential, please move it back into the milestone before RC1 to give time to schedule another Beta release.

#22 @alexstine
3 months ago

I am still of the opinion that any UI elements should be handled within Gutenberg React and the no JS stuff can be handled in the core PHP side of things. This would greatly help with the overall accessibility of the editor since the heading 1 would load with React allowing us to control the UX.

Hoping to move this one forward for 6.3.

Thanks.

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


3 months ago

Note: See TracTickets for help on using tickets.