cypress-io / cypress-design

Find here all the components to build UI with the Cypress Brand
https://design.cypress.io
MIT License
12 stars 4 forks source link

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

Open rachelruderman opened 10 months ago

rachelruderman commented 10 months ago

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 commented 10 months ago

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'