fix(buttons): add focus states on all buttons

[najlaskr]

problem

focus state was missing in all buttons which didn't meet a11y guidelines on ensuring focus indicators are easy to spot during keyboard interactions.

what changed

removed outline-none to ensure focus states are visible for all button variants.

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@248

commit: 64cd669

[github-actions]

Docs Preview

View docs preview

Commit: 64cd669

[github-actions]

Visual Regression Report

29 screenshot(s) with visual changes:

Button / Variants

1,536,680 px (52.64%) changed

Before	After	Diff

Button / Sizes

2,622,880 px (89.81%) changed

Before	After	Diff

Button / With Icon

2,639,694 px (90.39%) changed

Before	After	Diff

Button / Icon Only

2,621,796 px (89.78%) changed

Before	After	Diff

Button / Loading State

2,643,014 px (90.5%) changed

Before	After	Diff

Button / Disabled State

2,639,702 px (90.39%) changed

Before	After	Diff

Combobox (Open)

751,571 px (5.23%) changed

Before	After	Diff

Input / With Label and Description

409,377 px (9.21%) changed

Before	After	Diff

Input / With Error (String)

408,885 px (9.2%) changed

Before	After	Diff

Input / With Error (Validation Object)

407,778 px (9.18%) changed

Before	After	Diff

Input / Input Sizes

409,145 px (9.21%) changed

Before	After	Diff

Input / Disabled

408,463 px (9.19%) changed

Before	After	Diff

Input / Optional Field

407,778 px (9.18%) changed

Before	After	Diff

Input / With Label Tooltip

409,125 px (9.21%) changed

Before	After	Diff

Input / ReactNode Label

406,664 px (9.15%) changed

Before	After	Diff

Input / Bare Input (No Label)

409,393 px (9.21%) changed

Before	After	Diff

Input / Input Types

407,710 px (9.17%) changed

Before	After	Diff

Select / Basic Usage

48,394 px (8.22%) changed

Before	After	Diff

Select / Without Visible Label

44,119 px (7.84%) changed

Before	After	Diff

Select / With Description and Error

45,413 px (6.48%) changed

Before	After	Diff

Select / Placeholder

44,460 px (6.7%) changed

Before	After	Diff

Select / Label with Tooltip

44,315 px (6.31%) changed

Before	After	Diff

Select / Custom Rendering

119,129 px (7.17%) changed

Before	After	Diff

Select / Loading

73,625 px (10.36%) changed

Before	After	Diff

Select / Multiple Item

800,033 px (48.68%) changed

Before	After	Diff

Select / More Example

40,100 px (4.39%) changed

Before	After	Diff

Select / Select

18,738 px (2.18%) changed

Before	After	Diff

Select / Select.Option

18,738 px (2.18%) changed

Before	After	Diff

Select (Open)

2,457,268 px (15.61%) changed

Before	After	Diff

---

Generated by Kumo Visual Regression

[mattrothenberg]

Thanks for catching this a11y issue! The fix works great for Button - I tested locally and can see the focus ring now.

While testing, I noticed the same outline-none pattern exists in a few other input components that would benefit from the same treatment while we're in here:

• input.tsx (line 111)
• select.tsx (lines 62, 160)
• sensitive-input.tsx (lines 333, 396)
• combobox.tsx (lines 478, 502)

[mattrothenberg]

Hey! I went ahead and pushed a commit extending the fix to the other components that had the same outline-none issue:

• Input - removed outline-none from inputVariants()
• Select - removed outline-none from selectVariants() and the trigger
• Combobox - removed outline-none from the input fields
• SensitiveInput - removed outline-none and added focus-visible:ring to the eye button