I'm building a blazor-wasm application for work related management and want / need to fix my issue with tabindex order for accessability. The goal is to be able to tab through the website to be able to fully utilize the website fully without the use of a mouse.
At the moment I have a combination of html elements that are by default able to be tabbed to, and some that are not, by default, but these are fixed with the manual use of "tab index="0"". I use this since I don't want to corrupt the natural flow of the website since this SHOULD achieve a order from top-to-bottom flow (which is what I want). But for some reason the site works as intended with the use of one mouse click anywhere on the site, but without one the flow fully skips my component "NavMenu", which I want, and what should be tabbed through first, since it's the first tab-able element.
I've tried to manually change the values of the tab indexes (even though this is a no-no) to set a manual flow of the website, but even this won't do it for me, and I'm running out of ideas, also can't seem to find any source online that seems to fix my specific issue, if anyone can come to a solution for this i would be extremely thankful!
The following code is the structure of my "MainLayout.razor" file:
@inherits LayoutComponentBase
@using Blazored.Toast.Configuration
<div class="d-flex flex-column vh-100">
<NavMenu/>
<main class="content d-flex flex-column justify-content-between container-md" id="wrapper">
@Body
<main/>
<Footer/>
</div>
<BlazoredToasts Position="Blazored.Toast.Configuration.ToastPosition.BottomRight"
Timeout="10"
ShowProgressBar="true" />
<Toaster />
Yours truly Marcus A.
Do you have the "out-of-the-box" App.razor with
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
Try removing that FocusOnNavigate component - it is causing the problem by setting focus on the main content.