Convert div to main tag for web accessibility

[upendmca]

How to convert <div class="wp-site-blocks">Content</div> to <main class="wp-site-blocks">Content</main> in gutenberg block template.
This is coming from wp-includes folder block-template.php.

[sabernhardt]

Original support forum topic:
​https://wordpress.org/support/topic/web-accessibility-4/

Trac ticket: https://core.trac.wordpress.org/ticket/61956

[upendmca]

Hi @narenin

I have tested the patch and it is working fine.

Test Report

Environment:

OS: Windows
PHP: 8.2.12
WordPress: 6.6.1
Browser: Chrome
Theme: Twenty Twenty-One (Version: 2.3)
Plugins: None activated

Actual Results:

✅ Patch working well as desired solution.

[sabernhardt]

Hi and welcome to WordPress Core Trac!

Could you explain how you want to use the wp-site-blocks wrapper?

Twenty Twenty-One:

• is not a block-based theme, so it does not output a wp-site-blocks wrapper
• already has a <main> element

A document must only have one main element (unless additional main elements are hidden). ​MDN docs

Related: GB35354

@mukeshpanchal27 Thanks for the feedback, I have implemented them, please check.

[joedolson]

At this time, this change seems unnecessary. I think that the use case would be if you were attempting to child theme a parent that did not use the main element in its templates. In that case, you could use this filter to change the outer wrapper instead of editing the templates in your child theme.

However, block themes in the theme repository are expected to include a main element; the main element is available on relevant blocks as a selectable HTML element in the advanced block settings; and you can change them in child themes (even if it's kind of a pain.)

I think this is probably a wontfix issue; but I'm open to arguments, if there's a case I haven't thought of.

Discussed in the accessibility bug scrub, and agreed.

[poena]

I agree with closing this ticket.
The wp-site-blocks class name is included in all block themes, on an en element that wraps all blocks.

I would like to learn the motivation behind and reason for why the filter is needed, without that, it is difficult to re-consider the need.

---
If the proposed filter was used to alter the <div> to <main> specifically, it would wrap everything, including new and existing blocks that uses the <main> HTML tag, as well as the site header and site footer.

Besides the options in the user interface, there are block filters that may be more appropriate to use, that can filter the tag name on the correct and appropriate block: a block that only wraps the actual main content.

[sabernhardt]

Without an explanation for the use case, I also agree to close the ticket.