Opened 11 months ago
Last modified 3 months ago
#56228 accepted defect (bug)
Add main H1 heading in the site-editor page
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (28)
#1
@
11 months ago
- Keywords has-patch added
- 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.
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
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
9 months ago
#6
@
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
@
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
- Navigate to Appearance > Editor
- Open inspector in chrome browser and enable the
Disable JavsScript
option frompreferences -> Debugger -> Disable JavsScript
- reload the editor page and it does not show either any title or notice.
- then update the files mentioned in the patch and follow the above 1-3 steps
- 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:
- before the patch is applied: https://d.pr/i/gayK1d
- after the patch is applied: https://d.pr/i/2MD7eJ
#9
@
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
After Adding code
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
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
4 months ago
#13
@
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
@
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
@
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
@
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
@
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
@
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.
Site editor h1