Child button gets announced when using Arrow keys on the parent role="button" while it is not focusable

[bashmish]

This has been originally reported here: https://github.com/ing-bank/lion/issues/64

Steps to reproduce:

Demo: https://stackblitz.com/edit/js-mu9ixf

1. Open in Chrome this demo https://js-mu9ixf.stackblitz.io with NVDA (I'm using 2019.1.1)
2. Focus on first native button with text Native button before
3. Press Down Arrow key => lion-button with text Lion button gets announced
4. Press Down Arrow key => native <button tabindex="-1"> (a child of lion-button) gets announced as clickable button
5. Press Down Arrow key => native button with text Native button after gets announced

Some context about what DOM lion-button creates and how it looks on the demo above:

More information you can find in the original issue in our product.

Actual behavior:

Step 4 is wrong.

Expected behavior:

No step 4, native button (which is a child of lion-button) is ignored and Down Arrow moves directly from lion-button to the nearest focusable button with text Native button after (similar to what TAB does).

Adding arid-hidden="true" or role="presentation" on this button does not solve this issue.

System configuration

NVDA installed/portable/running from source:

NVDA installed

NVDA version:

2019.1.1 (current latest) and 2018.1.1

Windows version:

Windows 7 and Windows 10

Name and version of other software in use when reproducing the issue:

Chrome (75 - current newest version) and Firefox (67 - current newest version).

In IE11+Windows 7 and in Edge 17+Windows10 NVDA behaves correctly, so only Chrome/Firefox problem.

Other information about your system:

Nothing interesting.

Other questions

Does the issue still occur after restarting your PC?

Yes.

Have you tried any other versions of NVDA? If so, please report their behaviors.

Tried 2 (2019.1.1 and 2018.1.1), both have this problem.

[DrSooom]

CC: @jcsteh

[erikkroes]

To add to this, I've done some further testing. Adding an aria-label to the lion-button seems to circumvent the issue. This leads me to believe it might have to do with either the accessible name calculation, or possibly the semantic elements in the lion-button not getting ignored properly the way they should. I've also tried aria-hidden="true", role="presentation" and even display: none; on the native button but neither of those changed anything.

[Adriani90]

This is actually expected, since in browse mode NVDA fetches all parent object including their child object so that users can navigate the website using arrow keys. It's sort of an alternative to mouse navigation if you like. It seems it is possible to focus the child object with the mouse, so it is also focusable by NVDA's navigator when using object navigation. In turn, it is also focusable with the virtual cursor in browse mode. However, it is not focusable by system focus with the tab key, this is the difference. I vote for closing this issue. cc: @feerrenrut what do you think?

[Adriani90]

Actually one thing that could be investigated here is why NVDA speaks the button in brose mode when aria hidden or role:presentation is applied?

[Adriani90]

I think if child elements have a clickable property, NVDA detects them and displays them in its virtual document. That child button seems to have a clickable role. I wonder whether NVDA honors clickable over aria hidden or role presentation in the virtual document?

[Adriani90]

Closing as per my comments above, this issue is invalid and is expected behavior in browse mode. For the part with aria-hidden="true" or role:presentation, please open a new issue with a minimal test case.