@@ -0,0 +1,38 @@
1+module FocusStylePrecedingElements exposing (main)
2+
3+{-|
4+
5+
6+# `focused` style applied to an element when any element with a lower tab index is focused
7+
8+<https://github.com/mdgriffith/elm-ui/issues/198>
9+
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.
13+
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.
17+
18+I narrowed down the reason for this behaviour to this CSS selector:
19+.s:focus ~ .fc-250-50-50-255-fs:not(.focus)
20+
21+Disabling it produces the correct focus behaviour.
22+
23+-}
24+
25+import Testable.Element exposing (..)
26+import Testable.Element.Font as Font
27+import Testable.Element.Input as Input
28+
29+
30+main =
31+ layout [] <|
32+ column []
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" }
38+ ]