Warn if there is more than one main HTML element, or if the main is missing

[carolinan]

What problem does this address?

A few blocks have an option to change the HTML element to <main>, but there must only be one main element on a page. Having more than one <main> element (that is not hidden) is invalid HTML and an accessibility issue.

What is your proposed solution?

Add a warning if there is more than one main element -perhaps in the document outline "table of content" details popover? It already warns for incorrect heading levels.

[aristath]

Note from the MDN Docs:

A document mustn't have more than one <main> element that doesn't have the hidden attribute specified.

It is possible to have more than one main, but only one that's not hidden. Right now I don't believe we add hidden anywhere, but any check we add should take the hidden scenario into account. 👍

[carolinan]

And perhaps also warn if there is no <main> 🤔

[bph]

The accessibility features "Skip to content" + <main/> section could use the attention similar to the color low contrast warning, when selecting text and background colors.

A user can so easily remove a <main/> section tag by just removing a root group block. This came up in two discussions in the #outreach channel as well,

• here started by @luminuu and
• here started by @hagege

Apart from the warning, and update on documentation would also be beneficial to add the HTML Element selector to other blocks, like post content, media+text when used in a template context.

@WordPress/outreach

[carolinan]

Some thoughts:

• I think there are performance issues with looping through all blocks on the current page, find blocks that use the tagName attribute, and then check if that tagName is main. The check for the heading level is much more limited because it only checks the heading block.
• The check should be limited to block themes, because the editor does not know what other tags there are in classic theme templates. (*To do, check if the heading outline is available on classic themes and if it is accurate).
• The check may need to be limited to the Site Editor, unless it can check both template and block editor contents.
• A new help text needs to be written, explaining why the main is needed.
• A link to more information should be added, similar to the link added to the alt text help.

[luminuu]

I've recently worked on a solution where I've implemented this via a block theme itself and it's working fine. Here's how it looks:

It's only available in the site editor and on templates (not template parts, patterns and pages). It recursively checks the content with wp.data.select( 'core/editor' ).getEditorBlocks(). The message changes if there's no main tag found or if there's more than one main tag found and it also displays how many tags were found, however not where specifically.

[getdave]

Related to https://github.com/WordPress/gutenberg/issues/65400. Soon Zoom Out will not be available if <main> does not exist. Therefore it would be great if there could be a warning about:

• more than one <main>
• lack of <main>

[getdave]

@luminuu Looks great, would you be open to raising a PR with your code? 🙏

[carolinan]

I like that the message shows as a notice this way and not as a warning in the Document Outline panel where it would be less visible.

[juanfra]

I like that the message shows as a notice this way and not as a warning in the Document Outline panel where it would be less visible.

+1

This will be especially helpful for theme developers working on implementing zoom-out functionality. While building TT5 and working with templates that include nested groups, we encountered some challenges.