release: v0.3.7 — focus-visible 標準化

CODING_RULES.md

@@ -476,3 +476,5 @@ const config = thirdPartyLib.getConfig() as Config; // TODO: 型定義改善待
 - キーボードナビゲーション対応必須
 - スクリーンリーダー対応
 - `prefers-contrast` メディアクエリの値は `more` / `less` / `no-preference` / `custom` を使う（`high` / `low` は仕様にない値）
+- フォーカスインジケーターの標準: `:focus-visible` に `outline: 2px solid var(--ring); outline-offset: 2px;`（内側に出したい場合のみ `outline-offset: -2px`）。クリック時の outline 残りを抑えるため `:focus { outline: none; }` を明示する。セル系（grid 等）で outline が扱いづらいときに限り `box-shadow: inset 0 0 0 2px var(--ring);` を許可
+- フォーカス色は `var(--ring)` に統一。`var(--primary)` は selected / pressed / expanded などの状態色専用で focus 表示には使わない

package.json

@@ -1,7 +1,7 @@
 {
   "name": "apg-patterns-examples",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "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",

src/patterns/menubar/menubar.css

@@ -92,6 +92,11 @@
 
 .apg-menubar-trigger:focus,
 .apg-menubar [data-menubar-trigger]:focus {
+  outline: none;
+}
+
+.apg-menubar-trigger:focus-visible,
+.apg-menubar [data-menubar-trigger]:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: -2px;
 }
@@ -236,9 +241,19 @@
 .apg-menubar [data-menubar-menu] [role='menuitem']:focus,
 .apg-menubar [data-menubar-menu] [role='menuitemcheckbox']:focus,
 .apg-menubar [data-menubar-menu] [role='menuitemradio']:focus {
+  outline: none;
+  background-color: oklch(0.95 0 0);
+}
+
+.apg-menubar-menuitem:focus-visible,
+.apg-menubar-menu [role='menuitem']:focus-visible,
+.apg-menubar-menu [role='menuitemcheckbox']:focus-visible,
+.apg-menubar-menu [role='menuitemradio']:focus-visible,
+.apg-menubar [data-menubar-menu] [role='menuitem']:focus-visible,
+.apg-menubar [data-menubar-menu] [role='menuitemcheckbox']:focus-visible,
+.apg-menubar [data-menubar-menu] [role='menuitemradio']:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: -2px;
-  background-color: oklch(0.95 0 0);
 }
 
 /* Active state - pressed */
@@ -325,9 +340,14 @@
 
 .apg-menubar-submenu-trigger:focus,
 .apg-menubar [data-submenu-trigger]:focus {
+  outline: none;
+  background-color: oklch(0.95 0 0);
+}
+
+.apg-menubar-submenu-trigger:focus-visible,
+.apg-menubar [data-submenu-trigger]:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: -2px;
-  background-color: oklch(0.95 0 0);
 }
 
 /* Active state - pressed or submenu open */

src/styles/patterns/accordion.css

@@ -65,15 +65,14 @@
 }
 
 .apg-accordion-trigger:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: -2px;
-  z-index: 1;
-  position: relative;
+  outline: none;
 }
 
 .apg-accordion-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
+  z-index: 1;
+  position: relative;
 }
 
 .apg-accordion-trigger:disabled {
@@ -135,7 +134,11 @@
 }
 
 .apg-accordion-panel:focus {
-  outline: 2px solid var(--primary);
+  outline: none;
+}
+
+.apg-accordion-panel:focus-visible {
+  outline: 2px solid var(--ring);
   outline-offset: -2px;
 }
 

src/styles/patterns/alert-dialog.css

@@ -115,12 +115,11 @@ body:has(dialog.apg-alert-dialog[open]) {
 }
 
 .apg-alert-dialog-cancel:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-alert-dialog-cancel:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -137,12 +136,11 @@ body:has(dialog.apg-alert-dialog[open]) {
 }
 
 .apg-alert-dialog-confirm:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-alert-dialog-confirm:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -159,6 +157,10 @@ body:has(dialog.apg-alert-dialog[open]) {
 }
 
 .apg-alert-dialog-confirm--danger:focus {
+  outline: none;
+}
+
+.apg-alert-dialog-confirm--danger:focus-visible {
   outline: 2px solid var(--destructive);
   outline-offset: 2px;
 }
