Separate the events used for disclosure versus non-disclosure pattern

src/Nri/Ui/Tooltip/V3.elm

@@ -28,21 +28,6 @@ These tooltips aim to follow the accessibility recommendations from:
   - <https://inclusive-components.design/tooltips-toggletips>
   - <https://sarahmhigley.com/writing/tooltips-in-wcag-21/>
 
-Example usage:
-
-        Tooltip.view
-            { trigger =
-                \attrs ->
-                    ClickableText.button "Click me to open the tooltip"
-                        [ ClickableText.custom attrs ]
-            , id = "my-tooltip"
-            }
-            [ Tooltip.plaintext "Gradebook"
-            , Tooltip.primaryLabel
-            , Tooltip.onHover MyOnTriggerMsg
-            , Tooltip.open True
-            ]
-
 @docs view, toggleTip
 @docs Attribute
 @docs plaintext, html
@@ -515,14 +500,17 @@ viewTooltip_ { trigger, id } tooltip =
                     ( [ Events.onMouseEnter (msg True)
                       , Events.onMouseLeave (msg False)
                       ]
-                    , [ Events.onFocus (msg True)
+                    , case tooltip.purpose of
+                        Disclosure ->
+                            [ Events.onClick (msg (not tooltip.isOpen))
+                            , Key.onKeyDown [ Key.escape (msg False) ]
+                            ]
 
-                      -- TODO: this blur event means that we cannot focus links
-                      -- that are within the tooltip without a mouse
-                      , Events.onBlur (msg False)
-                      , Events.onClick (msg (not tooltip.isOpen))
-                      , Key.onKeyDown [ Key.escape (msg False) ]
-                      ]
+                        _ ->
+                            [ Events.onFocus (msg True)
+                            , Events.onBlur (msg False)
+                            , Key.onKeyDown [ Key.escape (msg False) ]
+                            ]
                     )
 
                 Nothing ->

styleguide-app/Examples/Tooltip.elm

@@ -111,6 +111,7 @@ type TooltipId
 type Msg
     = ToggleTooltip TooltipId Bool
     | SetControl (Control (List ( String, Tooltip.Attribute Never )))
+    | Log String
 
 
 update : Msg -> State -> ( State, Cmd Msg )
@@ -126,6 +127,13 @@ update msg model =
         SetControl settings ->
             ( { model | staticExampleSettings = settings }, Cmd.none )
 
+        Log message ->
+            let
+                _ =
+                    Debug.log "Tooltip Log:" message
+            in
+            ( model, Cmd.none )
+
 
 view : EllieLink.Config -> State -> List (Html Msg)
 view ellieLinkConfig model =
@@ -173,6 +181,7 @@ viewPrimaryLabelTooltip openTooltip =
                 ClickableSvg.button "Download"
                     UiIcon.download
                     [ ClickableSvg.custom eventHandlers
+                    , ClickableSvg.onClick (Log "Fake content totally downloaded!")
                     ]
         }
         [ Tooltip.plaintext "Download"
@@ -193,6 +202,7 @@ viewAuxillaryDescriptionToolip openTooltip =
                 ClickableSvg.button "Period 1"
                     UiIcon.class
                     [ ClickableSvg.custom eventHandlers
+                    , ClickableSvg.onClick (Log "You totally started managing Periud 1.")
                     ]
         }
         [ Tooltip.plaintext "Manage class and students"