From ad1f80b204472fbd5315eff079502284c6c550e0 Mon Sep 17 00:00:00 2001
From: Bao <72965498+wBaob@users.noreply.github.com>
Date: Sun, 1 Nov 2026 22:01:20 +0500
Subject: [PATCH] Fix Select arrow colors in forced-colors mode

---
 .changeset/select-forced-colors-arrow.md    |  5 ++++
 e2e/components/Select.test.ts               | 30 +++++++++++++++++++++
 packages/react/src/Select/Select.module.css |  8 +++---
 3 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/select-forced-colors-arrow.md

diff --git a/.changeset/select-forced-colors-arrow.md b/.changeset/select-forced-colors-arrow.md
new file mode 100644
index 00000000000..f4ee8bdb245
--- /dev/null
+++ b/.changeset/select-forced-colors-arrow.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Select: Use the appropriate system color for enabled and disabled dropdown arrows in forced-colors mode.
diff --git a/e2e/components/Select.test.ts b/e2e/components/Select.test.ts
index 32545f90374..45c14cfa818 100644
--- a/e2e/components/Select.test.ts
+++ b/e2e/components/Select.test.ts
@@ -50,6 +50,36 @@ const stories = [
 ] as const
 
 test.describe('Select', () => {
+  for (const disabled of [false, true]) {
+    test(`arrow uses the ${disabled ? 'disabled' : 'enabled'} system color in forced colors @vrt`, async ({page}) => {
+      await page.emulateMedia({forcedColors: 'active'})
+      await visit(page, {
+        id: disabled ? 'components-select-features--disabled' : 'components-select--default',
+      })
+
+      const select = page.getByRole('combobox')
+      if (disabled) {
+        await expect(select).toBeDisabled()
+      } else {
+        await expect(select).toBeEnabled()
+      }
+
+      const expectedFill = await page.evaluate(
+        color => {
+          const reference = document.createElement('span')
+          reference.style.color = color
+          document.body.append(reference)
+          const result = getComputedStyle(reference).color
+          reference.remove()
+          return result
+        },
+        disabled ? 'GrayText' : 'FieldText',
+      )
+
+      await expect(select.locator('..').locator('svg')).toHaveCSS('fill', expectedFill)
+    })
+  }
+
   for (const story of stories) {
     test.describe(story.title, () => {
       for (const theme of themes) {
diff --git a/packages/react/src/Select/Select.module.css b/packages/react/src/Select/Select.module.css
index 86cfb01aca9..d480c74a542 100644
--- a/packages/react/src/Select/Select.module.css
+++ b/packages/react/src/Select/Select.module.css
@@ -45,17 +45,15 @@
 
   @media screen and (forced-colors: active) {
     svg {
-      /* stylelint-disable-next-line declaration-property-value-no-unknown */
-      fill: 'FieldText';
+      fill: FieldText;
     }
   }
 }
 
 .Disabled {
   @media screen and (forced-colors: active) {
-    svg {
-      /* stylelint-disable-next-line declaration-property-value-no-unknown */
-      fill: 'GrayText';
+    + .ArrowIndicator {
+      fill: GrayText;
     }
   }
 }