The exclusive selection button toggle example does not convey correct semantics

[mfairchild365]

What is the expected behavior?

The exclusive button toggle example should convey to screen reader users that:

1. there are many buttons in the same group
2. only one option can be selected at a time

What is the current behavior?

The exclusive button toggle example does not convey to screen reader users that

1. there are many buttons in the same group
2. only one option can be selected at a time

What are the steps to reproduce?

1. Using either of the following screen readers
   • NVDA 2018.4.1 + FireFox 64
   • VoiceOver for IOS (12.1.3) + Safari
2. Open the exclusive selection button example
3. Press tab until you reach one of the toggle buttons
4. Observe that the button does not convey a group label or the fact that only one option can be selected at a time.

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

• Angular Material Example 7.2.2 located at https://material.angular.io/components/
• NVDA 2018.4.1 + FireFox 64
• VoiceOver for IOS (12.1.3) + Safari (12.1.3)

Is there anything else we should know?

This is a fairly complex component, so it is important to address the various possible configurations. The solution to this issue depends on the component's configuration.

single mat-button-toggle

This is a single on/off toggle button. This configuration appears to surface the correct semantics.

See the W3C ARIA authoring practices information on toggle buttons for details on suggested toggle button roles, states, properties, and keyboard interaction.

exclusive selection for mat-button-toggle-group

From the documentation:

By default, mat-button-toggle-group acts like a radio-button group - only one item can be selected.

Because this configuration functions as a radio button group, radio button group semantics must be surfaced. Without these semantics, screen reader users may not know that:

1. The radio buttons are part of a group
2. The group label for the radio buttons
3. That only one radio button in the group can be selected at a time

See the W3C ARIA authoring practices information on radio groups for details on suggested toggle button roles, states, properties, and keyboard interaction.

multiple selection for mat-button-toggle-group

From the documentation:

Adding the multiple attribute allows multiple items to be selected (checkbox behavior)

Because this configuration functions as a checkbox group, checkbox group semantics must be surfaced. Without these semantics, screen reader users may not know that:

1. The checkboxes are part of a group
2. The group label for the checkboxes
3. That many checkboxes in the group can be checked at a time

See the W3C ARIA authoring practices information on checkboxes for details on suggested toggle button roles, states, properties, and keyboard interaction.

[zarend]

#28548 in progress which addresses this issue report