Add some examples of keyboard support

styleguide-app/Examples/Tabs.elm

@@ -105,7 +105,17 @@ example =
     { name = "Nri.Ui.Tabs.V5"
     , categories = [ Layout ]
     , atomicDesignType = Molecule
-    , keyboardSupport = []
+    , keyboardSupport =
+        [ { keys = [ KeyboardSupport.Tab ]
+          , result = "Move focus to and from the currently-selected Tab"
+          }
+        , { keys = [ Arrow KeyboardSupport.Left ]
+          , result = "Select the tab to the left of the currently-selected Tab"
+          }
+        , { keys = [ Arrow KeyboardSupport.Right ]
+          , result = "Select the tab to the right of the currently-selected Tab"
+          }
+        ]
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none

styleguide-app/KeyboardSupport.elm

@@ -12,7 +12,9 @@ module KeyboardSupport exposing
 
 -}
 
+import Css exposing (..)
 import Html.Styled as Html exposing (..)
+import Html.Styled.Attributes exposing (css)
 
 
 {-| -}
@@ -32,14 +34,17 @@ view keyboardSupport =
         _ ->
             details []
                 [ summary [] [ text "Keyboard Support" ]
-                , ul [] (List.map viewKeyboardActions keyboardSupport)
+                , ul
+                    [ css [ listStyle none, margin2 (px 10) zero, padding zero ]
+                    ]
+                    (List.map viewKeyboardActions keyboardSupport)
                 ]
 
 
 viewKeyboardActions : KeyboardSupport -> Html msg
 viewKeyboardActions { keys, result } =
     li []
-        [ strong [] [ text (String.join "+" (List.map keyToString keys)) ]
+        [ strong [] [ text (String.join "+" (List.map keyToString keys) ++ ": ") ]
         , text result
         ]