Kendo Tabs in SharePoint

[Mark]

I have created an SpFx web part with a kendo tabstrip and dopped it on a SharePoint page. Our 508 testing failed due to the fact that the tabstrip never shows that it's selected. In all the samples you can see a highlight around the control when you tab to it, but on a SharePoint page, it does not show.

I've tried to hack this using CSS to no avail. Some of the attempts are here:

  :global .k-tabstrip > .k-content:focus {
    outline: 1px !important;
    outline-style: dotted !important;
  }

  .k-tabstrip-items:focus {
    outline: 2px solid crimson !important;
    border-radius: 3px !important;
  }

  :global .k-item.k-active:focus-visible {
    outline: 2px solid crimson !important;
    border-radius: 3px !important;
  }

The Tab parent tag is below:

<TabStrip selected={ this.state.selectedTab } onSelect={ (e: any) => { this.setState({ selectedTab: e.selected }) } }>

Only significant scss is the inclusion of:  @import '~@fluentui/react/dist/sass/References.scss';

Is this expected behavior?

[Konstantin Dikov]

Hello Mark,

I am assuming that there is a custom style that overrides the focused styles, but you should be able to override them again (if they are not with higher specificity and !important) with the following:

.k-tabstrip-items-wrapper .k-item:focus, .k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12)!important;
}

You can also inspect the tabs elements in the DOM. In Chrome you can force the "focused" state and see what styles are applied to the focused state, which could help you identify where is the custom style.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Mark]

This worked. Thank you very much!

[Mark]

Morning Konstantin,

I was able to show focus on the tabstrip. Now the 508 team has found that when an individual tab has focus, it does not show focus. The image below shows the sample:

You'll notice the thick gray box around "Paris". Here is how the control looks in my SpFx web part with no custom styling applied:

No gray box. I've picked through the "Styles" tab in developer tools to see if one of the built-in Kendo styles is overridden, but haven't been able to find anything that could be causing the issue. Do you have a css snippet that could show focus on each individual tab when they have it?

Thank you

[Konstantin Dikov]

Hi Mark,

It is the same selector that handles the "focus" state of the "k-item" and the "k-focus" class. In the developers tool in the browser you can force the "focus" state to see what styles are applied to the element when you click on it. Please note that the "focus" state will be lost if you click somewhere else in the browser 

.k-tabstrip-items-wrapper .k-item:focus, .k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12)!important;
}

[Mark]

Konstantin,

Thank you for the quick reply.

I have been doing just that, and have found the attributes of the k-item don't change when it has focus. For the TabStrip control, I and utilizing the existence of the "data-fui-focus-visible" attribute like so:

  ul[data-fui-focus-visible] {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12) !important;
  }

Here is what the tabs look like in dev tools:

You can see the aria-selected="true" and "k-active" added to the class attribute for the currently selected tab. This node does not change when it has focus vs when it is active. I'm not sure if there is something stealing focus from it upon clicking, although I haven't written any code to do so.

I tried the css you supplied and it did not have the desired affect. Perhaps there is a setting in the TabStrip I could reconfigure to assure the required attributes appear?

Thank you,

Mark

[Konstantin Dikov]

Hi Mark,

The TabStrip will not add the "k-focus" class every time, but this is covered with the following CSS selector:

.k-tabstrip-items-wrapper .k-item:focus

I would suggest that you inspect the DOM elements and see if the entire TabStrip, including the LI elements is re-rendered when you click on a Tab. This could explain why the focus is not kept.