fix(template): Use <div> instead of <main> to support Vue3 apps m…

…ounting

Vue3 does not replace the element while mounting but only renders within
(replace inner HTML).
So it would result in two stacked `<main>` elements which is invalid and
an accessibility issue.
Instead we just use a `<div>` element for mounting.

For Vue2 apps this does not change anything as the whole element will be
replaced with a new `<main>` element.
For vanilla apps this will slightly decrease the accessibility as the
main landmark is now missing, but this is not a hard accessibility issue
as it would be for Vue3 apps having two main elements.

Signed-off-by: Ferdinand Thiessen <[email protected]>

core/templates/layout.guest.php

@@ -47,12 +47,12 @@
 						</div>
 					</header>
 				<?php endif; ?>
-				<main>
+				<div>
 					<h1 class="hidden-visually">
 						<?php p($theme->getName()); ?>
 					</h1>
 					<?php print_unescaped($_['content']); ?>
-				</main>
+				</div>
 			</div>
 		</div>
 		<?php

core/templates/layout.public.php

@@ -80,7 +80,7 @@
 		</div>
 	</header>
 
-	<main id="content" class="app-<?php p($_['appid']) ?>">
+	<div id="content" class="app-<?php p($_['appid']) ?>">
 		<h1 class="hidden-visually">
 			<?php
 		if (isset($template) && $template->getHeaderTitle() !== '') {
@@ -90,7 +90,8 @@
 		} ?>
 		</h1>
 		<?php print_unescaped($_['content']); ?>
-	</main>
+	</div>
+
 	<?php if (isset($template) && $template->getFooterVisible() && ($theme->getLongFooter() !== '' || $_['showSimpleSignUpLink'])) { ?>
 	<footer>
 		<p><?php print_unescaped($theme->getLongFooter()); ?></p>

core/templates/layout.user.php

@@ -81,15 +81,15 @@
 			</div>
 		</header>
 
-		<main id="content" class="app-<?php p($_['appid']) ?>">
+		<div id="content" class="app-<?php p($_['appid']) ?>">
 			<h1 class="hidden-visually" id="page-heading-level-1">
 				<?php p((!empty($_['application']) && !empty($_['pageTitle']) && $_['application'] != $_['pageTitle'])
 					? $_['application'] . ': ' . $_['pageTitle']
 					: (!empty($_['pageTitle']) ? $_['pageTitle'] : $theme->getName())
 				); ?>
 			</h1>
 			<?php print_unescaped($_['content']); ?>
-		</main>
+		</div>
 		<div id="profiler-toolbar"></div>
 	</body>
 </html>

cypress/e2e/theming/a11y-color-contrast.cy.ts

@@ -122,7 +122,7 @@ describe('Accessibility of Nextcloud theming colors', () => {
 					// Unset background image and thus use background-color for testing blur background (images do not work with axe-core)
 					doc.body.style.backgroundImage = 'unset'
 
-					const root = doc.querySelector('main')
+					const root = doc.querySelector('#content')
 					if (root === null) {
 						throw new Error('No test root found')
 					}
@@ -137,7 +137,7 @@ describe('Accessibility of Nextcloud theming colors', () => {
 							it(`color contrast of ${foreground} on ${background}`, () => {
 								cy.document().then(doc => {
 									const element = createTestCase(foreground, background)
-									const root = doc.querySelector('main')
+									const root = doc.querySelector('#content')
 									// eslint-disable-next-line no-unused-expressions
 									expect(root).not.to.be.undefined
 									// eslint-disable-next-line @typescript-eslint/no-non-null-assertion