Merge pull request #1512 from NoRedInk/helpfully-disabled-button

A11-3343 Helpfully disabled Button

component-catalog/src/Examples/Button.elm

@@ -6,6 +6,7 @@ module Examples.Button exposing (Msg, State, example)
 
 -}
 
+import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
 import Code
@@ -24,6 +25,7 @@ import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Message.V4 as Message
 import Nri.Ui.Spacing.V1 as Spacing
+import Nri.Ui.Tooltip.V3 as Tooltip
 import Nri.Ui.UiIcon.V1 as UiIcon
 import Routes
 import Set exposing (Set)
@@ -270,6 +272,11 @@ initDebugControls =
             )
 
 
+tooltipId : String
+tooltipId =
+    "tooltip"
+
+
 viewButtonExamples : EllieLink.Config -> State -> Html Msg
 viewButtonExamples ellieLinkConfig state =
     let
@@ -304,15 +311,28 @@ viewButtonExamples ellieLinkConfig state =
         }
     , Heading.h2
         [ Heading.plaintext "Interactive example"
-        , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ]
+        , Heading.css
+            [ Css.margin2 Spacing.verticalSpacerPx Css.zero
+            , Css.marginBottom (Css.px 10)
+            ]
         ]
     , viewCustomizableExample model
     , Heading.h2
         [ Heading.plaintext "Non-interactive examples"
-        , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
+        , Heading.css
+            [ Css.marginTop Spacing.verticalSpacerPx
+            , Css.marginBottom (Css.px 10)
+            ]
         ]
     , buttonsTable
     , toggleButtons state.pressedToggleButtons
+    , Heading.h2
+        [ Heading.plaintext "Link with tracking"
+        , Heading.css
+            [ Css.marginTop Spacing.verticalSpacerPx
+            , Css.marginBottom (Css.px 10)
+            ]
+        ]
     , Button.link "linkExternalWithTracking"
         [ Button.unboundedWidth
         , Button.secondary
@@ -321,6 +341,41 @@ viewButtonExamples ellieLinkConfig state =
             , track = ShowItWorked "ButtonExample" "linkExternalWithTracking clicked"
             }
         ]
+    , Heading.h2
+        [ Heading.plaintext "Disabled form submit button"
+        , Heading.css
+            [ Css.marginTop Spacing.verticalSpacerPx
+            , Css.marginBottom (Css.px 10)
+            ]
+        ]
+    , form
+        []
+        [ Button.button "Submit"
+            [ Button.submit
+            , Button.disabled
+            ]
+        ]
+    , Heading.h2
+        [ Heading.plaintext "Disabled button with tooltip"
+        , Heading.css
+            [ Css.marginTop Spacing.verticalSpacerPx
+            , Css.marginBottom (Css.px 10)
+            ]
+        ]
+    , Tooltip.view
+        { trigger =
+            \attrs ->
+                Button.button "Save"
+                    [ Button.disabled
+                    , Button.custom (Aria.describedBy [ tooltipId ] :: attrs)
+                    ]
+        , id = tooltipId
+        }
+        [ Tooltip.open True
+        , Tooltip.paragraph "Reasons why you can't save"
+        , Tooltip.onRight
+        , Tooltip.fitToContent
+        ]
     ]
         |> div []
 
