accessibility bug & proposed fix pre-check

[RMattB]

I think I have found an accessibility bug and idea for a valid fix for the Hydrogen skeleton template.
(Bringing this up here first to see if I've covered all the bases before filing an issue/PR. I did not find any related issues or discussions.)

Conditions:

• "@shopify/hydrogen": "2026.4.4"
• "react-router": "7.16.0"
• PUBLIC_STORE_DOMAIN=mock.shop (also happens with my store)
• local run of: npx shopify hydrogen dev --codegen

Steps:

1. browse root/home page with screen reader
2. OR run WAVE tool per https://shopify.dev/docs/storefronts/themes/best-practices/accessibility#accessibility-testing
   • Details tab, Structural Elements section, Main content, Reference link (i)
     "The <main> element ... identifies the main content for the page."
     "The Algorithm... in English"
     "A <main> element or role="main"is present."
     (This tool does not show an error or alert, but does show that there is >1 <main> element.)
3. OR run Axe-core CI accessibility test suite
   "Main landmark should not be contained in another landmark"
   "Document should not have more than one main landmark"
4. OR just inspect the html for <main>

Expected

the screen reader to read 1 <main> element indicating THE body of the page

Actually

the screen reader found and read 4 <main> elements; this has unclear meaning

WCAG / guidelines doc

• The existing <aside> element does not require an additional semantic wrapper inside of it, ex: https://html.spec.whatwg.org/multipage/sections.html#the-aside-element:~:text=other%20side%20content
• "A [user who is blind] who may be familiar with a news site's menu, and is only interested in getting to the top story, could easily navigate to the "main" landmark, and bypass dozens of menu links." https://www.w3.org/WAI/WCAG22/Techniques/html/H101#:~:text=the%20%22main%22

Proposed fix diff

--- a/storefront/app/components/Aside.tsx
+++ b/storefront/app/components/Aside.tsx
@@ -68,7 +68,7 @@ export function Aside({
             ×
           </button>
         </header>
-        <main>{children}</main>
+        <div className="aside-content">{children}</div>
       </aside>
     </div>
   );
--- a/storefront/app/styles/app.css
+++ b/storefront/app/styles/app.css
@@ -279,7 +279,7 @@ aside header h2 {
   margin-top: 0;
 }
 
-aside main {
+aside .aside-content {
   margin: 1rem;
 }

Does that sound reasonable for filing an issue?
Thanks!

Matt