improved document structure for accessability

Wave/Components/ArticleComponent.razor

@@ -5,7 +5,7 @@
 @inject IStringLocalizer<Pages.ArticleView> Localizer
 
 <SectionContent SectionName="GlobalHeader">
-	<div class="bg-secondary text-secondary-content border-b-2 border-current py-6 px-12">
+	<header class="bg-secondary text-secondary-content border-b-2 border-current py-6 px-4 md:px-12">
 		<h1 class="text-3xl lg:text-5xl font-light">
 			@Article.Title
 		</h1>
@@ -35,7 +35,7 @@
 				}
 			</p>
 		}
-	</div>
+	</header>
 </SectionContent>
 <article class="mb-6">
     <div class="prose prose-neutral max-w-none hyphens-auto text-justify">

Wave/Components/Layout/MainLayout.razor

@@ -14,7 +14,7 @@
 	<input id="main-drawer" type="checkbox" class="drawer-toggle" />
 	<div class="drawer-content">
 		<div class="flex flex-col h-screen overflow-x-auto">
-			<header class="md:hidden p-4 flex justify-between bg-base-200">
+			<div class="md:hidden p-4 flex justify-between bg-base-200">
 				<div class="h-12">
 					<LogoPartial/>
 				</div>
@@ -23,10 +23,12 @@
 						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
 					</svg>
 				</label>
-			</header>
+			</div>
+			<main class="flex-1">
 				<SectionOutlet SectionName="GlobalHeader" />
-			<main class="flex-1 container mx-auto px-12 py-8">
+				<div class="container mx-auto px-4 md:px-12 py-8">
 					@Body
+				</div>
 			</main>
 			<footer class="flex flex-col md:flex-row items-center justify-center p-4 gap-y-3 gap-x-4 bg-base-300 text-base-content">
 				<span class="flex-1 text-center md:text-left">
@@ -38,12 +40,12 @@
 					}
 				</span>
 				<div class="join w-56" title="@Localizer["Language_Label"]">
-					<button type="button" class="btn btn-sm btn-neutral btn-square no-animation join-item">
+					<button type="button" class="btn btn-sm btn-neutral btn-square no-animation join-item" aria-hidden="true" tabindex="-1">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
 							<path d="M21.721 12.752a9.711 9.711 0 0 0-.945-5.003 12.754 12.754 0 0 1-4.339 2.708 18.991 18.991 0 0 1-.214 4.772 17.165 17.165 0 0 0 5.498-2.477ZM14.634 15.55a17.324 17.324 0 0 0 .332-4.647c-.952.227-1.945.347-2.966.347-1.021 0-2.014-.12-2.966-.347a17.515 17.515 0 0 0 .332 4.647 17.385 17.385 0 0 0 5.268 0ZM9.772 17.119a18.963 18.963 0 0 0 4.456 0A17.182 17.182 0 0 1 12 21.724a17.18 17.18 0 0 1-2.228-4.605ZM7.777 15.23a18.87 18.87 0 0 1-.214-4.774 12.753 12.753 0 0 1-4.34-2.708 9.711 9.711 0 0 0-.944 5.004 17.165 17.165 0 0 0 5.498 2.477ZM21.356 14.752a9.765 9.765 0 0 1-7.478 6.817 18.64 18.64 0 0 0 1.988-4.718 18.627 18.627 0 0 0 5.49-2.098ZM2.644 14.752c1.682.971 3.53 1.688 5.49 2.099a18.64 18.64 0 0 0 1.988 4.718 9.765 9.765 0 0 1-7.478-6.816ZM13.878 2.43a9.755 9.755 0 0 1 6.116 3.986 11.267 11.267 0 0 1-3.746 2.504 18.63 18.63 0 0 0-2.37-6.49ZM12 2.276a17.152 17.152 0 0 1 2.805 7.121c-.897.23-1.837.353-2.805.353-.968 0-1.908-.122-2.805-.353A17.151 17.151 0 0 1 12 2.276ZM10.122 2.43a18.629 18.629 0 0 0-2.37 6.49 11.266 11.266 0 0 1-3.746-2.504 9.754 9.754 0 0 1 6.116-3.985Z" />
 						</svg>
 					</button>
