TabStrip focus using keyboad navigation

8 posts, 1 answers
  1. Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 19 Jun 2013 Link to this post

    If I open the demo at http://demos.kendoui.com/web/tabstrip/index.html and hit Tab to navigate using the keybard, I can see a blue margin highlighting that the TabStrip has focus. 

    If I open the theme editor with the default theme, there is no indication that the TabStrip has focus. How can I get my TabStrib to provide feedback to the user that it has focus as the demo page does?

    Thank you
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 Jun 2013 Link to this post

    Hello Andreas,

    I do not see any actual focus on the tabstrip when pressing tab.

    http://jsbin.com/ehorog/1

    What browser do you use? Basically browsers add a dotted border to the focused element. Anyway I do not see any added to any element of the tabstrip.

    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 21 Jun 2013 Link to this post

    I've just realised I was actually using two different browsers, I was seeing the blue border in Opera and then opening the other page with IE. You are right, in Internet Explorer there is never any blue border or any other indication that the TabStrip has focus. 

    Is the intended behavior - that there is no indication of focus? From what I can see it is not very usable without a mouse?
  5. Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 21 Jun 2013 Link to this post

    You are right, in Internet Explorer there is never any blue border or any other indication that the TabStrip has focus. 

    Is the intended behavior - that there is no indication of focus? From what I can see it is not very usable without a mouse?
  6. Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 21 Jun 2013 Link to this post

     I was actually using two different browsers, I was seeing the blue border in Opra and then seeing the other page with Internet Explorer. 
  7. Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 21 Jun 2013 Link to this post

     BTW, I was seeing the blue border in Opera.
  8. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 24 Jun 2013 Link to this post

    Hello Andreas,

    All browsers display the indicator in slightly different ways, but the current consensus seems to be a soft, glowing blue line or a fine dotted black line.

    To change that look you can use CSS rules, you can find different articles on the internet about this.

    http://www.bettertesting.co.uk/content/?p=1636

    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Answer
    Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    Thanks. I guess the main issue is that there is no focus indicator appearing in Internet Explorer at all.

    I could not get IE to show the sort of blue outline around the entire tabstrip Opera shows.

    But using a:focus { outline: 1px dotted; } as the article suggested does highlight the tab headers when I tab over them so it is more usable now.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready