@astryxdesign/core 0.4.0 → 0.4.1-canary.1ce0b4c

package/src/hooks/useFocusTrap.test.tsx

@@ -192,6 +192,22 @@ describe('useFocusTrap tabbable model (infra-8)', () => {
     fireEvent.keyDown(document, {key: 'Tab'});
     expect(screen.getByTestId('first')).toHaveFocus();
   });
+
+  it('keeps a programmatic focus target when the trap has no tabbable controls', () => {
+    render(
+      <Trap>
+        <div tabIndex={-1} data-testid="programmatic-target">
+          Read-only dialog content
+        </div>
+      </Trap>,
+    );
+    const target = screen.getByTestId('programmatic-target');
+    target.focus();
+
+    expect(fireEvent.keyDown(target, {key: 'Tab'})).toBe(false);
+    expect(target).toHaveFocus();
+    expect(screen.getByTestId('outside')).not.toHaveFocus();
+  });
 });
 
 describe('FOCUSABLE_SELECTOR href matching', () => {

package/src/hooks/useFocusTrap.ts

@@ -332,12 +332,21 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
         lastFocusRef.current = target as Element;
       } else if (isKeyboardNavigationRef.current) {
         // Focus escaped via keyboard - redirect it back
-        focusFirstDescendant(container);
+        const focusedFirst = focusFirstDescendant(container);
 
         // If we're back at the same element (Shift+Tab from first element),
         // try focusing the last element instead
-        if (lastFocusRef.current === document.activeElement) {
+        if (focusedFirst && lastFocusRef.current === document.activeElement) {
           focusLastDescendant(container);
+        } else if (
+          !focusedFirst &&
+          lastFocusRef.current instanceof HTMLElement &&
+          container.contains(lastFocusRef.current)
+        ) {
+          // A modal surface may intentionally have no tabbable controls and
+          // place initial focus on a tabIndex={-1} heading or panel. Preserve
+          // that programmatic focus target instead of letting Tab escape.
+          attemptFocus(lastFocusRef.current);
         }
 
         lastFocusRef.current = document.activeElement;
@@ -410,6 +419,15 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
 
         const focusable = getFocusableElements(container);
         if (focusable.length === 0) {
+          // There is nowhere to advance to. Keep focus on the current
+          // programmatic target (for example a dialog panel with tabIndex=-1)
+          // rather than allowing the browser to move into background content.
+          event.preventDefault();
+          const active = document.activeElement;
+          if (active instanceof HTMLElement && container.contains(active)) {
+            lastFocusRef.current = active;
+          }
+          isKeyboardNavigationRef.current = false;
           return;
         }
 

package/src/hooks/useInputStatusIcon.tsx

@@ -40,8 +40,9 @@ import type {FieldStatusVariant} from '../FieldStatus/FieldStatus';
 import type {InputStatus, InputStatusType} from '../Field/types';
 import {useTooltip} from '../Tooltip';
 import {useTranslator} from '../i18n';
-import {colorVars, radiusVars} from '../theme/tokens.stylex';
+import {radiusVars} from '../theme/tokens.stylex';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 
 /**
  * Maps each status type to its glyph. Shared so every input shows the same icon
@@ -82,12 +83,8 @@ const styles = stylex.create({
     color: 'inherit',
     cursor: 'pointer',
     borderRadius: radiusVars['--radius-full'],
-    outlineWidth: {default: null, ':focus-visible': '2px'},
-    outlineStyle: {default: null, ':focus-visible': 'solid'},
-    outlineColor: {
-      default: null,
-      ':focus-visible': colorVars['--color-accent'],
-    },
+    // Not the shared offset: this button sits inside the field, and measured at
+    // the standard 3px its ring crosses the field border.
     outlineOffset: {default: null, ':focus-visible': '2px'},
   },
 });
@@ -224,7 +221,10 @@ export function useInputStatusIcon({
           aria-describedby={tooltip.describedBy}
           onClick={handleButtonClick}
           onBlur={handleButtonBlur}
-          {...stylex.props(styles.statusButton)}>
+          {...stylex.props(
+            focusOutlineStyles.focusVisible,
+            styles.statusButton,
+          )}>
           {icon}
         </button>
         {tooltip.renderTooltip(status.message)}