Problem/Motivation
To reproduce this issue, view the html in #9 in IE11.
In IE11, any element set to display: flex; can receive focus by being clicked. This has been narrowed down to an IE bug, but one that has very little evidence of it existing online because it is only noticeable if stylesheets include rules that provide focus outlines to non-interactive elements. This is the case with Claro's :focus styles, as they are are applied as *:focus, impacting all elements. This can result in the green focus ring appearing in unexpected places.
The bug does not result in making these elements tabbable via tab navigation, but clicking on one of these non-interactive-but-focusable elements will take focus away from another element .
Proposed resolution
Any number of CSS rules could address the problem.