bug(datepicker): Missing to announce the previous selection state on date, month and year #24086
Labels
Comments
zarend
added
needs triage
zarend
added a commit
to zarend/components
that referenced
this issue
Jan 14, 2022
Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ``` <!-- Existing DOM structure of each calendar body cell --> <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true" <!-- ... --> > <!-- additional details ommited --> </> ``` 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" <!-- ... --> > <!-- additional details ommited --> </button> </td> ``` Fixes angular#23476, angular#24086
zarend
added a commit
to zarend/components
that referenced
this issue
Jan 14, 2022
Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ``` <!-- Existing DOM structure of each calendar body cell --> <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true" <!-- ... --> > <!-- additional details ommited --> </> ``` 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" <!-- ... --> > <!-- additional details ommited --> </button> </td> ``` Fixes angular#23476, angular#24086
zarend
added a commit
to zarend/components
that referenced
this issue
Jan 14, 2022
Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ``` <!-- Existing DOM structure of each calendar body cell --> <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true" <!-- ... --> > <!-- additional details ommited --> </> ``` 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" <!-- ... --> > <!-- additional details ommited --> </button> </td> ``` Fixes angular#23476, angular#24086
zarend
added a commit
to zarend/components
that referenced
this issue
Jan 24, 2022
Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ``` <!-- Existing DOM structure of each calendar body cell --> <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true" <!-- ... --> > <!-- additional details ommited --> </> ``` 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" <!-- ... --> > <!-- additional details ommited --> </button> </td> ``` Fixes angular#23476, angular#24086
mmalerba
pushed a commit
that referenced
this issue
Jan 25, 2022
Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ``` <!-- Existing DOM structure of each calendar body cell --> <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true" <!-- ... --> > <!-- additional details ommited --> </> ``` 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" <!-- ... --> > <!-- additional details ommited --> </button> </td> ``` Fixes #23476, #24086
mmalerba
pushed a commit
that referenced
this issue
Jan 25, 2022
Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ``` <!-- Existing DOM structure of each calendar body cell --> <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true" <!-- ... --> > <!-- additional details ommited --> </> ``` 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" <!-- ... --> > <!-- additional details ommited --> </button> </td> ``` Fixes #23476, #24086 (cherry picked from commit 43db844)
mmalerba
pushed a commit
that referenced
this issue
Jan 25, 2022
Makes changes to the DOM structure of calendar cells for better screen reader experience. Previously, the DOM structure looksed like this: ``` <!-- Existing DOM structure of each calendar body cell --> <td class="mat-calendar-body-cell" role="gridcell" aria-disabled="false" aria-current="date" aria-selected="true" <!-- ... --> > <!-- additional details ommited --> </> ``` 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" <!-- ... --> > <!-- additional details ommited --> </button> </td> ``` Fixes #23476, #24086 (cherry picked from commit 43db844)
|
This was fixed by #24171 |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Reproduction
Steps to reproduce:
Expected Behavior
It should announce the previously selected date as "selected" when focus on it
Actual Behavior
It is not announcing the previously selected value state by the screen reader
Environment
OS| Browser | Screen reader
ChromeOS | Google Chrome 91.0.4472.167 | ChromeVox
macOS Catalina | Google Chrome 92.0.4515.131 | VoiceOver
Additional Notes
This is copied from an internal bug report found during a11y testing.
The text was updated successfully, but these errors were encountered: