Show an outline for radio buttons on selection

src/Nri/Ui/RadioButton/V1.elm

@@ -15,6 +15,7 @@ import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Style as Style
 import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
+import Css.Global
 import Html.Styled as Html
 import Html.Styled.Attributes exposing (..)
 import Html.Styled.Events exposing (onClick, stopPropagationOn)
@@ -155,13 +156,18 @@ internalView config =
                 config.noOpMsg
     in
     Html.span
-        [ -- This is necessary to prevent event propagation.
-          -- See https://github.com/elm-lang/html/issues/96
-          Html.Styled.Attributes.map (always onContainerClick) <|
-            stopPropagationOn "click"
-                (Json.Decode.succeed ( "stop click propagation", True ))
-        , id (id_ ++ "-container")
+        [ id (id_ ++ "-container")
         , classList [ ( "Nri-RadioButton-PremiumClass", config.showPennant ) ]
+        , css
+            [ position relative
+            , pseudoClass "focus-within"
+                [ Css.Global.descendants
+                    [ Css.Global.class "Nri-RadioButton-RadioButtonIcon"
+                        [ borderColor (rgb 0 95 204)
+                        ]
+                    ]
+                ]
+            ]
         ]
         [ radio config.name
             (config.valueToString config.value)
@@ -174,23 +180,13 @@ internalView config =
               else
                 Attributes.none
             , class "Nri-RadioButton-HiddenRadioInput"
-            , css [ display none ]
+            , css [ position absolute, top (px 4), left (px 4) ]
             ]
         , Html.label
             [ for id_
             , Widget.disabled config.isLocked
             , Widget.checked (Just isChecked)
             , Aria.controls id_
-            , if not config.isLocked then
-                tabindex 0
-
-              else
-                Attributes.none
-            , if not config.isLocked && not config.isDisabled then
-                onEnterAndSpacePreventDefault (config.onSelect config.value)
-
-              else
-                Attributes.none
             , classList
                 [ ( "Nri-RadioButton-RadioButton", True )
                 , ( "Nri-RadioButton-RadioButtonChecked", isChecked )
@@ -234,7 +230,7 @@ internalView config =
                         Style.invisible
 
                     ( True, False ) ->
-                        []
+                        [ css [ verticalAlign middle ] ]
 
                     ( True, True ) ->
                         [ css
@@ -311,12 +307,20 @@ radioInputIcon config =
             , position absolute
             , left zero
             , top zero
-            , Css.width (px 30)
-            , Css.height (px 30)
             , Css.property "transition" ".3s all"
+            , border3 (px 2) solid transparent
+            , borderRadius (px 50)
+            , padding (px 2)
+            , displayFlex
+            , justifyContent center
+            , alignItems center
             ]
         ]
-        [ Nri.Ui.Svg.V1.toHtml image ]
+        [ image
+            |> Nri.Ui.Svg.V1.withHeight (Css.px 26)
+            |> Nri.Ui.Svg.V1.withWidth (Css.px 26)
+            |> Nri.Ui.Svg.V1.toHtml
+        ]
 
 
 unselectedSvg : Svg