Support buttons with checkbox role for 'toBeRequired'

[CarlosHdez]

Describe the feature you'd like:

Hi, I'm using Radix checkboxes https://www.radix-ui.com/docs/primitives/components/checkbox#root, it renders a button with role="checkbox" and supports required by adding aria-required="true" but I can't test it because in here https://github.com/testing-library/jest-dom/blob/main/src/to-be-required.js#L6 does not include either button as a valid form tag or checkbox as a valid role. Not sure if this would be a bug or just a feature requirement

Suggested implementation:

Describe alternatives you've considered:

Teachability, Documentation, Adoption, Migration Strategy:

[thewanionly]

I've run into this issue as well using shadcn which is essentially using radix components. Any updates on this one? It would be good to support this.

For now, as a workaround, I used toHaveAttribute matcher and disabled the lint rule:

 // eslint-disable-next-line jest-dom/prefer-required
expect(checkbox).toHaveAttribute('aria-required', 'true');

[gnapse]

This is a valid issue.

It seems that jest-dom does not implement this part of what's documented in MDN:

When form controls are created using non-semantic elements, such as a <div> with a role of checkbox, the aria-required attribute should be included, with a value of true, to indicate to assistive technologies that user input is required on the element for the form to be submittable. The aria-required attribute can be used with HTML form elements; it is not limited to elements that have an ARIA role assigned.

[JatinRanka]

Hey @gnapse, I would like to fix this issue.

I just wanted to confirm whether adding a new function in to-be-required file that checks if the element has aria-required with the value true should do the job, right? Is there anything else that I need to take care of (apart from test)?

PS: This is going to be my first contribution to this repo. So, any help would be appreciated :)

[gnapse]

I just wanted to confirm whether adding a new function in to-be-required file that checks if the element has aria-required with the value true should do the job, right?

Sounds good. As long as it does not impact the outer interface, of course that internally inside the module you can add helper functions, etc.

Is there anything else that I need to take care of (apart from test)?

Documentation, maybe. We should consider mentioning in the README the new functionality, under the section related to the toBeRequired custom matcher.

This is going to be my first contribution to this repo. So, any help would be appreciated :)

Sure. Give it a go with a PR and we'll take it from there. Feel free to request my review directly.

Looking forward to your first contribution. Thanks for taking the time to do it!

[adrianaferrugento]

Hi all, just came across this issue because I'm having a similar problem with my button[role="switch"]

[JatinRanka]

@gnapse I'm unable to request your review directly.

Can you please have a look at the PR: https://github.com/testing-library/jest-dom/pull/590