@@ -419,7 +474,10 @@ toggleButtons pressedToggleButtons =
     div []
         [ Heading.h2
             [ Heading.plaintext "Button toggle"
-            , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
+            , Heading.css
+                [ Css.marginTop Spacing.verticalSpacerPx
+                , Css.marginBottom (Css.px 10)
+                ]
             ]
         , div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ]
             [ Button.button "5"

src/Nri/Ui/Button/V10.elm

@@ -39,7 +39,10 @@ The next version of `Button` should also remove `delete` and `toggleButton`
   - adds `tertiary` style
   - adds `submit` and `opensModal`
   - adds `secondaryDanger` style
-  - marked toggleButton as deprecated and added toggleButtonPressed attribute
+  - marks toggleButton as deprecated and adds toggleButtonPressed attribute
+  - replaces the `disabled` attribute with `aria-disabled="true"`
+  - removes click handler from disabled buttons
+  - prevents default behavior for disabled submit buttons by setting `type="button"`
 
 
 # Changes from V9:
@@ -758,8 +761,22 @@ renderButton ((ButtonOrLink config) as button_) =
     Nri.Ui.styled Html.button
         (styledName "customButton")
         (buttonStyles config)
-        (ClickableAttributes.toButtonAttributes config.clickableAttributes
-            { disabled = isDisabled config.state }
+        (ExtraAttributes.includeIf config.clickableAttributes.opensModal
+            (Attributes.attribute "aria-haspopup" "true")
+            :: (if isDisabled config.state then
+                    Aria.disabled True
+                        :: (if config.clickableAttributes.buttonType == "submit" then
+                                [ Attributes.type_ "button" ]
+
+                            else
+                                [ Attributes.type_ config.clickableAttributes.buttonType ]
+                           )
+
+                else
+                    [ Attributes.type_ config.clickableAttributes.buttonType
+                    , ExtraAttributes.maybe Events.onClick config.clickableAttributes.onClick
+                    ]
+               )
             ++ Attributes.class FocusRing.customClass
             :: ExtraAttributes.maybe (Just >> Aria.pressed) config.pressed
             :: config.customAttributes
@@ -1229,6 +1246,7 @@ applyColorStyle colorPalette =
             [ Css.color colorPalette.hoverText
             , Css.backgroundColor colorPalette.hoverBackground
             , Css.disabled [ Css.backgroundColor colorPalette.background ]
+            , Css.Global.withAttribute "aria-disabled=true" [ Css.backgroundColor colorPalette.background ]
             ]
         , Css.visited [ Css.color colorPalette.text ]
         ]

tests/Spec/Helpers.elm

@@ -1,9 +1,22 @@
 module Spec.Helpers exposing (..)
 
+import Expect exposing (Expectation)
 import Html.Attributes as Attributes
 import Test.Html.Selector as Selector
+import Test.Runner
 
 
 nriDescription : String -> Selector.Selector
 nriDescription desc =
     Selector.attribute (Attributes.attribute "data-nri-description" desc)
+
+
+expectFailure : String -> Expectation -> Expectation
+expectFailure expectedDescriptionSubstring expectation =
+    case Test.Runner.getFailureReason expectation of
+        Nothing ->
+            Expect.fail "Expected a failure, but there was none."
+
+        Just reason ->
+            String.contains expectedDescriptionSubstring reason.description
+                |> Expect.equal True

tests/Spec/Nri/Ui/Button.elm

@@ -4,6 +4,7 @@ import Accessibility.Aria as Aria
 import Html.Styled exposing (Html, toUnstyled)
 import Nri.Ui.Button.V10 as Button
 import ProgramTest exposing (..)
+import Spec.Helpers exposing (expectFailure)
 import Test exposing (..)
 import Test.Html.Selector exposing (..)
 
@@ -12,6 +13,7 @@ spec : Test
 spec =
     describe "Nri.Ui.Button.V10"
         [ describe "toggleButtonPressed" toggleButtonPressed
+        , describe "helpfullyDisabledButton" helpfullyDisabledButton
         ]
 
 
@@ -35,6 +37,52 @@ toggleButtonPressed =
     ]
 
 
+helpfullyDisabledButton : List Test
+helpfullyDisabledButton =
+    [ test "does not have `aria-disabled=\"true\" when not disabled" <|
+        \() ->
+            program ()
+                (\_ ->
+                    Button.button "Italic"
+                        []
+                )
+                |> ensureViewHasNot [ attribute (Aria.disabled True) ]
+                |> done
+    , test "has `aria-disabled=\"true\" when disabled" <|
+        \() ->
+            program ()
+                (\_ ->
+                    Button.button "Italic"
+                        [ Button.disabled
+                        ]
+                )
+                |> ensureViewHas [ attribute (Aria.disabled True) ]
+                |> done
+    , test "is clickable when not disabled" <|
+        \() ->
+            program ()
+                (\_ ->
+                    Button.button "Italic"
+                        [ Button.onClick ()
+                        ]
+                )
+                |> clickButton "Italic"
+                |> done
+    , test "is not clickable when disabled" <|
+        \() ->
+            program ()
+                (\_ ->
+                    Button.button "Italic"
+                        [ Button.onClick ()
+                        , Button.disabled
+                        ]
+                )
+                |> clickButton "Italic"
+                |> done
+                |> expectFailure "Event.expectEvent: I found a node, but it does not listen for \"click\" events like I expected it would."
+    ]
+
+
 program : model -> (model -> Html model) -> ProgramTest model model ()
 program init view =
     ProgramTest.createSandbox