Prevent focus on disabled tabs

alzi · January 21, 2022, 10:52am

We implement a blazor app using Radzen 3.14.6. The app should become barrier-free.
the regulations provide that disabled tabs are not reachable using "tab-key". For this reason we currently manipulate the DOM of "RadzenTabItem" after rendering and add to the disabled HTML tab link tag tabindex="-1".

to avoid such dirty hack, is it possible to add following to comply with the regulations?
At

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenTabsItem.razor#L6

    
      
          @using Radzen.Blazor.Rendering
          @implements IDisposable
          @if (Visible)
          {
              <li role="presentation" @attributes=@Attributes style=@Style class=@ClassList>
              <a @onclick=@OnClick role="tab" href="javascript: void(0)" id="@($"{Tabs.Id}-tabpanel-{Index}-label")"
                  aria-selected=@(IsSelected? "true" : "false") aria-controls="@($"{Tabs.Id}-tabpanel-{Index}")">
                  @if (!string.IsNullOrEmpty(Icon))
                      {
                          <span class="rz-tabview-left-icon rzi">@((MarkupString)Icon)</span>
                      }
                      @if (Template != null)
                      {
                          @Template(this)
                      }
                      else

could be added HTML parameter tabindex="-1" if the tab is defined as "Disabled".

with kind regards

korchev · January 21, 2022, 11:09am

Hi @alzi,

We accept pull requests!