improved document structure for accessability
This commit is contained in:
parent
a21049747c
commit
7850d293da
GPG key ID:
4B6F6A83178F595E
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<nav class="flex-1">
|
||||
<ul class="menu">
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col justify-between" aria-label="Main">
|
||||
<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">
|
||||
<ul class="menu gap-2" aria-label="Account">
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<li class="flex gap-2">
|
||||
|
|
@ -80,7 +79,8 @@
|
|||
</li>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
</ul>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@code {
|
||||
private string? _currentUrl;
|
||||
|
|
|
|||
2
Wave/wwwroot/css/main.min.css
vendored
2
Wave/wwwroot/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue