Merge pull request #911 from NoRedInk/bat/fix-a11y-failures

Bat/fix a11y failures

script/puppeteer-tests.js

@@ -70,19 +70,9 @@ describe('UI tests', function () {
   }
 
   const skippedRules = {
-    'Accordion': ['heading-order', 'region'],
-    'Balloon': ['color-contrast', 'label'],
-    'Checkbox': ['region'],
-    'Loading': ['color-contrast'],
-    'Menu': ['region'],
-    'Modal': ['region'],
-    'Message': ['region'],
-    'Page': ['color-contrast', 'select-name'],
-    'RadioButton': ['duplicate-id', 'region'],
-    'SegmentedControl': ['region'],
-    'Select': ['label'],
+    'Accordion': ['heading-order'],
+    'RadioButton': ['duplicate-id'],
     'Switch': ['aria-allowed-attr'],
-    'Tabs': ['region'],
   }
 
   const specialProcessing = {

src/Nri/Ui/Balloon/V1.elm

@@ -326,8 +326,8 @@ balloonTheme theme =
 
         Green ->
             batch
-                [ backgroundColor Colors.greenDark
-                , border3 (px 1) solid Colors.greenDark
+                [ backgroundColor Colors.greenDarkest
+                , border3 (px 1) solid Colors.greenDarkest
                 , Fonts.baseFont
                 , fontSize (px 15)
                 , color Colors.white
@@ -439,8 +439,8 @@ arrowTheme theme =
 
         Green ->
             batch
-                [ backgroundColor Colors.greenDark
-                , border3 (px 1) solid Colors.greenDark
+                [ backgroundColor Colors.greenDarkest
+                , border3 (px 1) solid Colors.greenDarkest
                 , Fonts.baseFont
                 , fontSize (px 15)
                 , color Colors.white

src/Nri/Ui/Page/V3.elm

@@ -17,6 +17,7 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
 import Http
 import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Html.V3 exposing (viewIf)
 
@@ -263,7 +264,7 @@ viewDetails detailsForEngineers =
             ]
             []
             [ Html.styled Html.summary
-                [ color (hex "8F8F8F") ]
+                [ color Colors.gray45 ]
                 []
                 [ Html.text "Details for NoRedInk engineers" ]
             , Html.styled Html.code

styleguide-app/Examples/Balloon.elm

@@ -12,7 +12,7 @@ import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import EllieLink
 import Example exposing (Example)
-import Html.Styled exposing (Html, fromUnstyled, text)
+import Html.Styled exposing (Html, text)
 import Nri.Ui.Balloon.V1 as Balloon
 
 
@@ -50,18 +50,27 @@ example =
 
 {-| -}
 type alias State =
-    { copy : Control String
-    , attributes : Control (List ( String, Balloon.Attribute ))
-    }
+    Control Settings
 
 
 init : State
 init =
-    { copy = Control.string "Hello, world!"
-    , attributes = controlAttributes
+    controlSettings
+
+
+type alias Settings =
+    { copy : String
+    , attributes : List ( String, Balloon.Attribute )
     }
 
 
+controlSettings : Control Settings
+controlSettings =
+    Control.record Settings
+        |> Control.field "copy" (Control.string "Hello, world!")
+        |> Control.field "attributes" controlAttributes
+
+
 controlAttributes : Control (List ( String, Balloon.Attribute ))
 controlAttributes =
     ControlExtra.list
@@ -117,20 +126,14 @@ paddingOptions =
 
 {-| -}
 type Msg
-    = SetCopy (Control String)
-    | SetAttributes (Control (List ( String, Balloon.Attribute )))
+    = SetAttributes (Control Settings)
 
 
 update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
-        SetCopy copy ->
-            ( { state | copy = copy }
-            , Cmd.none
-            )
-
         SetAttributes attributes ->
-            ( { state | attributes = attributes }
+            ( attributes
             , Cmd.none
             )
 
@@ -138,22 +141,21 @@ update msg state =
 view : EllieLink.Config -> State -> List (Html Msg)
 view ellieLinkConfig state =
     let
-        copy =
-            Control.currentValue state.copy
+        currentValue =
+            Control.currentValue state
     in
-    [ Control.view SetCopy state.copy |> fromUnstyled
-    , ControlView.view
+    [ ControlView.view
         { ellieLinkConfig = ellieLinkConfig
         , name = moduleName
         , version = version
         , update = SetAttributes
-        , settings = state.attributes
+        , settings = state
         , toExampleCode =
-            \attrs ->
+            \{ copy, attributes } ->
                 [ { sectionName = "Balloon"
                   , code =
                         "Balloon.balloon\n    [ "
-                            ++ String.join "\n    , " (List.map Tuple.first attrs)
+                            ++ String.join "\n    , " (List.map Tuple.first attributes)
                             ++ "\n    ] "
                             ++ "\n    (text \""
                             ++ copy
@@ -162,6 +164,6 @@ view ellieLinkConfig state =
                 ]
         }
     , Balloon.balloon
-        (List.map Tuple.second (Control.currentValue state.attributes))
-        (text copy)
+        (List.map Tuple.second currentValue.attributes)
+        (text currentValue.copy)
     ]

styleguide-app/Examples/Page.elm

@@ -54,7 +54,14 @@ example =
     , version = 3
     , categories = [ Messaging ]
     , keyboardSupport = []
-    , state = { httpError = CommonControls.httpError, recoveryText = initRecoveryText }
+    , state =
+        { httpError =
+            Control.record identity
+                |> Control.field "httpError" CommonControls.httpError
+        , recoveryText =
+            Control.record identity
+                |> Control.field "recoveryText" initRecoveryText
+        }
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =

styleguide-app/Examples/Select.elm

@@ -85,7 +85,7 @@ type alias State =
 {-| -}
 init : State
 init =
-    { label = Control.string "Tortilla Selector"
+    { label = Control.record identity |> Control.field "label" (Control.string "Tortilla Selector")
     , attributes = initControls
     }
 

styleguide-app/KeyboardSupport.elm

@@ -39,6 +39,8 @@ view keyboardSupport =
                     ]
                     (List.map viewKeyboardActions keyboardSupport)
                 ]
+                |> List.singleton
+                |> aside []
 
 
 viewKeyboardActions : KeyboardSupport -> Html msg