add helpfully disabled checkbox

component-catalog/src/Examples/Checkbox.elm

@@ -26,6 +26,7 @@ import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Html.Attributes.V2 exposing (safeIdWithPrefix)
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Table.V7 as Table
+import Nri.Ui.Tooltip.V3 as Tooltip
 
 
 moduleName : String
@@ -38,6 +39,15 @@ version =
     7
 
 
+tooltipId : String
+tooltipId =
+    "tooltip"
+
+
+type TooltipType
+    = HelpfullyDisabled
+
+
 {-| -}
 example : Example State Msg
 example =
@@ -150,6 +160,30 @@ example =
                             ]
                   }
                 ]
+            , Heading.h2
+                [ Heading.plaintext "Tooltip Example"
+                , Heading.css [ Css.marginTop (Css.px 30) ]
+                ]
+            , Tooltip.view
+                { trigger =
+                    \attrs ->
+                        Checkbox.view
+                            { label = "Enable Text-to-Speech"
+                            , selected = Checkbox.NotSelected
+                            }
+                            [ Checkbox.id "tooltip-example"
+                            , Checkbox.disabled
+                            , Checkbox.custom attrs
+                            ]
+                , id = tooltipId
+                }
+                [ Tooltip.helpfullyDisabled
+                , Tooltip.open (state.openTooltip == Just HelpfullyDisabled)
+                , Tooltip.onToggle (ToggleTooltip HelpfullyDisabled)
+                , Tooltip.paragraph "Reasons why you can't enable Text-to-Speech"
+                , Tooltip.onRight
+                , Tooltip.fitToContent
+                ]
             ]
     , categories = [ Inputs ]
     , keyboardSupport =
@@ -219,6 +253,7 @@ preview =
 type alias State =
     { isChecked : Checkbox.IsSelected
     , settings : Control Settings
+    , openTooltip : Maybe TooltipType
     }
 
 
@@ -227,6 +262,7 @@ init : State
 init =
     { isChecked = Checkbox.PartiallySelected
     , settings = controlSettings
+    , openTooltip = Nothing
     }
 
 
@@ -315,6 +351,7 @@ type Msg
     = ToggleCheck Id Bool
     | UpdateControls (Control Settings)
     | Swallow
+    | ToggleTooltip TooltipType Bool
 
 
 {-| -}
@@ -338,6 +375,13 @@ update msg state =
         Swallow ->
             ( state, Cmd.none )
 
+        ToggleTooltip type_ isOpen ->
+            if isOpen then
+                ( { state | openTooltip = Just type_ }, Cmd.none )
+
+            else
+                ( { state | openTooltip = Nothing }, Cmd.none )
+
 
 type alias Id =
     String

src/Nri/Ui/Checkbox/V7.elm

@@ -159,7 +159,7 @@ you want/expect if underlying styles change.
 Instead, please use the `css` helper.
 
 -}
-custom : List (Html.Attribute Never) -> Attribute msg
+custom : List (Html.Attribute msg) -> Attribute msg
 custom attributes =
     Attribute <| \config -> { config | custom = config.custom ++ attributes }
 
@@ -190,7 +190,7 @@ type alias Config msg =
     , onCheck : Maybe (Bool -> msg)
     , isDisabled : Bool
     , guidance : Guidance msg
-    , custom : List (Html.Attribute Never)
+    , custom : List (Html.Attribute msg)
     , containerCss : List Css.Style
     , labelCss : List Css.Style
     }
@@ -260,6 +260,7 @@ view { label, selected } attributes =
             , selected = selected
             , disabled = config.isDisabled
             , guidance = config.guidance
+            , custom = config.custom
             , error = InputErrorAndGuidanceInternal.noError
             }
 
@@ -393,6 +394,7 @@ viewCheckboxLabel :
         , labelCss : List Style
         , error : InputErrorAndGuidanceInternal.ErrorState
         , guidance : Guidance msg
+        , custom : List (Html.Attribute msg)
     }
     -> List Style
     -> Html.Html msg
@@ -429,6 +431,7 @@ viewCheckboxLabel config styles =
                   , InputErrorAndGuidanceInternal.describedBy config.identifier config
                   , Aria.checked (selectedToMaybe config.selected)
                   ]
+                    ++ config.custom
                 , if config.disabled then
                     [ Aria.disabled True ]
 

tests/Spec/Nri/Ui/Checkbox.elm

@@ -7,6 +7,7 @@ import InputErrorAndGuidanceInternal exposing (guidanceId)
 import Nri.Test.KeyboardHelpers.V1 as KeyboardHelpers
 import Nri.Ui.Checkbox.V7 as Checkbox
 import ProgramTest exposing (..)
+import Spec.Helpers exposing (expectFailure)
 import Test exposing (..)
 import Test.Html.Event as Event
 import Test.Html.Query as Query
@@ -33,6 +34,7 @@ spec =
                         , attribute (Aria.describedBy [ guidanceId checkboxId ])
                         ]
                     |> done
+        , describe "helpfullyDisabledCheckbox" helpfullyDisabledCheckbox
         ]
 
 
@@ -92,6 +94,34 @@ stateSpec =
     ]
 
 
+helpfullyDisabledCheckbox : List Test
+helpfullyDisabledCheckbox =
+    [ test "does not have `aria-disabled=\"true\" when not disabled" <|
+        \() ->
+            program []
+                |> ensureViewHasNot [ attribute (Aria.disabled True) ]
+                |> done
+    , test "has `aria-disabled=\"true\" when disabled" <|
+        \() ->
+            program [ Checkbox.disabled ]
+                |> ensureViewHas [ attribute (Aria.disabled True) ]
+                |> done
+    , test "is clickable when not disabled" <|
+        \() ->
+            program []
+                |> clickIt
+                |> done
+    , test "is not clickable when disabled" <|
+        \() ->
+            program
+                [ Checkbox.disabled
+                ]
+                |> clickIt
+                |> done
+                |> expectFailure "Event.expectEvent: I found a node, but it does not listen for \"click\" events like I expected it would."
+    ]
+
+
 pressSpace : TestContext -> TestContext
 pressSpace =
     KeyboardHelpers.pressSpace { targetDetails = [] } checkbox