Two navigation stops for mdc radio buttons with TalkBack

[tristanhale]

Bug, feature request, or proposal:

When using Android TalkBack, the system highlights interactive elements with a green border when they are focused. On some components, such as mat-select, are highlighted as expected. However, mat-checkbox and mat-radio-button seem to be suppressing the highlighting.
It may be due to "-webkit-tap-highlight-color: transparent", introduced in #11349.

What is the expected behavior?

mat-checkbox and mat-radio-button should be highlighted when they are focused by the screen reader.

What is the current behavior?

mat-checkbox and mat-radio-button are not highlighted when they are focused by the screen reader.

What are the steps to reproduce?

Go to https://material.angular.io/components/checkbox/overview on an Android phone with TalkBack enabled. Swipe horizontally until the attention is focused on the checkbox. You will see hear that that checkbox is focused and can be interacted with, but it is not highlighted on the screen.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[glushkova91]

The same problem for VoiceOver screen-reader

[stevenyxu]

I could repro this with my Android + TB and I imagine the same is true for iOS + VO. The issue is twofold. First is that Angular Material relies on focus events to style their components and this doesn't happen on mobile SRs or on JAWS/NVDA on some configurations because those SRs don't trigger focus events on virtual/linear navigation. Second is that SRs try to draw bounding boxes on the element that received focus, but the checkbox in mat-checkbox has a visually hidden one without proper bounding box so the SR doesn't know where to draw it. You can compare how well the green box on Android+TB works on native checkbox vs. mat-checkbox.

[jelbourn]

@crisbeto we should ensure that this is fixed in the MDC versions at least; I suspect it will be too breaking to land in the existing implementations

[jelbourn]

I just tested the MDC-based checkbox and radio on TalkBack. The checkbox works great. The radio button now shows the focus outline all the time, but it has two separate stops when navigating. Updating this issue to reflect the new state.