diff --git a/.changeset/collapsible-focus-ring.md b/.changeset/collapsible-focus-ring.md new file mode 100644 index 000000000000..11a5d3cf6679 --- /dev/null +++ b/.changeset/collapsible-focus-ring.md @@ -0,0 +1,6 @@ +--- +'@astryxdesign/core': patch +--- + +[fix] Collapsible: the trigger button now shows a visible focus ring when focused via keyboard. The trigger's `all: unset` reset removed the browser's default outline without restoring a replacement, leaving keyboard focus invisible (WCAG 2.4.7). (#3722) +@bhamodi diff --git a/packages/core/src/Collapsible/Collapsible.tsx b/packages/core/src/Collapsible/Collapsible.tsx index d41a0b50ffad..ac891dd7429e 100644 --- a/packages/core/src/Collapsible/Collapsible.tsx +++ b/packages/core/src/Collapsible/Collapsible.tsx @@ -64,6 +64,16 @@ const styles = stylex.create({ color: colorVars['--color-text-primary'], textAlign: 'start', paddingBlock: 0, + // `all: unset` above wipes the UA focus outline; restore a keyboard-only + // focus ring using the standard token/offset (WCAG 2.4.7). + outline: { + default: null, + ':focus-visible': `2px solid ${colorVars['--color-accent']}`, + }, + outlineOffset: { + default: '0', + ':focus-visible': '2px', + }, }, // Capsize: trim leading from text triggers triggerLabel: {