Recurly input field aria-label and title can be set, but iframe aria-label cannot

[chrisspadanuta]

I'm working on making my site more accessible and am running into the following problem while testing with ANDI:

Using recurly.configure to set fields, I can set the style.title for each credit card field and that will result in the aria-label and title attributes being set on their corresponding input tags. However, this does not set those same attributes on the corresponding iframe tag for each field.

      {
        all: {
          style: styles,
        },
        number: {
          style: {
            placeholder: {
              content: '____ ____ ____ ____',
            },
            title: 'Credit card title',
          },
        },
      }

Resulting output:

The ANDI tool reports the following error: "Iframe has no accessible name or [title]."

I'm using react with the old Hosted Fields, but the same situation exists for the new Elements stuff in react-recurly, (as I've made a sandbox to test it following the implementation guide detailed here). Only the input field inside of the iframe gets its aria-label and title fields set, not the iframe.

      <CardNumberElement
        style={{
          border: `1px solid black`,
          placeholder: {
            content: 'Credit Card placeholder',
          },
          title: 'Credit card title',
        }}
      />

Currently the only way to get this working is to set the iframe's aria-label attribute manually using a selector and calling setAttribute on the element, which is not ideal.