@@ -169,12 +171,11 @@ body:has(dialog.apg-alert-dialog[open]) {
 }
 
 .apg-alert-dialog-trigger:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-alert-dialog-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 

src/styles/patterns/button.css

@@ -35,7 +35,7 @@
 }
 
 .apg-button:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 

src/styles/patterns/carousel.css

@@ -201,8 +201,7 @@
 }
 
 .apg-carousel-play-pause:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-carousel-play-pause[data-playing='true'] {
@@ -237,9 +236,7 @@
 }
 
 .apg-carousel-tab:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: 50%;
+  outline: none;
 }
 
 /* Tab Indicator (Visual Dot) */
@@ -298,8 +295,7 @@
 
 .apg-carousel-prev:focus,
 .apg-carousel-next:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-carousel-prev:active,
@@ -336,14 +332,15 @@
 
 /* Focus Enhancement for Keyboard Users */
 .apg-carousel-tab:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
+  border-radius: 50%;
 }
 
 .apg-carousel-play-pause:focus-visible,
 .apg-carousel-prev:focus-visible,
 .apg-carousel-next:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 

src/styles/patterns/checkbox.css

@@ -48,7 +48,7 @@ apg-checkbox {
 
 /* Focus state */
 .apg-checkbox-input:focus-visible + .apg-checkbox-control {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 

src/styles/patterns/combobox.css

@@ -51,8 +51,12 @@
 
 .apg-combobox-input:focus {
   outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+
+.apg-combobox-input:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 30%, transparent);
 }
 
 .apg-combobox-input:disabled {
@@ -198,13 +202,6 @@
   }
 }
 
-/* Focus Enhancement for Keyboard Users */
-.apg-combobox-input:focus-visible {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
-}
-
 /* Windows High Contrast Mode */
 @media (forced-colors: active) {
   .apg-combobox-input {

src/styles/patterns/data-grid.css

@@ -59,34 +59,34 @@
 }
 
 .apg-data-grid-header.sortable:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 .apg-data-grid:focus-within .apg-data-grid-header.sortable.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 /* Header checkbox cell focus style */
 .apg-data-grid-header.apg-data-grid-checkbox-cell:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 .apg-data-grid:focus-within .apg-data-grid-header.apg-data-grid-checkbox-cell.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 /* Data row checkbox cell focus style (match header checkbox cell) */
 .apg-data-grid-cell.apg-data-grid-checkbox-cell:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 .apg-data-grid:focus-within .apg-data-grid-cell.apg-data-grid-checkbox-cell.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
@@ -144,12 +144,12 @@
 
 /* Focus state */
 .apg-data-grid-cell:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--focus-bg, #eff6ff);
 }
 
 .apg-data-grid:focus-within .apg-data-grid-cell.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--focus-bg, #eff6ff);
 }
 
@@ -424,7 +424,6 @@
     --header-hover-bg: #374151;
     --header-focus-bg: #1e3a5f;
     --row-header-bg: #1f2937;
-    --focus-color: #60a5fa;
     --focus-bg: #1e3a5f;
     --selected-bg: #1e3a5f;
     --selected-focus-bg: #1e4a7f;
@@ -455,7 +454,6 @@
   --header-hover-bg: #374151;
   --header-focus-bg: #1e3a5f;
   --row-header-bg: #1f2937;
-  --focus-color: #60a5fa;
   --focus-bg: #1e3a5f;
   --selected-bg: #1e3a5f;
   --selected-focus-bg: #1e4a7f;

src/styles/patterns/dialog.css

@@ -104,12 +104,11 @@ dialog.apg-dialog:not([open]) {
 }
 
 .apg-dialog-close:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-dialog-close:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -133,12 +132,11 @@ dialog.apg-dialog:not([open]) {
 }
 
 .apg-dialog-trigger:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-dialog-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 

src/styles/patterns/disclosure.css

@@ -37,8 +37,12 @@
   background: color-mix(in srgb, var(--background) 90%, var(--foreground));
 }
 
+.apg-disclosure-trigger:focus {
+  outline: none;
+}
+
 .apg-disclosure-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
   z-index: 1;
   position: relative;