Use "AriaButton" under the hood with the Button component
rachelruderman opened this issue · 1 comments
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
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'