react-recurly icon indicating copy to clipboard operation
react-recurly copied to clipboard

Accessibility properties

Open piknikki opened this issue 9 months ago • 2 comments

We implement recurly cc fields with Next/React and I'm having no luck finding out how to add accessibility attributes. For example, we'd like to add aria-describedby and aria-invalid=true when there is an error with the field. Is this possible?

I'm also not able to find documentation on adding labels for the inputs (using the individual inputs for number, month, year, cvv), and how to pass an id that the label could target.

piknikki avatar Apr 21 '25 12:04 piknikki

Controlling aria attributes is a very good feature request. We don't support that natively at this time. What we might consider here is setting aria-errormessage on the <input>

HTML wouldn't be able to link a <label> in the parent to an <input> within an iframe, but it is possible to pair the <label> with the <iframe> itself. We also set the aria-label attr on the <input> to match the placeholder value.

chrissrogers avatar Apr 24 '25 15:04 chrissrogers

can you please also consider RTL support? we only need the direction style attribute to keep consistency with the rest of the fields in the form.

Silviu-Marian avatar Jul 14 '25 22:07 Silviu-Marian