Transition Input Focus States from Inset to Outset/Border-Aligned Rings

[asuwebdesign]

Problem Statement

Currently, PatternFly’s form components (specifically TextInput, TextArea, and Select) utilize an inset focus ring. While this creates a distinct brand identity, it presents a few functional challenges:

1. Visual Distraction: The inset ring physically encroaches on the internal padding of the input. This can create a "cramped" visual effect for entered text and causes the component to feel like it is shrinking or shifting internally when focused.
2. Consistency with User Expectations: Most modern design systems and native OS behaviors (macOS, Windows) treat the focus ring as an "aura" or an expansion of the border, rather than an internal element.
3. Accessibility (WCAG 2.4.11): While inset rings can pass contrast requirements, an outset ring provides a clearer "footprint" change. This is often more easily perceived by users with low vision as it modifies the component's silhouette without interfering with the legibility of the content inside the input.

The Current State vs. Industry Standards

Most high-utility design systems have moved toward an outset or border-aligned approach to ensure the focus indicator does not obscure or crowd the component's content.

Design System	Focus Style	Position
PatternFly	Inset	Inside the border
Carbon (IBM)	Border-aligned	On/Outside the border
Lightning (Salesforce)	Outset	Outside the border
MUI (Material)	Border-aligned	Replaces/thickens border
Tailwind UI	Outset	Outside the border (Ring)

Proposed Solution

We suggest updating the PatternFly global focus variables to move the focus ring from an inset box-shadow to either:

• A standard outline with a small outline-offset.
• A box-shadow that renders outside the element's perimeter (e.g., box-shadow: 0 0 0 3px ...).

This change would ensure that the input's internal spacing remains constant and "stable" during data entry, reducing cognitive load and visual noise.

References & Accessibility Standards

• WCAG 2.2 - Focus Appearance: Guidelines on ensuring the focus indicator is clearly visible.
• A11y Project - Focus States: Best practices for designing indicators that stand out across various backgrounds.
• MDN - :focus-visible: Leveraging modern CSS to ensure the ring is prominent for keyboard users while remaining subtle for mouse users.

Final Thoughts

By aligning with the "outset" standard, PatternFly can provide a more intuitive and accessible experience for users who navigate via keyboard while maintaining the high aesthetic standards of the library.