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