bug(MatTree): MatTree with interactive elements in each row is not keyboard accessible using a screenreader

[wildcardalice]

Reproduction

Use StackBlitz to reproduce your issue:

• Components: https://angular-p4bmmy-zxpv6j.stackblitz.io

Steps to reproduce:

1. Navigate to StackBlitz link above on a Windows machine
2. Use the keyboard to interact with the tree by tabbing to a node, pressing enter or space to expand it, then tabbing to a nested checkbox and selecting it. Do not use the mouse.
3. Enable JAWS or NVDA screen reader
4. Attempt to repeat step 2, using the keyboard to interact with the tree
5. Manually expand the tree using the mouse then tab through the elements until you get to a nested checkbox. Press space or enter to select the checkbox.

Expected Behavior

Enabling a screen reader should not change the behavior when interacting with the tree using a keyboard. With a screen reader enabled, I should be able to expand a row, tab to a nested checkbox, and select the checkbox using only the keyboard.

Actual Behavior

Hitting space or enter appears to send the click event to the first encountered input element, rather than the focused element. In the linked example, this can be either the textbox above the tree or an unfocused checkbox, depending on how you tab through the list. Either way, the focused element doesn't seem to receive the event.

Environment

JAWS v2021.2102.34 / NVDA v2020.4 (reproducible with both)
Windows 10 Enterprise Version
Chrome Version 89.0.4389.114

Also tested with Firefox Version 87.0, but was not able to reproduce on FF

[wildcardalice]

It appears this may have been fixed with NVDA, but it is still a reproducible issue when using JAWS

[radiance]

still reproducible with NVDA 2022.1 with Chrome 102.0.5005.63 on https://material.angular.io/components/tree/examples

one can click through all the elements to collapse and expand with keyboard until nvda is started, then you can only click first item.

[radiance]

Still reproducible with NVDA 2022.3.1 (as well as JAWS 2020) and Chrome Version 106.0.5249.119:
How to reproduce:

• Open https://material.angular.io/components/tree/examples
• Navigate to "Tree with partially loaded data"
• Navigate with Tab key on "Vegetables" and click on the ">" Toggle
• proceed with the tab key: nothing from the subtree is read out, also nothing is clickable in tree anymore

[radiance]

Still reproducible - both with JAWS 2020 and NVDA 2023.2.
Test also with Chrome in Version 116.0.5845.180 as well as Firefox 117.0 (64bit)

[radiance]

How to reproduce:

• Open a Screenreader (NVDA or JAWS)
• Open https://material.angular.io/components/tree/examples
• Navigate to "Tree with partially loaded data"
• Navigate with Tab key on "Vegetables" and click (Enter oder Space) on the ">" Toggle
• proceed with the tab key: nothing from the subtree is read out, also nothing is clickable with keyboard in tree anymore

[Sudha-Padmanabhan]

Is this issue fixed? Any help will be appreciated

[radiance]

Unfortunately not, in Material Angular v 16.2.7 still reproducible

[MikaStark]

Reproductible even without screen reader