Merge pull request #7696 from QwikDev/q-template-hidden

fix(core): q:templates should be aria-hidden

Author: wmertens

packages/docs/src/routes/docs/(qwik)/components/slots/index.mdx

@@ -145,7 +145,7 @@ Results in:
 <div>
   <h1>▶︎</h1>
 </div>
-<q:template q:slot hidden aria-hidden="true">
+<q:template hidden aria-hidden="true">
   I am pre-rendered on the Server and hidden until needed.
 </q:template>
 ```

packages/qwik/src/core/tests/README.spec.tsx

@@ -199,7 +199,7 @@ describe.each([
     if (render === ssrRenderToDom) {
       // We can only assert this is SSR, as CSR does just keeps unused nodes in memory. (No need to write them to DOM)
       expect(vnode_getNextSibling(vNode!)).toMatchVDOM(
-        <q:template style="display:none">
+        <q:template hidden aria-hidden="true">
           <Fragment>
             <span q:slot="my-slot">
               <b>parent-projection-value</b>

packages/qwik/src/core/tests/projection.spec.tsx

@@ -89,7 +89,9 @@ describe.each([
     );
     if (render === ssrRenderToDom) {
       expect(vnode_getNextSibling(vNode!)).toMatchVDOM(
-        <q:template style="display:none">parent-contentrender-content</q:template>
+        <q:template hidden aria-hidden="true">
+          parent-contentrender-content
+        </q:template>
       );
     }
   });
@@ -1589,7 +1591,7 @@ describe.each([
       const { document, vNode } = await render(<Cmp>{content}</Cmp>, { debug: DEBUG });
       if (render == ssrRenderToDom) {
         await expect(document.querySelector('q\\:template')).toMatchDOM(
-          <q:template key={undefined} style="display: none">
+          <q:template key={undefined} hidden aria-hidden="true">
             {content}
           </q:template>
         );
@@ -1679,7 +1681,7 @@ describe.each([
       const { document } = await render(<Parent />, { debug: DEBUG });
       if (render == ssrRenderToDom) {
         await expect(document.querySelector('q\\:template')).toMatchDOM(
-          <q:template key={undefined} style="display: none">
+          <q:template key={undefined} hidden aria-hidden="true">
             {content}
           </q:template>
         );
@@ -1689,7 +1691,7 @@ describe.each([
       await trigger(document.body, '#slot', 'click');
       if (render == ssrRenderToDom) {
         await expect(document.querySelector('q\\:template')).toMatchDOM(
-          <q:template key={undefined} style="display: none"></q:template>
+          <q:template key={undefined} hidden aria-hidden="true"></q:template>
         );
       }
     });
@@ -1737,7 +1739,7 @@ describe.each([
       const { document } = await render(<Parent />, { debug: DEBUG });
       if (render == ssrRenderToDom) {
         await expect(document.querySelector('q\\:template')).toMatchDOM(
-          <q:template key={undefined} style="display: none">
+          <q:template key={undefined} hidden aria-hidden="true">
             {content}
           </q:template>
         );

packages/qwik/src/server/ssr-container.ts

@@ -868,7 +868,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     if (unclaimedProjections.length) {
       const previousCurrentComponentNode = this.currentComponentNode;
       try {
-        this.openElement(QTemplate, ['style', 'display:none'], null);
+        this.openElement(QTemplate, ['hidden', true, 'aria-hidden', 'true'], null);
         let idx = 0;
         let ssrComponentNode: ISsrNode | null = null;
         let ssrComponentFrame: ISsrComponentFrame | null = null;