Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use "AriaButton" under the hood with the Button component #342

Open
rachelruderman opened this issue Nov 15, 2023 · 1 comment
Open

Use "AriaButton" under the hood with the Button component #342

rachelruderman opened this issue Nov 15, 2023 · 1 comment

Comments

@rachelruderman
Copy link
Contributor

Using the aria-components Button would give us a lot of a11y goodies for free:
https://react-spectrum.adobe.com/react-aria/Button.html

For example, the aria-components package allowed for creating a fully accessible dropdown menu in the Intelligence work with minimal code. In order to match the Cypress design system we copy/pasted the Tailwind styles. This is not ideal; once the design system uses aria-components Button under-the-hood, we can use the design system component instead

See use case in code: https://github.com/cypress-io/cypress-services/blob/b99f518e66e10f37748133020cab9e282ce7ae78/frontend/packages/dashboard/src/common/intelligence-drill-in-view/IntelligenceDrillInView.tsx#L103

@rachelruderman
Copy link
Contributor Author

rachelruderman commented Nov 15, 2023

Fwiw the use case above uses multiple components from react-aria-components (see below). It would the absolute best if cypress-design used these to export fully accessible components

import { Button as AriaButton, Dialog, DialogTrigger, Popover, } from 'react-aria-components'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant