diff --git a/src/Nri/Ui/Highlighter/V1.elm b/src/Nri/Ui/Highlighter/V1.elm index 9c51f0e2..633c5825 100644 --- a/src/Nri/Ui/Highlighter/V1.elm +++ b/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 ] ] diff --git a/src/Nri/Ui/HighlighterTool/V1.elm b/src/Nri/Ui/HighlighterTool/V1.elm index 0351fd62..ade207c1 100644 --- a/src/Nri/Ui/HighlighterTool/V1.elm +++ b/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 diff --git a/src/Nri/Ui/MediaQuery/V1.elm b/src/Nri/Ui/MediaQuery/V1.elm index d1ec7e3c..bc6c0c8c 100644 --- a/src/Nri/Ui/MediaQuery/V1.elm +++ b/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