RadzenLayout does not tab to the Sidebar and PanelMenu within

Radzen.Blazor Components
1

To be accessible, all components of a website have to be reachable using only the keyboard.

When I browse to any page in my website, I can tab around the @Body section with no problems. When I reach the last tab stop on the page, it jumps to the address bar and all the buttons on it, then back to the first tab stop of the @Body section.

Am I doing something wrong?

Here is my MainLayout.razor page:

<RadzenLayout Style="grid-template-areas: 'rz-header' 'rz-sidebar rz-body'">
    <RadzenHeader Style="background-color:#006341">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <div class="p-1 rz-text-align-left" style="width:40%"><RadzenImage Path="@(_basePath + "/img/twra_logo_mini.png")" Click="Toggle"></RadzenImage> BIG GAME CONTROL PERMIT PORTAL</div>
            <div class="p-1 rz-text-align-right" style="width:60%"><UserNameAndStatus/></div>
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar @bind-Expanded="@_sidebarExpanded" Style="height:100%;background-color:#006341">
        <RadzenPanelMenu Multiple="false">
            @if (_menuItems != null)
            {
                @foreach (var i in _menuItems)
                {
                    @if (i.ParentId == 0 && i.Href != "")
                    {
                        <RadzenPanelMenuItem  Text="@i.Text" Path="@i.Href" Icon="@i.Icon"></RadzenPanelMenuItem>
                    }

                    @if (i is { ParentId: 0, Href: "" })
                    {
                        <RadzenPanelMenuItem Text="@i.Text">
                            @foreach (var m in _menuItems.Where(m => m.ParentId == i.Id))
                            {
                                <RadzenPanelMenuItem Text="@m.Text" Path="@m.Href" Icon="@m.Icon"></RadzenPanelMenuItem>
                            }
                        </RadzenPanelMenuItem>
                    }
                }
            }
        </RadzenPanelMenu>
    </RadzenSidebar>
    <RadzenBody>
        <main role="main">
            <div class="rz-p-4">
                @Body
            </div>
        </main>
    </RadzenBody>
</RadzenLayout>
2

Hi @Carthax,

Is the issue reproducible in the online demos?

What version of Radzen.Blazor are you currently using? The most recent major release lets you build the layout without explicitly defining grid-template-areas in <RadzenLayout Style="">.

I also noticed that you’re using Bootstrap on the page (class="p-1"). Check your styles in the browser’s developer tools to ensure Bootstrap isn’t overriding any Radzen styles.

3

Removing the grid-template-areas code did it.

I’m using the latest version, but it’s sometimes difficult to catch everything to make sure I’m using the newest functionality. I apparently missed the grid-template-areas when I cleaned up all the old stuff.

Thanks!