Skip to Content

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

Mar 03, 2017 at 12:50 PM


avatar image
Former Member

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Veeraraghavan Narasimhan
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,


10 |10000 characters needed characters left characters exceeded
avatar image
Former Member 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. ;)

10 |10000 characters needed characters left characters exceeded