Add custom message for negative tabindex in nested-interactive

[WilcoFiers]

See #3159

Even though they seem like they should, things like this just don't work well:

  <div role="button" id="pass7" tabindex="0">
    <button aria-hidden="true" tabindex="-1">hidden</button> text
  </div>
  <div role=checkbox aria-checked=true tabindex=0 aria-label=foo>
    <input type=checkbox aria-hidden=true tabindex=-1> <!-- visually hidden -->
  </div>

The button / input inside will still be packed up by various AT, that are trying very hard to ensure they don't miss things. This is by no means obvious, and so it would be good to add a specific message key to the no-focusable-content check that reports that using aria-hidden and negative tabindex is not a reliable way of hiding interactive elements. We should have a second message for role=none|presentation and negative tabindex too, just so we don't try to combine too many things.

See ariaErrormessageEvaluate for an example of how to use messageKey.

[dan-tripp]

I will try to implement this. Wish me luck.

[straker]

Awesome. Let me know if you have any questions.

[dan-tripp]

I'm trying to reconcile these two statements:
Wilco's statement "We should have a second message for role=none|presentation and negative tabindex too, just so we don't try to combine too many things."
and straker's statement "Thinking about this more, I don't think it matters if the element has aria-hidden or not. So long as the element has tabindex=-1 we should flag it"

In my PR now, the messageKey doesn't mention aria-hidden any more. Only negative tabindex. So does straker's statement render Wilco's statement moot?

[iamrafan]

@WilcoFiers Below are the screen reader test results from testing the examples in this demo: https://codepen.io/iamrafan/pen/OJjRqLg

	Browser/AT	Example 1 announcement	Example 2 announcement	Example 3 announcement	Example 4 announcement
1	Edge/NVDA	Text-1 button	Foo-123 checkbox checked	hidden-name-3 button text-3 button	Foo-456 checkbox checked
2	Chrome/NVDA	Text-1 button	Foo-123 checkbox checked	hidden-name-3 button text-3 button	Foo-456 checkbox checked
3	Firefox/NVDA	Text-1 button	Foo-123 checkbox checked	hidden-name-3 button text-3 button	Foo-456 checkbox checked
4	Edge/JAWS	Virtual mode off: 'Text -1 button' Virtual mode on: 'Text-1 button'. Then press arrow: nothing is announced	Virtual mode off: 'Foo-123 checkbox checked'   Virtual mode on: 'Foo-123 checkbox checked' Then press arrow: nothing is announced	Virtual mode off: 'hidden-name-3 text-3 button'   Virtual mode on: 'hidden-name-3 text-3 button' Then press arrow: nothing is announced	Virtual mode off:  'Foo-456 checkbox checked'   Virtual mode on:  'Foo-456 checkbox checked' Then press arrow: nothing is announced
5	Chrome/JAWS	Virtual mode off: 'Text -1 button'   Virtual mode on: 'Text-1 button'. Then press arrow: nothing is announced	Virtual mode off: 'Foo-123 checkbox checked'   Virtual mode on: 'Foo-123 checkbox checked' Then press arrow: nothing is announced	Virtual mode off: 'hidden-name-3 text-3 button'   Virtual mode on: 'hidden-name-3 text-3 button' Then press arrow: nothing is announced	Virtual mode off:  'Foo-456 checkbox checked'   Virtual mode on:  'Foo-456 checkbox checked' Then press arrow: nothing is announced
6	Edge/Narrator	Scan mode off: 'Text -1 button'   Scan mode on: 'Text-1 button'. Then press arrow: 'text-1'	Scan mode off: 'Foo-123 checkbox checked'   Scan mode on: 'Foo-123 checkbox checked' Then press arrow: nothing is announced	Scan mode off: 'hidden-name-3 text-3 button'   Scan mode on: 'hidden-name-3 text-3 button' Then press arrow: 'text-3'	Scan mode off:  'Foo-456 checkbox checked'   Scan mode on:  'Foo-456 checkbox checked' Then press arrow: 'bar-789 checkbox unchecked'
7	Chrome/Narrator	Scan mode off: 'Text -1 button'   Scan mode on: 'Text-1 button'. Then press arrow: 'text-1'	Scan mode off: 'Foo-123 checkbox checked'   Scan mode on: 'Foo-123 checkbox checked' Then press arrow: 'checkbox unchecked'	Scan mode off: 'hidden-name-3 text-3 button'   Scan mode on: 'hidden-name-3 text-3 button' Then press arrow: 'text-3'	Scan mode off:  'Foo-456 checkbox checked'   Scan mode on:  'Foo-456 checkbox checked' Then press arrow: 'bar-789 checkbox unchecked'
8	Safari/Voiceover	Text-1 button	Foo-123, ticked, tick box	hidden-name-3 text-3 button	Foo-456, ticked, tick box

If I run axe-core on the demo page after pulling in the changes from PR #3194

I would see:

• Failure description as: Nested interactive controls are not announced by screen readers
• Fix the following as: Using negative tabindex is not a reliable way of hiding interactive elements

Based on the above AT test results I think it is safe to conclude that the nested elements are not accessible to screen readers, which would make the fix the following message wrong

If we conclude that the nested elements are accessible to screen readers based on the AT tests, the Failure description above would be wrong.

[straker]

@iamrafan In VoiceOver and Safari (I haven't tested others), having aria-hidden=true and tabindex=-1 (but specifically the tabindex=-1) can causes issues when reading line by line and letter by letter. I demonstrated this in #3227 (comment), but reading line by line does not cause the button to become focused like it should when you get to the button. Same with letter by letter. Instead it reads the nested child and does not focus the interactive parent. Worse still, it announces that you are on a button even though your focus remains on the last element (such as the checkbox).

[iamrafan]

@straker Sure. Considering the nested element is announced by VoiceOver on Safari, wouldn't the Failure description stating that Nested interactive controls are not announced by screen readers be misleading?

[straker]

I see what you mean. Maybe something more along the lines of:

• help: "Ensure interactive controls are not nested"
• description: "Nested interactive controls are not always announced by screen readers or can cause focus problems for screen readers"
• tabindex message: "Using tabindex=-1 on an element inside an interactive control does not prevent a screen reader from focusing the element (even with 'aria-hidden=true')"

[iamrafan]

@straker yes, those messages look good. Can you also please update the default message to something like Element has focusable descendants which can cause focus problems for Assistive Technology(screen reader or speech recognition software) users. Then this message would also cover #3232

[DanielTripp]

Should this issue be closed? I think I fully addressed it with #3194

[WilcoFiers]

Yup, a little behind on my grooming work. Thanks Daniel!