fix(snackbar): only pause on keyboard focus using :focus-visible (#1209)

* fix(snackbar): only pause on keyboard focus using :focus-visible

Previously, onFocus handler would pause the snackbar timer on any focus
event including mouse clicks/taps. This caused the snackbar to persist
indefinitely when clicked.

Now uses :focus-visible to detect keyboard-initiated focus:
- Keyboard Tab → pause timer (accessibility for screen reader users)
- Mouse click → don't pause (timer continues normally)
- If :focus-visible not supported → don't pause (safe fallback)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* docs

* fix(snackbar): remove unnecessary :focus-within check

:focus-within doesn't distinguish between keyboard and mouse focus,
so it would cause pause on mouse click as well. Since :focus-visible
is applied to the focused element itself (including buttons focused
via keyboard), checking event.target.matches(":focus-visible") alone
is sufficient.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* docs: changeset

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: te6-in

.changeset/huge-clouds-design.md

@@ -0,0 +1,5 @@
+---
+"@seed-design/react-snackbar": patch
+---
+
+Snackbar 타이머가 멈추는 기준을 `focus`에서 `focus-visible`로 수정하여 `pauseOnInteraction={true}`인 경우 Snackbar가 닫히지 않는 문제를 수정합니다.

bun.lock

@@ -29,7 +29,8 @@
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@seed-design/dom-utils": "1.0.0",
-    "@seed-design/react-primitive": "1.0.0"
+    "@seed-design/react-primitive": "1.0.0",
+    "@seed-design/react-supports": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",

packages/react-headless/snackbar/package.json

@@ -1,4 +1,5 @@
 import { ariaAttr, buttonProps, dataAttr, elementProps } from "@seed-design/dom-utils";
+import { useSupports } from "@seed-design/react-supports";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useSafeOffset } from "./useSafeOffset";
 
@@ -145,6 +146,7 @@ export function useSnackbar(props: UseSnackbarProps) {
   const { state, currentSnackbar, visible, queue, visibleDuration, events } =
     useSnackbarState(props);
   const { overlapTracker, regionRef, regionStyle, safeOffset } = useSafeOffset();
+  const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
 
   return useMemo(
     () => ({
@@ -189,8 +191,14 @@ export function useSnackbar(props: UseSnackbarProps) {
           "--snackbar-remove-delay": `${currentSnackbar?.removeDelay ?? 0}ms`,
           "--snackbar-duration": `${visibleDuration}ms`,
         } as React.CSSProperties,
-        onFocus() {
-          events.pause();
+        onFocus(event) {
+          // if :focus-visible not supported, do not pause on focus
+          if (!isFocusVisibleSupported) return;
+
+          // only pause if focus is visible (focused using keyboard) || action label has focus
+          if (event.target.matches(":focus-visible")) {
+            events.pause();
+          }
         },
         onBlur() {
           events.resume();
@@ -221,6 +229,7 @@ export function useSnackbar(props: UseSnackbarProps) {
       regionStyle,
       overlapTracker,
       regionRef,
+      isFocusVisibleSupported,
     ],
   );
 }