Docs: App bar tweaks to align with v6 & Accessibility (MudBlazor#8879)

Yomodo · May 5, 2024 · d0b0545 · d0b0545
1 parent 5968a68
commit d0b0545
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 14 deletions.
diff --git a/src/MudBlazor.Docs/Components/DocsPage.razor b/src/MudBlazor.Docs/Components/DocsPage.razor
@@ -21,7 +21,7 @@
         // Just show copyright and version
         <MudContainer MaxWidth="MaxWidth.Large">
             <MudToolBar Gutters="false" Dense="true">
-                <MudText Typo="Typo.body1">Copyright © 2020-@DateTime.Now.Year MudBlazor.</MudText>
+                <MudText Typo="Typo.body1">Copyright © 2020-@DateTime.Now.Year MudBlazor</MudText>
                 <MudSpacer/>
                 <MudText Typo="Typo.body1">Powered by .NET @Environment.Version.ToString()</MudText>
             </MudToolBar>

diff --git a/src/MudBlazor.Docs/Shared/Appbar.razor b/src/MudBlazor.Docs/Shared/Appbar.razor
@@ -1,5 +1,7 @@
 <div class="d-flex align-center flex-grow-1 d-md-none">
-    <MudIconButton OnClick="DrawerToggleCallback" Icon="@Icons.Material.Rounded.Notes" Color="Color.Inherit" Edge="Edge.Start" />
+    <MudTooltip Delay="1000" Text="Drawer">
+        <MudIconButton OnClick="DrawerToggleCallback" Icon="@Icons.Material.Rounded.Notes" Color="Color.Inherit" Edge="Edge.Start" />
+    </MudTooltip>
     <MudSpacer />
     <NavLink ActiveClass="d-flex align-center" href="/">
         <MudBlazorLogo Class="docs-mudblazor-logo" />
@@ -19,7 +21,7 @@
     <MudButton Href="/docs/overview" Color="Color.Inherit" Variant="Variant.Text" Class="@GetActiveClass(DocsBasePage.Docs)">Docs</MudButton>
     <MudButton Href="/mud/introduction" Color="Color.Inherit" Variant="Variant.Text" Class="@GetActiveClass(DocsBasePage.DiscoverMore)">Learn More</MudButton>
     <MudMenu Color="Color.Inherit" Variant="Variant.Text" Class="mx-1 px-3" PopoverClass="docs-layout-menu-shadow" ListClass="d-flex px-4 pb-2 docs-appbar-special-menu" LockScroll="true" Label="Products" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
-        <MudList T="string" Clickable="true">
+        <MudList T="string">
             <MudListSubheader>
                 Products
             </MudListSubheader>
@@ -64,15 +66,15 @@
     <MudSpacer />
     @if (DisplaySearchBar)
     {
-        <MudAutocomplete @ref="_searchAutocomplete" T="ApiLinkServiceEntry" Class="docs-search-bar ml-4"
+        <MudAutocomplete @ref="_searchAutocomplete" T="ApiLinkServiceEntry" Class="docs-search-bar mx-4"
                          AutoFocus="false" Placeholder="Search" Variant="Variant.Outlined" MaxHeight="480"
                          SearchFunc="async (text, token) => await Search(text, token)" DebounceInterval="0"
-                         ValueChanged="OnSearchResult" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search">
+                         ValueChanged="OnSearchResult" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentAriaLabel="Search adornment">
             <ItemTemplate Context="result">
                 <MudText>@result.Title</MudText> <MudText Typo="Typo.body2">@result.SubTitle</MudText>
             </ItemTemplate>
         </MudAutocomplete>
-        <MudDivider FlexItem="true" Vertical="true" DividerType="DividerType.Middle" Class="my-4" />
+        <MudDivider FlexItem="true" Vertical="true" DividerType="DividerType.Middle" Class="mx-4 my-4" />
     }
     else
     {
@@ -81,6 +83,9 @@
         </MudTooltip>
     }
     <AppbarButtons />
+    <MudTooltip Delay="1000" Text="GitHub">
+        <MudIconButton Href="https://github.com/MudBlazor/MudBlazor/" Target="_blank" Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Edge="Edge.End" />
+    </MudTooltip>
 </div>
 
 <MudDialog @bind-Visible="IsSearchDialogOpen" Options="_dialogOptions" Class="docs-gray-bg" ContentClass="docs-mobile-dialog-search d-flex flex-column" DefaultFocus="DefaultFocus.FirstChild">

diff --git a/src/MudBlazor.Docs/Shared/AppbarButtons.razor b/src/MudBlazor.Docs/Shared/AppbarButtons.razor
@@ -32,7 +32,4 @@
 </MudTooltip>
 <MudTooltip Delay="1000" Text="@(DarkLightModeButtonText)">
     <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@LayoutService.CycleDarkLightModeAsync" />
-</MudTooltip>
-<MudTooltip Delay="1000" Text="GitHub">
-    <MudIconButton Href="https://github.com/MudBlazor/MudBlazor/" Target="_blank" Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
 </MudTooltip>
diff --git a/src/MudBlazor.Docs/Shared/DocsLayout.razor b/src/MudBlazor.Docs/Shared/DocsLayout.razor
@@ -6,7 +6,7 @@
     <MudAppBar Class="docs-appbar" Elevation="0">
         <Appbar DrawerToggleCallback="ToggleDrawer" />
     </MudAppBar>
-    <MudDrawer Open="@_drawerOpen" OpenChanged="OnDrawerOpenChanged" ClipMode="DrawerClipMode.Docked" Elevation="0" Breakpoint="Breakpoint.Md">
+    <MudDrawer Open="@_drawerOpen" OpenChanged="OnDrawerOpenChanged" ClipMode="DrawerClipMode.Docked" Elevation="0" Breakpoint="Breakpoint.Md" aria-label="Navigation Drawer">
         <div class="d-block d-md-none">
             <MudToolBar Dense="true" Gutters="false" Class="docs-gray-bg">
                 <MudIconButton Icon="@Icons.Material.Rounded.Close" Color="Color.Inherit" OnClick="ToggleDrawer" />
@@ -32,9 +32,7 @@
             }
         </div>
         <MudNavMenu Color="Color.Primary" Rounded="true" Dense="true" Margin="Margin.Dense" Class="pa-2 overflow-auto mb-3">
