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

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 <opensource@fthiessen.de>

Author: susnux

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>