Improvements to various components in Windows High Contrast Mode (#1111)

* high contrast mode improvements to various components

* add changeset

* highlight active ActionMenu item

* update changeset

* update changeset

* tweaked VideoPlayer focus styles

Author: joshfarrant

.changeset/chilly-yaks-unite.md

@@ -0,0 +1,14 @@
+---
+'@primer/react-brand': patch
+---
+
+Improvements to the styling of various components when viewed in Windows High Contrast Mode.
+
+- `FAQGroup`: Improved appearance for the selected tab
+- `Pagination`: Improved appearance for the current page item
+- `VideoPlayer`: Improved legibility for all text and controls
+- `Checkbox`: Improved focus and checked appearance
+- `Radio`: Improved focus and checked appearance
+- `TextInput`: Improved focus appearance
+- `Textarea`: Improved focus appearance
+- `ActionMenu`: Improved focus appearance

packages/react/src/ActionMenu/ActionMenu.module.css

@@ -276,6 +276,13 @@
   fill: var(--base-color-scale-gray-3);
 }
 
+@media (forced-colors: active) {
+  .ActionMenu__item:focus-visible {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .ActionMenu,

packages/react/src/FAQ/FAQGroup.module.css

@@ -50,3 +50,11 @@
   font-size: var(--brand-text-size-200);
   line-height: var(--brand-text-lineHeight-200);
 }
+
+@media (forced-colors: active) {
+  .FAQGroup__tablist-button[aria-selected='true'] {
+    border-color: Highlight;
+    border-width: var(--brand-borderWidth-thicker);
+    color: HighlightText;
+  }
+}

packages/react/src/Pagination/Pagination.module.css

@@ -115,6 +115,14 @@
   }
 }
 
+@media (forced-colors: active) {
+  .Pagination__item[aria-current],
+  .Pagination__item[aria-current]:hover {
+    border-color: Highlight;
+    border-width: var(--brand-borderWidth-thicker);
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Pagination,

packages/react/src/VideoPlayer/VideoPlayer.module.css

@@ -31,6 +31,12 @@
   height: 100%;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__container {
+    border: var(--brand-borderWidth-thin) solid ButtonBorder;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 2. Player                                                  */
 /* ---------------------------------------------------------- */
@@ -87,6 +93,13 @@
   color: var(--brand-videoPlayer-playButton-fgColor-rest);
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__playButton {
+    color: Highlight;
+    opacity: 1;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 4. Title                                                   */
 /* ---------------------------------------------------------- */
@@ -114,6 +127,13 @@
   visibility: hidden;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__title {
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 5. Controls                                                */
 /* ---------------------------------------------------------- */
@@ -173,12 +193,15 @@
 }
 
 .VideoPlayer__iconControl:focus-visible {
-  border-color: var(--brand-color-focus);
-  outline: none;
-  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-6);
   opacity: 1;
 }
 
+.VideoPlayer__iconControl:not(.VideoPlayer__closedCaption):focus-visible {
+  border-radius: var(--brand-borderRadius-small);
+}
+
 .VideoPlayer__iconControl svg {
   color: var(--brand-videoPlayer-controls-fgColor);
 }
@@ -224,6 +247,30 @@
   color: var(--brand-videoPlayer-closedCaption-fgColor-disabled);
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__iconControl svg {
+    color: ButtonText;
+  }
+
+  .VideoPlayer__iconControl:focus-visible {
+    outline-color: Highlight;
+  }
+
+  .VideoPlayer__closedCaption:focus-visible {
+    outline: none;
+  }
+
+  .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) {
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) .VideoPlayer__ccText {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 6. Range Element                                           */
 /* ---------------------------------------------------------- */
@@ -254,7 +301,8 @@
 
 .VideoPlayer__rangeInput:focus-visible {
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
-  outline-offset: var(--base-size-4);
+  outline-offset: var(--base-size-8);
+  border-radius: var(--brand-borderRadius-small);
   opacity: 1;
 }
 
@@ -303,6 +351,28 @@
   border: none;
 }
 
+@media (forced-colors: active) {
+  .VideoPlayer__rangeProgress::-webkit-progress-bar {
+    background-color: FieldText;
+  }
+
+  .VideoPlayer__rangeProgress::-webkit-progress-value {
+    background-color: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-moz-progress-bar {
+    background: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-ms-fill-lower {
+    background-color: Highlight;
+  }
+
+  .VideoPlayer__rangeProgress::-ms-fill-upper {
+    background-color: FieldText;
+  }
+}
+
 /* ---------------------------------------------------------- */
 /* 7. Tooltip                                                 */
 /* ---------------------------------------------------------- */

packages/react/src/forms/Checkbox/Checkbox.module.css

@@ -87,6 +87,21 @@
   opacity: 1;
 }
 
+@media (forced-colors: active) {
+  .Checkbox-input:focus + .Checkbox {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+
+  .Checkbox-input:checked + .Checkbox .Checkbox-checkmark-path {
+    stroke: Highlight;
+  }
+
+  .Checkbox {
+    transition: none;
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Checkbox,

packages/react/src/forms/Radio/Radio.module.css

@@ -111,6 +111,17 @@ Fixes safari bug where outline doesn't respect border-radius
   opacity: 1;
 }
 
+@media (forced-colors: active) {
+  .Radio-input:focus + .Radio {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-4);
+  }
+
+  .Radio-input:checked + .Radio .Radio-dot {
+    background-color: Highlight;
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Radio,

packages/react/src/forms/Select/Select.module.css

@@ -34,6 +34,13 @@
   box-shadow: 0 0 0 2px var(--brand-color-focus);
 }
 
+@media (forced-colors: active) {
+  .Select:focus-visible {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 .Select[disabled] {
   -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
   color: var(--brand-control-color-fg-disabled);

packages/react/src/forms/TextInput/TextInput.module.css

@@ -101,6 +101,13 @@
   outline: none;
 }
 
+@media (forced-colors: active) {
+  .TextInput-wrapper:focus-within {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /*
  * Validation
  */

packages/react/src/forms/Textarea/Textarea.module.css

@@ -108,6 +108,13 @@
   outline: none;
 }
 
+@media (forced-colors: active) {
+  .Textarea-wrapper:focus-within {
+    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline-offset: var(--base-size-2);
+  }
+}
+
 /*
  * Validation
  */