@@ -0,0 +1,38 @@
1+module FocusStylePrecedingElements exposing (main)
6+# `focused` style applied to an element when any element with a lower tab index is focused
8+<https://github.com/mdgriffith/elm-ui/issues/198>
10+When I add a focused attribute, the styles therein are applied not only when
11+the element is focused, but also when any element with a lower tab index is focused.
12+This behaviour is not browser-specific.
14+To reproduce, tab through to the buttons in the Ellie below. As soon as the first
15+button has focus, the third button (which is the only one with a focused attribute)
16+is highlighted as well.
18+I narrowed down the reason for this behaviour to this CSS selector:
19+.s:focus ~ .fc-250-50-50-255-fs:not(.focus)
21+Disabling it produces the correct focus behaviour.
25+import Testable.Element exposing (..)
26+import Testable.Element.Font as Font
27+import Testable.Element.Input as Input
33+ [ Input.button [] { onPress = Nothing, label = text "Button" }
34+ , Input.button [] { onPress = Nothing, label = text "Button" }
35+ , Input.button [ focused [ Font.color <| rgb255 250 50 50 ] ] { onPress = Nothing, label = text "Button" }
36+ , Input.button [] { onPress = Nothing, label = text "Button" }
37+ , Input.button [] { onPress = Nothing, label = text "Button" }