fix(styles): show pointer cursor on clickable elements

[awhobbs87]

Summary

• Add a low-specificity :where() rule so clickable native and ARIA elements use the pointer cursor by default.
• Exclude disabled, aria-disabled, and data-disabled elements.
• Add a patch changeset for @cloudflare/kumo.

Testing

• pnpm exec prettier --check packages/kumo/src/styles/kumo.css .changeset/clickable-cursor.md

• pnpm --filter @cloudflare/kumo lint (3 existing warnings, no errors)

• pnpm --filter @cloudflare/kumo build

• Reviews

• bonk has reviewed the change

• automated review not possible because: small CSS-only affordance update

• Tests

• Tests included/updated

• Automated tests not possible - manual testing has been completed as follows: not applicable

• Additional testing not necessary because: covered by formatting, lint, and package build

[eduardo-vargas]

minor: I would include these two here as well

input[type="checkbox"],
input[type="radio"],

[geoquant]

/bonk review

[pkg-pr-new]

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

commit: 623afcd

[ask-bonk]

LGTM! This is a nice accessibility improvement that provides consistent pointer cursor affordances across the component library.

What I like:

• Uses :where() for low specificity, making it easy for consumers to override when needed
• Properly scoped to Kumo components via [class*="kumo-"] and .link-current selectors
• Comprehensive coverage of both native elements and ARIA roles
• Correctly excludes disabled elements via multiple attribute checks (:disabled, [disabled], [aria-disabled="true"], [data-disabled])
• Eduardo's feedback about including input[type="checkbox"] and input[type="radio"] has been addressed

Notes:

• The selector chain is quite long but this is acceptable given the low specificity approach with :where()
• The changeset properly documents this as a patch-level fix

Approving for merge.

[ask-bonk]

I've submitted an approving review for PR #520.

Summary of the review:

This is a solid accessibility improvement that adds consistent pointer cursor affordances to clickable elements within Kumo components. The implementation uses :where() selectors for low specificity, making it easy to override when needed. It properly covers:

• Native clickable elements (links, buttons, inputs, labels, selects, summary)
• ARIA roles (button, link, menu items, tabs, checkboxes, radios, switches)
• Disabled state exclusions (:disabled, [disabled], [aria-disabled="true"], [data-disabled])

Eduardo's earlier feedback about including input[type="checkbox"] and input[type="radio"] has been addressed in the current revision. The changeset is correctly documented as a patch-level fix.

github run

[github-actions]

Docs Preview

View docs preview

Commit: 623afcd

[github-actions]

Visual Regression Report — 5 changed, 33 unchanged

5 screenshot(s) with visual changes:

Button / Loading State

4 px (0%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Without Label

105 px (0.1%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select (Open)

1,265 px (0.01%) changed

Before	After	Diff

33 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Select / Select Basic
• Select / Select Sizes
• Select / Select With Field
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Custom Rendering
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Options
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Grouped With Disabled
• Select / Select Long List

---

Generated by Kumo Visual Regression