Presentational element is exposed to assistive technologies

[PaoloDiBello]

react-google-recaptcha version: 2.1.0

size invisible recaptcha

        <ReCAPTCHA
          sitekey={sitekey}
          ref={reRef}
          theme="dark"
          size="invisible"
        />

I am using an extension called Siteimprove Accessibility Checker and I am getting the following result

Page elements can be marked as decorative if they do not add any new information to the page. This can improve the user experience for people who use screen readers - by cutting out irrelevant "noise".

In this case, the element seems to be for more than just decoration. Either the element can be reached by keyboard (it's interactive), or it has an ARIA attribute which communicates something to assistive technologies.

It's important to note that marking an element as decorative (or giving it a presentational role) does not always mean it will be ignored by assistive technology.

The problem is the iframe I don't have access to

<iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?..&amp;theme=dark&amp;size=invisible&amp;badge=bottomright&amp;cb=" width="256" height="60" role="presentation" name="...." frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe>

Adding aria-hidden="true" solves the issue

Might be related to: #164 - Accessibility problem