Merge pull request #1069 from NoRedInk/bat/highlighter-high-contrast

Adds high contrast mode

src/Nri/Ui/Highlighter/V1.elm

@@ -72,6 +72,7 @@ import List.Extra
 import Nri.Ui.Highlightable.V1 as Highlightable exposing (Highlightable)
 import Nri.Ui.HighlighterTool.V1 as Tool
 import Nri.Ui.Html.Attributes.V2 as AttributesExtra
+import Nri.Ui.MediaQuery.V1 as MediaQuery
 import Sort exposing (Sorter)
 import Sort.Set
 import String.Extra
@@ -455,7 +456,19 @@ groupContainer viewSegment highlightables =
                           tabindex 0
                         , css
                             [ Css.Global.children
-                                [ Css.Global.selector ":first-child" markedWith.startGroupClass
+                                [ Css.Global.selector ":first-child"
+                                    (MediaQuery.highContrastMode
+                                        [ Maybe.map
+                                            (\name ->
+                                                Css.before
+                                                    [ Css.property "content" ("\"[" ++ name ++ "] \"")
+                                                    ]
+                                            )
+                                            markedWith.name
+                                            |> Maybe.withDefault (Css.batch [])
+                                        ]
+                                        :: markedWith.startGroupClass
+                                    )
                                 , Css.Global.selector ":last-child" markedWith.endGroupClass
                                 ]
                             ]

src/Nri/Ui/HighlighterTool/V1.elm

@@ -12,6 +12,7 @@ module Nri.Ui.HighlighterTool.V1 exposing
 
 import Css
 import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.MediaQuery.V1 as MediaQuery
 
 
 {-| Tool that can be used on a highlighter
@@ -90,6 +91,7 @@ highlightStyles color =
         sharedStyles
         [ Css.backgroundColor color
         , Css.boxShadow5 Css.zero (Css.px 1) Css.zero Css.zero Colors.gray75
+        , MediaQuery.highContrastMode [ Css.property "background-color" "Mark" ]
         ]
 
 
@@ -105,6 +107,10 @@ hoverStyles color =
     List.append
         sharedStyles
         [ Css.important (Css.backgroundColor color)
+        , MediaQuery.highContrastMode
+            [ Css.property "background-color" "Highlight" |> Css.important
+            , Css.property "color" "HighlightText"
+            ]
 
         -- The Highlighter applies both these styles and the startGroup and
         -- endGroup styles. Here we disable the left and the right padding

src/Nri/Ui/MediaQuery/V1.elm

@@ -1,5 +1,6 @@
 module Nri.Ui.MediaQuery.V1 exposing
     ( anyMotion, prefersReducedMotion
+    , highContrastMode
     , mobile, notMobile
     , mobileBreakpoint
     , quizEngineMobile
@@ -22,6 +23,7 @@ module Nri.Ui.MediaQuery.V1 exposing
             ]
 
 @docs anyMotion, prefersReducedMotion
+@docs highContrastMode
 
 @docs mobile, notMobile
 @docs mobileBreakpoint
@@ -50,6 +52,12 @@ prefersReducedMotion =
     withMediaQuery [ "(prefers-reduced-motion)" ]
 
 
+{-| -}
+highContrastMode : List Style -> Style
+highContrastMode =
+    withMediaQuery [ "(forced-colors: active)" ]
+
+
 {-| Styles using the `mobileBreakpoint` value as the maxWidth.
 -}
 mobile : MediaQuery