jsx-a11y/iframe-has-title: title should not be required for hidden frames

[LosYear]

Hey!

Let's consider a case when we have some technical iframe on the page (e.g. collect some user actions). According to a11y rules we will add aria-hidden=true to hide it from assistive techs and tabIndex=-1 to exclude it from keyboard access.

In this case eslint plugin still requires title attribute but it seems to be redundant.

Please let me know, what do you think about this case :)

[LosYear]

I'm ready to submit a PR to fix it if you agree that it is undesired behaviour

[ljharb]

Why would aria-hidden mean a user wouldn’t be able to hover their mouse cursor over it?

[LosYear]

Why would aria-hidden mean a user wouldn’t be able to hover their mouse cursor over it?

Good question, btw. Since aria-hidden means that we do not want iframe to be interactable for screen readers, I don’t think it’s a good idea to force any accessibility attributes on it. Don’t you think so?

Title for an element that is hidden from assistive techs seems to be redundant

According to MDN, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#accessibility_concerns:

People navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content

Negative tabIndex or inert is required for consistency because:

aria-hidden="true" should not be used on elements that can receive focus. Additionally, since this attribute is inherited by an element's children, it should not be added onto the parent or ancestor of a focusable element

[ljharb]

Things with a title pop up a tooltip when you hover over them, but maybe that's not the case if they're aria-hidden, i'd have to test it out.

[Gcamara14]

Hi there adding a comment here from Deque - the creators of axe-core:

Hidden frames should have a title of "Intentionally blank"

Context

Source: https://dequeuniversity.com/tips/provide-iframe-titles

For iframes that contain non-readable content, like JavaScript, provide a title to pass automated tests, but be sure to hide the content altogether from screen reader users using aria-hidden="true".

<iframe title="Intentionally blank" src="noreadablecontent.com" aria-hidden="true"></iframe>