fix: pickReadableTextColor a11y concerns (#970)

* fix: pickReadableTextColor a11y concerns Removed pickReadableTextColor and replaced it with getTextColor. Closes D2IQ-97209 * refactor: move getCSSVarValue to shared utils getCSSVarValue is now exported and able to be used as util in other apps.
d2iq · May 12, 2023 · 3da0b7f · 3da0b7f
1 parent f6a6dce
commit 3da0b7f
Show file tree

Hide file tree

Showing 19 changed files with 74 additions and 91 deletions.
diff --git a/packages/accordion/style.ts b/packages/accordion/style.ts
@@ -8,7 +8,7 @@ import {
   borderRadiusDefault
 } from "../design-tokens/build/js/designTokens";
 import { lighten } from "../shared/styles/color";
-import { getCSSVarValue } from "../utilities";
+import { getCSSVarValue } from "../shared/styles/styleUtils/typography/color";
 
 export const fillWidth = css`
   display: block;

diff --git a/packages/appChrome/components/SidebarSubMenuItem.tsx b/packages/appChrome/components/SidebarSubMenuItem.tsx
@@ -11,17 +11,18 @@ import { textSize, flex, tintContent } from "../../shared/styles/styleUtils";
 import Clickable from "../../clickable/components/clickable";
 import ResetLink from "../../link/components/ResetLink";
 import { useTheme } from "@emotion/react";
-import getCSSVarValue from "../../utilities/getCSSVarValue";
+
 import {
   themeTextColorPrimary,
   themeTextColorPrimaryInverted,
   themeTextColorSecondaryInverted,
   themeBgPrimaryInverted,
   themeBgSelected
 } from "../../design-tokens/build/js/designTokens";
-import { pickReadableTextColor } from "../../shared/styles/color";
+import { getTextColor } from "../../shared/styles/color";
 import { AppChromeTheme, SidebarNavItemProps } from "../types";
 import { IconSize } from "../../shared/types/iconSize";
+import { getCSSVarValue } from "../../shared/styles/styleUtils/typography/color";
 
 export interface SidebarSubMenuItemTextProps {
   menuHasIcon: boolean;
@@ -64,7 +65,7 @@ const SidebarSubMenuItem = ({
     appChromeInsetContent(theme?.sidebarItemPaddingHor),
     sidebarNavItem(Boolean(isActive), Boolean(disabled), theme),
     tintContent(
-      pickReadableTextColor(
+      getTextColor(
         sidebarBgColor,
         getCSSVarValue(themeTextColorPrimary),
         getCSSVarValue(themeTextColorSecondaryInverted)
@@ -75,7 +76,7 @@ const SidebarSubMenuItem = ({
     subMenuItem,
     {
       [tintContent(
-        pickReadableTextColor(
+        getTextColor(
           subMenuItemBgColor,
           getCSSVarValue(themeTextColorPrimary),
           getCSSVarValue(themeTextColorPrimaryInverted)

diff --git a/packages/appChrome/style.ts b/packages/appChrome/style.ts
@@ -11,7 +11,7 @@ import {
 } from "../design-tokens/build/js/designTokens";
 import { padding, tintContent } from "../shared/styles/styleUtils";
 import { pickHoverBg, getTextColor } from "../shared/styles/color";
-import getCSSVarValue from "../utilities/getCSSVarValue";
+import { getCSSVarValue } from "../shared/styles/styleUtils/typography/color";
 import { AppChromeTheme } from "./types";
 import {
   spaceSizes,

diff --git a/packages/badge/style.ts b/packages/badge/style.ts
@@ -11,16 +11,16 @@ import {
   themeTextColorPrimaryInverted,
   themeBorder
 } from "../design-tokens/build/js/designTokens";
-import { pickReadableTextColor } from "../shared/styles/color";
-import getCSSVarValue from "../utilities/getCSSVarValue";
+import { getTextColor } from "../shared/styles/color";
+import { getCSSVarValue } from "../shared/styles/styleUtils/typography/color";
 
 const badgeAppearanceStyle = (color, isOutlined?: boolean) => {
   const bgColor = isOutlined ? getCSSVarValue(themeBgPrimary) : color;
 
   return css`
     background-color: ${bgColor};
     border-color: ${color};
-    color: ${pickReadableTextColor(
+    color: ${getTextColor(
       bgColor,
       getCSSVarValue(themeTextColorPrimary),
       getCSSVarValue(themeTextColorPrimaryInverted)

diff --git a/packages/badge/tests/__snapshots__/badge.test.tsx.snap b/packages/badge/tests/__snapshots__/badge.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`Badge primary 1`] = `
 exports[`Badge success 1`] = `
 <DocumentFragment>
   <span
-    class="css-1nxr7gm"
+    class="css-1qzm5de"
     data-cy="badge"
   >
     success

diff --git a/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap b/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`BadgeButton primary 1`] = `
 exports[`BadgeButton success 1`] = `
 <DocumentFragment>
   <span
-    class="css-92fng0"
+    class="css-uu7e6j"
     data-cy="badgeButton"
     role="button"
     tabindex="-1"

diff --git a/packages/button/style.ts b/packages/button/style.ts
@@ -20,10 +20,10 @@ import {
   themeWarningInverted,
   themeWarning
 } from "../design-tokens/build/js/designTokens";
-import { darken, pickReadableTextColor } from "../shared/styles/color";
+import { darken, getTextColor } from "../shared/styles/color";
 import { ButtonAppearances } from "./components/ButtonBase";
 import { tintContent } from "../shared/styles/styleUtils";
-import getCSSVarValue from "../utilities/getCSSVarValue";
+import { getCSSVarValue } from "../shared/styles/styleUtils/typography/color";
 
 export const buttonPadding = {
   vert: "10px",
@@ -41,7 +41,7 @@ export const filledButton = (
 ) => {
   const contentColor = isInverse
     ? themeTextColorPrimaryInverted
-    : pickReadableTextColor(
+    : getTextColor(
         baseColor,
         getCSSVarValue(themeTextColorPrimary),
         getCSSVarValue(themeTextColorPrimaryInverted)

diff --git a/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap b/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap
@@ -922,8 +922,8 @@ exports[`ButtonBase renders all appearances with props 5`] = `
   overflow: visible;
   padding: 0;
   text-align: inherit;
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: #1B2029;
+  fill: #1B2029;
   background-color: #14C684;
   border-radius: 4px;
   padding: 10px 18px;
@@ -949,8 +949,8 @@ exports[`ButtonBase renders all appearances with props 5`] = `
 
 .emotion-1[href],
 .emotion-1[href]:visited {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: #1B2029;
+  fill: #1B2029;
 }
 
 .emotion-1:hover {

diff --git a/packages/donutChart/components/DonutChart.tsx b/packages/donutChart/components/DonutChart.tsx
@@ -3,9 +3,11 @@ import {
   themeBorder,
   themeBrandPrimary
 } from "../../design-tokens/build/js/designTokens";
-import { tintContentSecondary } from "../../shared/styles/styleUtils/typography/color";
+import {
+  getCSSVarValue,
+  tintContentSecondary
+} from "../../shared/styles/styleUtils/typography/color";
 import { hexToRgbA } from "../../shared/styles/color";
-import getCSSVarValue from "../../utilities/getCSSVarValue";
 
 interface DonutChartDatum {
   percentage: number;

diff --git a/packages/infobox/style.ts b/packages/infobox/style.ts
@@ -12,7 +12,7 @@ import {
   themeWarning
 } from "../design-tokens/build/js/designTokens";
 import { lighten, darken } from "../shared/styles/color";
-import getCSSVarValue from "../utilities/getCSSVarValue";
+import { getCSSVarValue } from "../shared/styles/styleUtils/typography/color";
 
 const infoBoxAppearances = appearance => {
   switch (appearance) {

diff --git a/packages/popover/components/PopoverListItem.tsx b/packages/popover/components/PopoverListItem.tsx
@@ -14,8 +14,8 @@ import {
   themeError,
   themeTextColorDisabled
 } from "../../design-tokens/build/js/designTokens";
-import getCSSVarValue from "../../utilities/getCSSVarValue";
-import { darken, pickReadableTextColor } from "../../shared/styles/color";
+import { getCSSVarValue } from "../../shared/styles/styleUtils/typography/color";
+import { darken, getTextColor } from "../../shared/styles/color";
 import { PopoverListItemAppearances } from "../../shared/types/popoverListItemAppearances";
 import PopoverListItemIcon from "./PopoverListItemIcon";
 import PopoverListItemAvatar from "./PopoverListItemAvatar";
@@ -48,7 +48,7 @@ const PopoverListItem = (props: PopoverListItemProps) => {
   // on the :root
   const menuListItemSelected = css`
     background-color: ${themeBgSelected};
-    color: ${pickReadableTextColor(
+    color: ${getTextColor(
       getCSSVarValue(themeBgSelected),
       getCSSVarValue(themeTextColorPrimary),
       getCSSVarValue(themeTextColorPrimaryInverted)

diff --git a/packages/progressbar/style.ts b/packages/progressbar/style.ts
@@ -5,7 +5,7 @@ import {
   themeBrandPrimary
 } from "../design-tokens/build/js/designTokens";
 import { hexToRgbA } from "../shared/styles/color";
-import getCSSVarValue from "../utilities/getCSSVarValue";
+import { getCSSVarValue } from "../shared/styles/styleUtils/typography/color";
 import { ProgressBarSizes } from "./components/ProgressBar";
 
 export const defaultBarColor = themeBrandPrimary;

diff --git a/packages/segmentedControl/style.ts b/packages/segmentedControl/style.ts
@@ -6,8 +6,8 @@ import {
   borderRadiusDefault,
   themeBorder
 } from "../design-tokens/build/js/designTokens";
-import { pickReadableTextColor, darken } from "../shared/styles/color";
-import getCSSVarValue from "../utilities/getCSSVarValue";
+import { getTextColor, darken } from "../shared/styles/color";
+import { getCSSVarValue } from "../shared/styles/styleUtils/typography/color";
 import { buttonPadding } from "../button/style";
 
 export const staticKeyboardFocusClassname = "static_segmentKeyboardFocus";
@@ -39,7 +39,7 @@ export const segmentedControlButton = css`
   &:hover,
   &:focus-within {
     background-color: ${themeBgHover};
-    color: ${pickReadableTextColor(
+    color: ${getTextColor(
       getCSSVarValue(themeBgHover),
       getCSSVarValue(themeTextColorPrimary),
       getCSSVarValue(themeTextColorPrimaryInverted)
@@ -55,7 +55,7 @@ export const segmentedControlButtonInner = css`
 export const segmentedControlButtonActive = css`
   background-color: ${themeBorder};
   border-color: ${themeBorder};
-  color: ${pickReadableTextColor(
+  color: ${getTextColor(
     getCSSVarValue(themeBorder),
     getCSSVarValue(themeTextColorPrimary),
     getCSSVarValue(themeTextColorPrimaryInverted)
@@ -64,7 +64,7 @@ export const segmentedControlButtonActive = css`
   &:hover,
   &:focus-within {
     background-color: ${themeBorder};
-    color: ${pickReadableTextColor(
+    color: ${getTextColor(
       getCSSVarValue(themeBorder),
       getCSSVarValue(themeTextColorPrimary),
       getCSSVarValue(themeTextColorPrimaryInverted)

diff --git a/packages/shared/styles/color.ts b/packages/shared/styles/color.ts
@@ -72,38 +72,9 @@ const getHexBrightness = (hex: string) => {
 
 export const isHexDark = (hex: string): boolean => getHexBrightness(hex) < 140;
 
-// Normally this function would compare the contrast
-// between the baseTextOption and invertedTextOption,
-// but that forces text to be black on our success buttons.
-//
-// Checking with brightness still returns us the most readable
-// option on the background color, but will let the success
-// button have white text.
-//
-// The design team should try a different success color
-// to improve legibility and accessibility.
-export const pickReadableTextColor = (
-  bgColor,
-  baseTextOption,
-  invertedTextOption
-) => {
-  const baseTextBrightness = getHexBrightness(baseTextOption);
-  const invertedTextBrightness = getHexBrightness(invertedTextOption);
-
-  if (!isHexDark(bgColor)) {
-    return baseTextBrightness < invertedTextBrightness
-      ? baseTextOption
-      : invertedTextOption;
-  }
-  return baseTextBrightness > invertedTextBrightness
-    ? baseTextOption
-    : invertedTextOption;
-};
-
 /*
  * This function will select a WCAG-compliant text color based on the background color.
  * Reference: https://wunnle.com/dynamic-text-color-based-on-background
- * TODO: We should deprecate pickReadableTextColor and update components that use it.
  */
 export const getTextColor = (
   bgColor,

diff --git a/packages/shared/styles/formStyles.ts b/packages/shared/styles/formStyles.ts
@@ -20,8 +20,9 @@ import {
   display,
   tintContent
 } from "./styleUtils";
-import getCSSVarValue from "../../utilities/getCSSVarValue";
+import { getCSSVarValue } from "./styleUtils/typography/color";
 import { hexToRgbA } from "./color";
+
 const getFocusFieldBg = color => hexToRgbA(color, 0.05);
 
 export const textInputHeight = 36;

diff --git a/packages/shared/styles/styleUtils/typography/color.ts b/packages/shared/styles/styleUtils/typography/color.ts
@@ -45,3 +45,34 @@ export const tintContentSecondary = css`
     ${tintContent(themeTextColorSecondaryInverted)};
   }
 `;
+
+/**
+ * This function retrieves the value of a CSS variable
+ * from the document root or a provided fallback value.
+ *
+ * @param {string} cssVar - The CSS variable in the format of "var(--variable-name, fallback-value)"
+ *
+ * @returns {string} - Returns the computed value of the CSS variable if it's defined in the document root.
+ *
+ * If the variable is not defined or the function is called outside of a browser context, it returns the fallback value provided.
+ */
+export const getCSSVarValue = cssVar => {
+  // Get the content between the parentheses in "var()"
+  // and split the args from a string to an array
+  const cssVarArgsString = cssVar.match(/\(([^)]+)\)/)[1];
+  const cssVarArgs = cssVarArgsString.replace(/\s/g, "").split(",");
+
+  if (typeof window === "undefined") {
+    return cssVarArgs[1];
+  }
+
+  if (document?.documentElement !== null) {
+    // If there's a custom property defined on :root (<html>), return that.
+    // Otherwise, return the fallback value.
+    return (
+      getComputedStyle(document.documentElement)
+        .getPropertyValue(cssVarArgs[0])
+        .trim() || cssVarArgs[1]
+    );
+  }
+};
diff --git a/packages/shared/tests/color.test.tsx b/packages/shared/tests/color.test.tsx
@@ -5,7 +5,7 @@ import {
   rgbToHex,
   getHexContrast,
   isHexDark,
-  pickReadableTextColor,
+  getTextColor,
   pickHoverBg,
   mixHex
 } from "../styles/color";
@@ -80,16 +80,16 @@ describe("color utilities", () => {
     });
   });
 
-  describe("pickReadableTextColor", () => {
+  describe("getTextColor", () => {
     it("returns inverted text color if the background and the base text color are dark", () => {
-      expect(
-        pickReadableTextColor("#000000", "#1B2029", "#FFFFFF").toUpperCase()
-      ).toBe("#FFFFFF");
+      expect(getTextColor("#000000", "#1B2029", "#FFFFFF").toUpperCase()).toBe(
+        "#FFFFFF"
+      );
     });
     it("returns base text color if the background and the inverted text color are not dark", () => {
-      expect(
-        pickReadableTextColor("#FFFFFF", "#1B2029", "#999999").toUpperCase()
-      ).toBe("#1B2029");
+      expect(getTextColor("#FFFFFF", "#1B2029", "#999999").toUpperCase()).toBe(
+        "#1B2029"
+      );
     });
   });
 

diff --git a/packages/utilities/getCSSVarValue.ts b/packages/utilities/getCSSVarValue.ts
diff --git a/packages/utilities/index.ts b/packages/utilities/index.ts
@@ -1,3 +1,2 @@
 export { default as findNestedPropertyInObject } from "./findNestedPropertyInObject";
-export { default as getCSSVarValue } from "./getCSSVarValue";
 export { default as resizeEventManager } from "./resizeEventManager";