-
             <NavMenu @ref="@_navMenuRef" />
-
         </MudNavMenu>
     </MudDrawer>
     @Body

diff --git a/src/MudBlazor.Docs/Shared/LandingLayout.razor b/src/MudBlazor.Docs/Shared/LandingLayout.razor
@@ -5,7 +5,7 @@
     <MudAppBar Class="landing-appbar" Elevation="0">
         <Appbar DrawerToggleCallback="ToggleDrawer" DisplaySearchBar="false" />
     </MudAppBar>
-    <MudDrawer @bind-Open="@_drawerOpen" Elevation="25" Variant="@DrawerVariant.Temporary">
+    <MudDrawer @bind-Open="@_drawerOpen" Elevation="25" Variant="@DrawerVariant.Temporary" aria-label="Navigation Drawer">
         <MudToolBar Dense="true" Gutters="false" Class="px-1 docs-gray-bg">
             <MudIconButton Icon="@Icons.Material.Rounded.Close" Color="Color.Inherit" OnClick="@ToggleDrawer" />
             <MudSpacer/>

diff --git a/src/MudBlazor/Components/PageContentNavigation/MudPageContentNavigation.razor b/src/MudBlazor/Components/PageContentNavigation/MudPageContentNavigation.razor
@@ -5,7 +5,7 @@
 <div class="@GetPanelClass()" @attributes="UserAttributes">
     @if (_sections.Count > 1)
     {
-        <MudNavMenu Class="pl-4">
+        <MudNavMenu Class="pl-4" aria-label="Table of Contents">
             <MudText Typo="Typo.subtitle1" Class="title" GutterBottom="true">
                 @Headline
             </MudText>