Focus - Sibling Elements are unintentionally focused

[jgrenat]

Hello!

First, thanks for this great project! I've encountered a bug in the way the focus styles are handled:

Expected behavior
When focusing an element, only this element should be shown focused.

Current behavior
The next siblings of the element are also shown as focused

SSCCE

SSCCE

module Main exposing (main)

import Element exposing (Color, Element, el, focused, layout, link, row, spacing, text)
import Element.Border as Border
import Element.Region as Region
import Html exposing (Html)


main : Html msg
main =
    layout [] links


links : Element msg
links =
    row [ spacing 10 ]
        [ siteLink "Elm website" "https://elm-lang.org/"
        , siteLink "Elm-ui" "https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element"
        ]


siteLink : String -> String -> Element msg
siteLink label url =
    link [ focused [ Border.glow blue 2 ] ]    
        { url = url
        , label = text label
        }


blue : Color
blue =
    Element.fromRgb255
        { red = 100
        , green = 180
        , blue = 250
        , alpha = 1
        }

Workaround

Wrapping each link inside an el fixes the behaviour:

siteLink : String -> String -> Element msg
siteLink label url =
    el [] <|
        link [ focused [ Border.glow blue 2 ] ]    
            { url = url
            , label = text label
            }

Versions

• OS: MacOS
• Browser: Chrome
• Browser Version: 74
• Elm Version: 0.19
• Elm UI Version: latest (1.1.0)

[edkv]

this is the same as #47