Adds reasonable defaults for accordion focus rings"

src/Nri/Ui/Accordion/V3.elm

@@ -68,6 +68,7 @@ import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events exposing (onClick)
 import Html.Styled.Keyed
 import Json.Decode as Decode
+import Nri.Ui.FocusRing.V1 as FocusRing
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 as AttributesExtra
 
@@ -101,6 +102,7 @@ styleAccordion styleOptions =
              , Css.backgroundColor Css.unset
              , borderWidth Css.zero
              , margin zero
+             , Css.pseudoClass "focus-visible" [ FocusRing.insetBoxShadows [] ]
 
              -- fonts & text
              , textAlign left
@@ -336,6 +338,7 @@ viewEntry focus arrows ({ headerId, headerLevel, caret, headerContent, entryClas
                     , ( entryClass, True )
                     , ( accordionEntryHeaderExpandedClass, isExpanded )
                     , ( accordionEntryHeaderCollapsedClass, not isExpanded )
+                    , ( FocusRing.customClass, True )
                     ]
                 , Aria.disabled (config.toggle == Nothing)
                 , Aria.expanded isExpanded

src/Nri/Ui/FocusRing/V1.elm

@@ -1,7 +1,7 @@
 module Nri.Ui.FocusRing.V1 exposing
     ( forKeyboardUsers, forMouseUsers
     , styles, tightStyles
-    , boxShadows, outerBoxShadow, insetBoxShadow
+    , boxShadows, insetBoxShadows, outerBoxShadow, insetBoxShadow
     , customClass
     , outerColor, innerColor
     )
@@ -10,7 +10,7 @@ module Nri.Ui.FocusRing.V1 exposing
 
 @docs forKeyboardUsers, forMouseUsers
 @docs styles, tightStyles
-@docs boxShadows, outerBoxShadow, insetBoxShadow
+@docs boxShadows, insetBoxShadows, outerBoxShadow, insetBoxShadow
 @docs customClass
 @docs outerColor, innerColor
 
@@ -106,6 +106,23 @@ boxShadows existingBoxShadows =
         |> applyBoxShadows
 
 
+{-| Please be sure that the padding on the element you add this style too is sufficient (at least 6px on all sides) that the inset box shadow won't cover any content.
+
+    focus
+        [ FocusRing.insetBoxShadows [ "inset 0 3px 0 0 " ++ ColorsExtra.toCssString glacier ]
+        , outline none
+        ]
+
+-}
+insetBoxShadows : List String -> Css.Style
+insetBoxShadows existingBoxShadows =
+    existingBoxShadows
+        ++ [ "inset 0 0 0 3px " ++ outerColorString
+           , "inset 0 0 0 6px " ++ innerColorString
+           ]
+        |> applyBoxShadows
+
+
 {-| Prefer `styles` over tightStyles, except in cases where line spacing/font size will otherwise cause obscured content.
 -}
 tightStyles : List Css.Style

styleguide-app/Examples/Accordion.elm

@@ -26,6 +26,7 @@ import Nri.Ui.Accordion.V3 as Accordion exposing (AccordionEntry(..))
 import Nri.Ui.Colors.Extra as ColorsExtra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
+import Nri.Ui.FocusRing.V1 as FocusRing
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Text.V6 as Text
 import Nri.Ui.UiIcon.V1 as UiIcon
@@ -306,6 +307,11 @@ view ellieLinkConfig model =
                 [ Css.backgroundColor Colors.gray96
                 , Css.borderRadius (Css.px 8)
                 , Css.boxShadow5 Css.zero Css.zero (px 10) zero (ColorsExtra.withAlpha 0.2 Colors.gray20)
+                , Css.pseudoClass "focus-visible"
+                    [ FocusRing.insetBoxShadows
+                        [ "0 0 10px 0 " ++ ColorsExtra.toCssString (ColorsExtra.withAlpha 0.2 Colors.gray20)
+                        ]
+                    ]
                 ]
             ]
         , headerClosedStyles = []