feat: improve form controls border contrast for accessibility

The default border colors for form controls in the default theme in Zendesk Garden
don't meet the minimum 3:1 contrast ratio against the background.
We apply a custom theme override to increase the contrast of these borders,
following the guidelines provided by the Garden team in an internal doc.

By default, Garden sets the `grey.300` color as the default border color
in the light theme, and then it is increased by 100 for form controls,
which is not sufficient, providing only 2:1 contrast ratio.
To reach the 3:1 ratio, we need to use `grey.600` and so
we apply an offset of 300.

We also enhance the hover state border color, which by default is less
prominent when the border color is darker.

We also update the `$high-contrast-border-color` Sass variable
to match the new border color used in the theme override.

Author: Fredx87

src/modules/shared/garden-theme/createTheme.ts

@@ -1,6 +1,6 @@
 import type { IButtonProps } from "@zendeskgarden/react-buttons";
 import type { IGardenTheme } from "@zendeskgarden/react-theming";
-import { DEFAULT_THEME } from "@zendeskgarden/react-theming";
+import { DEFAULT_THEME, getColor } from "@zendeskgarden/react-theming";
 import { css } from "styled-components";
 
 export interface Settings {
@@ -14,6 +14,30 @@ export interface Settings {
 }
 
 export function createTheme(settings: Settings): IGardenTheme {
+  const accessibleFormControls = css`
+    /* Boost default border contrast - use :not() to preserve validation colors */
+    &:not([aria-invalid="true"]) {
+      border-color: ${(p) =>
+        getColor({
+          theme: p.theme,
+          variable: "border.default",
+          dark: { offset: -100 },
+          light: { offset: 300 },
+        })};
+    }
+
+    /* Enhanced hover state */
+    &:hover:not([aria-invalid="true"]) {
+      border-color: ${(p) =>
+        getColor({
+          theme: p.theme,
+          variable: "border.primaryEmphasis",
+          dark: { offset: -100 },
+          light: { offset: 100 },
+        })};
+    }
+  `;
+
   return {
     ...DEFAULT_THEME,
     rtl: document.dir === "rtl",
@@ -56,6 +80,10 @@ export function createTheme(settings: Settings): IGardenTheme {
             color: ${settings.brand_text_color};
           `}
       `,
+      "forms.input": accessibleFormControls,
+      "forms.faux_input": accessibleFormControls,
+      "forms.textarea": accessibleFormControls,
+      "dropdowns.combobox.trigger": accessibleFormControls,
     },
   };
 }

styles/_variables.scss

@@ -13,7 +13,7 @@ $font-size-navigation: 14px;
 $font-size-small: 13px;
 $font-size-smaller: 11px;
 
-$high-contrast-border-color: #87929D; // maintains a 3:1 contrast ratio with default background color (#FFF). Use for controls and inputs
+$high-contrast-border-color: #848F99; // maintains a 3:1 contrast ratio with default background color (#FFF). Use for controls and inputs
 $low-contrast-border-color: #ddd; // less than 3:1 contrast ratio with default background color. Use for elements that do not require user interaction
 $menu-border-color: #d8dcde;