Skip to Content

UI5 IconTabBar Icon/Tab shows dotted square when you click on the Icon/tab.

Using a IconTabBar I have set up 6 icons/tabs and they work just fine. However, I have noticed that when you click on the icon/tab a dotted square appears around the icon, although the icon itself is highlighted in that the white background with blue lines become a blue background with white lines (colour="Natural). If I focus elsewhere, then the dotted box is no longer shown.

How can I avoid this dotted box appearing in the first place. Anyone?.

I noticed that SAP example in Explored does the same thing. Explored - IconTabBar example

Add comment
10|10000 characters needed characters exceeded

2 Answers

  • Best Answer
    Posted on Mar 03, 2017 at 02:09 PM

    Hello Gary,

    The dotted outline is part of accessibility standards . This is the actual reason for dotted line on focus of a element

    "It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people".

    You can remove the outline by setting the CSS with something like this

    :focus>[class*='sapM'] {
      outline-style: none !important ;

    Thanks and Regards,


    Add comment
    10|10000 characters needed characters exceeded

  • Posted on Mar 06, 2017 at 02:50 PM

    Thanks Veera for the info.

    In that case I will leave it exactly as it is. I would not want to interfere with any accessibility standards. ;)

    Add comment
    10|10000 characters needed characters exceeded