-					<select class="select select-bordered select-sm md:text-center join-item min-w-0 flex-1"
+					<select class="select select-bordered select-sm md:text-center join-item min-w-0 flex-1" aria-label="@Localizer["Language_Label"]"
 							onchange="window.location = `/language/${this.value}?returnUrl=@WebUtility.UrlEncode("/" + Navigation.ToBaseRelativePath(Navigation.Uri))`">
 						@foreach (var culture in LocalizationOptions.Value.SupportedCultures ?? new List<CultureInfo>()) {
 							<option value="@culture"
@@ -54,13 +56,13 @@
 					</select>
 				</div>
 				<div class="join w-56" title="@Localizer["Theme_Label"]">
-					<button type="button" class="btn btn-square btn-sm btn-neutral no-animation join-item">
+					<button type="button" class="btn btn-square btn-sm btn-neutral no-animation join-item" aria-hidden="true" tabindex="-1">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
 							<path fill-rule="evenodd" d="M2.25 4.125c0-1.036.84-1.875 1.875-1.875h5.25c1.036 0 1.875.84 1.875 1.875V17.25a4.5 4.5 0 1 1-9 0V4.125Zm4.5 14.25a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z" clip-rule="evenodd" />
 							<path d="M10.719 21.75h9.156c1.036 0 1.875-.84 1.875-1.875v-5.25c0-1.036-.84-1.875-1.875-1.875h-.14l-8.742 8.743c-.09.089-.18.175-.274.257ZM12.738 17.625l6.474-6.474a1.875 1.875 0 0 0 0-2.651L15.5 4.787a1.875 1.875 0 0 0-2.651 0l-.1.099V17.25c0 .126-.003.251-.01.375Z" />
 						</svg>
 					</button>
-					<select id="theme-select" class="select select-bordered select-sm md:text-center join-item min-w-0 flex-1"
+					<select id="theme-select" class="select select-bordered select-sm md:text-center join-item min-w-0 flex-1" aria-label="@Localizer["Theme_Label"]"
 					        onchange="window.location = `/theme/${this.value}?returnUrl=@WebUtility.UrlEncode("/" + Navigation.ToBaseRelativePath(Navigation.Uri))`">
 						<option selected="@(UserTheme is null)" value="">@Localizer["Theme_Default"]</option>
 						<option selected="@(UserTheme is "wave-light")" value="wave-light">@Localizer["Theme_WaveLight"]</option>

Wave/Components/Layout/NavMenu.razor

@@ -4,11 +4,11 @@
 @inject NavigationManager NavigationManager
 @inject IStringLocalizer<NavMenu> Localizer
 
-<header class="h-12 hidden md:block">
+<div class="h-12 hidden md:block" role="banner" aria-label="logo">
 	<LogoPartial />
-</header>                         
+</div>                         
-<nav class="flex-1">
+<nav class="flex-1 flex flex-col justify-between" aria-label="Main">
-	<ul class="menu">
+	<ul class="menu" aria-label="site navigation">
 		<li><NavLink href="" Match="NavLinkMatch.All">@Localizer["Home_Label"]</NavLink></li>
 		<AuthorizeView Policy="ArticleEditPermissions">
 			<Authorized>
@@ -37,8 +37,7 @@
 			</Authorized>
 		</AuthorizeView>
 	</ul>
-</nav>
+	<ul class="menu gap-2" aria-label="Account">
-<ul class="menu gap-2">
 		<AuthorizeView>
 			<Authorized>
 				<li class="flex gap-2">
@@ -80,7 +79,8 @@
 				</li>
 			</NotAuthorized>
 		</AuthorizeView>
-</ul>
+	</ul>
+</nav>
 
 @code {
 	private string? _currentUrl;