From 65bf4de959ca15a389378fc6a7fb44de7750fccf Mon Sep 17 00:00:00 2001 From: masuP9 Date: Wed, 13 May 2026 16:46:55 +0900 Subject: [PATCH] =?UTF-8?q?release:=20v0.3.5=20=E2=80=94=20fix=20MenuButto?= =?UTF-8?q?n=20caret=20in=20forced-colors=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The dropdown caret on `.apg-menu-button-trigger::after` is drawn with the classic CSS triangle hack (width:0, height:0, transparent left/right borders, colored top border). In Windows High Contrast Mode, browsers substitute `transparent` with a system color, so left/right borders fill in and the triangle becomes a solid 8x4 rectangle — the expand/collapse direction is no longer readable. Add `forced-color-adjust: none` to the `::after` so transparent stays transparent. `currentColor` still inherits the trigger's `color: ButtonText`, so the top border renders correctly and the 180deg rotate on `[aria-expanded='true']` is visible again. Co-Authored-By: Claude Opus 4.7 (1M context) --- package.json | 2 +- src/styles/patterns/menu-button.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 45309f3c..eb08d26b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "apg-patterns-examples", "type": "module", - "version": "0.3.4", + "version": "0.3.5", "private": false, "description": "Accessible UI components following WAI-ARIA APG patterns. Multi-framework implementations in React, Vue, Svelte, and Astro with documentation and tests.", "author": "masuP9", diff --git a/src/styles/patterns/menu-button.css b/src/styles/patterns/menu-button.css index d83d3672..530326a4 100644 --- a/src/styles/patterns/menu-button.css +++ b/src/styles/patterns/menu-button.css @@ -40,6 +40,7 @@ border-top: 4px solid currentColor; margin-left: 0.25rem; transition: transform 0.15s ease; + forced-color-adjust: none; } .apg-menu-button-trigger[aria-expanded='true']::after {