bug(datepicker): It is announcing the date buttons type incorrectly as text elements #23476

zarend · 2021-08-27T18:16:42Z

Reproduction

Steps to reproduce:

Open the Datepicker Examples
Go to the "Basic datepicker" demo
Activate "Open calendar" button from any section, say, "Single date selection"
Focus on any date value

Expected Behavior

It should announce the date values as buttons/links so that screen readers can understand them to be clickable

Actual Behavior

It is announcing the date values as text elements using VoiceOver

Environment

OS| Browser | Screen reader
macOS Catalina | Google Chrome 92.0.4515.131 | VoiceOver

Additional Notes

This is copied from an internal bug report found during a11y testing.

zarend · 2021-08-27T18:16:57Z

from @jelbourn

This will need some investigation to confirm the expected behavior. Each date here is a gridcell, which are selectable per ARIA spec, so treating them as buttons may not be the right thing to do.

zarend · 2021-12-10T21:35:51Z

@jelbourn , from what I can tell, Voiceover does not announce that gridcell's are intractable when they have aria-selected="true" or aria-selected="false". To back that up, a11ysupport.io's page on aria-select gridcell has a minimal example of this.

If we were to work around that, putting a button inside each td seems like the most reasonable approach to me.

Changes the structure of date cells to use buttons nested inside a gridcell. Previously the `td` tag would handle interaction, but this was problematic because Voiceover (and potentially other screenreaders) were not announcing that the gridcells were clickable bug angular#23476. Changes the DOM structure to nest a button role element inside the `td` and have the button handle interaction instead of the `td` Previous dom: ``` <td role="gridcell" tabindex="0" (click)="foo" ... > <div ...>...</div> </td> ``` Updated dom: ``` <td ... > <div role="button" tabindex="0" (click)="foo"...>...</div> </td> ``` Work in progress. fixes angular#23476

Makes changes to the DOM structure of calendar cells. Previous, the DOM structure looksed like this Existing DOM structure of each calendar body cell ``` <td role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to use buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present to table navigation will continue to work, but the `td` elements are now buttons. The gridcell wrapper is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <div role="gridcell" style="display: contents;" > <td role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> <button> ``` I also tried another approach of keeping the `<td/>` as a `gridcell`, and rendering a button inside of it. This turned out to be much more complicated with getting the keyboard navigation and focusing logic to work correctly. It also make writing the tests more complicated because tests need to know if they should select the body cell or the button nested inside of it. This approach also avoids interferring with the styles. Fixes angular#23476

Makes changes to the DOM structure of calendar cells. Previous, the DOM structure looksed like this Existing DOM structure of each calendar body cell ``` <td role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to use buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present to table navigation will continue to work, but the `td` elements are now buttons. The gridcell wrapper is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <div role="gridcell" style="display: contents;" > <td role="button" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> <button> ``` I also tried another approach of keeping the `<td/>` as a `gridcell`, and rendering a button inside of it. This turned out to be much more complicated with getting the keyboard navigation and focusing logic to work correctly. It also make writing the tests more complicated because tests need to know if they should select the body cell or the button nested inside of it. This approach also avoids interferring with the styles. Fixes angular#23476

Makes changes to the DOM structure of calendar cells. Previously, the DOM structure looksed like this ```  <td role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" style="display: contents;" > <div role="button" aria-disabled="false" aria-current="date" aria-selected="true"  >  </div> </td> ``` Fixes angular#23476

Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ```  <td role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" style="display: contents;" > <div role="button" aria-disabled="false" aria-current="date" aria-selected="true"  >  </div> </td> ``` Fixes angular#23476

Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ```  <td role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" > <button aria-disabled="false" aria-current="date" aria-selected="true"  >  </button> </td> ``` Fixes angular#23476

Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ```  <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" class="mat-calendar-body-cell-container" > <button class="mat-calendar-body-cell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </button> </td> ``` Fixes angular#23476

Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ```  <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" class="mat-calendar-body-cell-container" > <button class="mat-calendar-body-cell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </button> </td> ``` Fixes angular#23476, angular#24086

Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ```  <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" class="mat-calendar-body-cell-container" > <button class="mat-calendar-body-cell" aria-disabled="false" aria-current="date" aria-pressed="true"  >  </button> </td> ``` Fixes angular#23476, angular#24086

Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ```  <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly #23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" class="mat-calendar-body-cell-container" > <button class="mat-calendar-body-cell" aria-disabled="false" aria-current="date" aria-pressed="true"  >  </button> </td> ``` Fixes #23476, #24086 (cherry picked from commit 43db844)

Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looked like this: ```  <td class="sbb-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular/components#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" class="sbb-calendar-body-cell-container" > <button class="sbb-calendar-body-cell" aria-disabled="false" aria-current="date" aria-pressed="true"  >  </button> </td> ``` Signed-off-by: Jeremias Peier <jeremias.peier@sbb.ch>

Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looked like this: ```  <td class="sbb-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular/components#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" class="sbb-calendar-body-cell-container" > <button class="sbb-calendar-body-cell" aria-disabled="false" aria-current="date" aria-pressed="true"  >  </button> </td> ```

angular-automatic-lock-bot · 2022-02-25T00:03:28Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

…4171) Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ```  <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true"  >  </> ``` Using the `gridcell` role allows screenreaders to use table specific navigation and some screenreaders would announce that the cells are interactible because of the presence of `aria-selected`. However, some screenreaders did not announce the cells as interactable and treated it the same as a cell in a static table (e.g. VoiceOver announces element type incorrectly angular#23476). This changes the DOM structure to nest buttons inside of a gridcell to make it more explicit that the table cells can be interacted with and are not static content. The gridcell role is still present, so table navigation will continue to work, but the interaction is done with buttons nested inside the `td` elements. The `td` element is only for adding information to the a11y tree and not used for visual purposes. Updated DOM structure: ``` <td role="gridcell" class="mat-calendar-body-cell-container" > <button class="mat-calendar-body-cell" aria-disabled="false" aria-current="date" aria-pressed="true"  >  </button> </td> ``` Fixes angular#23476, angular#24086

zarend added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) area: material/datepicker labels Aug 27, 2021

This was referenced Dec 14, 2021

fix(material/datepicker): change calendar cells to buttons #24098

Closed

fix(material/datepicker): change calendar cell bodies to buttons (nesting buttons inside td approach) #24099

Closed

zarend mentioned this issue Dec 16, 2021

fix(material/datepicker): change calendar cells to buttons #24107

Closed

mmalerba closed this as completed in 43db844 Jan 25, 2022

jeripeierSBB mentioned this issue Feb 3, 2022

fix(angular/datepicker): change calendar cells to buttons sbb-design-systems/sbb-angular#1105

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug(datepicker): It is announcing the date buttons type incorrectly as text elements #23476

bug(datepicker): It is announcing the date buttons type incorrectly as text elements #23476

zarend commented Aug 27, 2021 •

edited

Loading

zarend commented Aug 27, 2021

zarend commented Dec 10, 2021

angular-automatic-lock-bot bot commented Feb 25, 2022

bug(datepicker): It is announcing the date buttons type incorrectly as text elements #23476

bug(datepicker): It is announcing the date buttons type incorrectly as text elements #23476

Comments

zarend commented Aug 27, 2021 • edited Loading

Reproduction

Expected Behavior

Actual Behavior

Environment

Additional Notes

zarend commented Aug 27, 2021

zarend commented Dec 10, 2021

angular-automatic-lock-bot bot commented Feb 25, 2022

zarend commented Aug 27, 2021 •

edited

Loading