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.