Merge 364c502 into a05e54c

ssc-sp · Jan 7, 2025 · 6dee0a6 · 6dee0a6
2 parents a05e54c + 364c502
commit 6dee0a6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/Portal/src/Datahub.Portal/Layout/Topbar/Topbar.razor b/Portal/src/Datahub.Portal/Layout/Topbar/Topbar.razor
@@ -3,23 +3,31 @@
 
 @inject NavigationManager _navManager
 
-<nav class="sr-only">
-    <h2>@Localizer["Screen reader navigation"]</h2>
-    <ul id="wb-tphp" class="wb-init wb-disable-inited">
-        <li class="wb-slc">
-            <a class-="wb-sl" href="@(_navManager.Uri + "#maincontent")">@Localizer["Skip to main content"]</a>
+<nav role="navigation">
+    <h2 class="sr-only">@Localizer["Navigation menu"]</h2>
+    <ul>
+        <li class="skip-link">
+            <DHButton Variant="Variant.Filled" Color="Color.Primary" Href=@(_navManager.Uri + "#maincontent") Size="Size.Large">
+                <MudText>@Localizer["Skip to main content"]</MudText>
+            </DHButton>
         </li>
-        <li class="wb-slc">
-            <a class="wb-sl" href="@(_navManager.Uri + "#nav")">@Localizer["Skip to navigation"]</a>
+        <li class="skip-link">
+            <DHButton Variant="Variant.Filled" Color="Color.Primary" Href=@(_navManager.Uri + "#nav") Size="Size.Large">
+                <MudText>@Localizer["Skip to navigation"]</MudText>
+            </DHButton>
         </li>
     </ul>
 </nav>
 
+
 <MudImage Src=@Localizer["/img/canada-fip.svg"] Alt=@Localizer["Government of Canada Wordmark"] Style="max-height: 25px; margin-top: 20px; float:left!important;" />
 
+
 <MudText Typo="Typo.h2" Style="@_titleStyle">
     @Localizer["MainTitle"]
 </MudText>
+
+
 <MudStack Row Style="margin-right: auto; width: 40%; margin-top: 20px" Justify="Justify.Center" role="group">
     <h2 class="sr-only">@Localizer["Navigation menu"]</h2>
     <nav role="navigation">

diff --git a/Portal/src/Datahub.Portal/wwwroot/css/accessibility/a11y.css b/Portal/src/Datahub.Portal/wwwroot/css/accessibility/a11y.css
@@ -22,3 +22,19 @@
 .mud-link {
     text-decoration: underline !important;
 }
+
+.skip-link {
+    /*opacity: 0;*/
+    display: none;
+    text-align: center;
+    position: absolute;
+    top: 10px;
+    left: -12px;
+    padding-top: 6px;
+    padding-left: 6px;
+}
+
+.skip-link:focus-within {
+     /*opacity: 1;*/
+     display: inline;
+  }