Select: fix dropdown arrow colors in forced-colors mode

.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.

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) {

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;
     }
   }
 }