fix: improve survey form input border contrast for WCAG 1.4.11 (#61263)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>

Author: 3 people

src/events/components/Survey.module.scss

@@ -14,3 +14,12 @@
     text-decoration: underline;
   }
 }
+
+// Override Primer's form-control border color to meet WCAG 1.4.11 Non-Text Contrast
+// (requires 3:1 contrast ratio against adjacent colors).
+// The default Primer light-theme border (#d0d7de / #dce1e6) has only ~1.3–1.7:1 contrast
+// against a white background. Using --fgColor-muted provides sufficient contrast in all themes.
+// See: https://github.com/github/accessibility-audits/issues/16368
+.accessibleBorder {
+  border-color: var(--fgColor-muted, #57606a) !important;
+}

src/events/components/Survey.tsx

@@ -187,7 +187,7 @@ export const Survey = () => {
               <span>{t`additional_feedback`}</span>
             </label>
             <textarea
-              className="form-control input-sm width-full"
+              className={cx('form-control input-sm width-full', styles.accessibleBorder)}
               name="survey-comment"
               id="survey-comment"
               value={comment}
@@ -201,7 +201,10 @@ export const Survey = () => {
             </label>
             <input
               type="email"
-              className="form-control input-sm width-full color-bg-transparent"
+              className={cx(
+                'form-control input-sm width-full color-bg-transparent',
+                styles.accessibleBorder,
+              )}
               name="survey-email"
               id="survey-email"
               value={email}