[Solved] How do you make the tab UI more intuitive by setting focus on initial active tab and leaving focus on the tab when interacting on the page?

[Matt Smith]

I am finding the tab UI severely lacking in being intuitive to know which tab is the active tab and what tab the displayed content falls under.

Looking at the attached screen grab, you would find it difficult to know which is the active tab or which tab owns the check box content. I know that my customers are going to find this very confusing as the AJAX tabstrip clearly demarked each tab and didn't remove the focus from the last tab selected or which tab was active for the initial content that was displayed.

It is somewhat difficult to even understand that a tab metaphor is being used because there is no contrast or definition.

Is there any way to adjust the behavior or the styling to make it easier for the end user to easily understand their workspace and not get confused?

Your themes due to lack of contrast make it very difficult to perceive borders you have as the Alpha value is set to such a low value it is registering as almost zero (like 8%) such that older people using the controls may not register the confines (and yes I resemble one of them).

[Ivan Danchev]

Hello Matt,

Here's how an active and focused tab looks like with the latest version: 

Default active tab background color and focus outline

To make the active/focused tab more obvious, you may use custom CSS. See this example that demonstrates how to do that with two CSS rules: the first one changes the background color of the active tab to lightblue, and the second one changes the focused tab's outline color to blue:  https://blazorrepl.telerik.com/QgFkcVly58OO2SLl15 

Customized active tab background color and focus outline:

The example also shows how to place the focus programmatically on the initially active tab by invoking a JS function in OnAfterRenderAsync.

 

Regards,
Ivan Danchev
Progress Telerik