Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(dialog): Chromevox doesn't announce dialog role #21840

Closed
calebegg opened this issue Feb 8, 2021 · 4 comments · Fixed by #23085
Closed

bug(dialog): Chromevox doesn't announce dialog role #21840

calebegg opened this issue Feb 8, 2021 · 4 comments · Fixed by #23085
Assignees
Labels
Accessibility This issue is related to accessibility (a11y) area: material/dialog G This is is related to a Google internal issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@calebegg
Copy link
Member

calebegg commented Feb 8, 2021

Compare https://material.angular.io/components/dialog/overview vs https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

The former doesn't say it's a dialog when you enter it. The latter does.

@calebegg calebegg added the needs triage This issue needs to be triaged by the team label Feb 8, 2021
@crisbeto
Copy link
Member

crisbeto commented Feb 8, 2021

I spent a bit of time looking into it and the problem seems to be due to the fact that we move focus to the dialog container until the content is rendered and we can move it to the first focusable element. The reason we move focus to the dialog is so that the user doesn't accidentally open multiple dialogs while the current dialog is animating. An alternate approach could be to blur the focused element while the dialog is animating, but that might not be ideal for accessibility either.

@crisbeto crisbeto added Accessibility This issue is related to accessibility (a11y) area: material/dialog G This is is related to a Google internal issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Feb 8, 2021
@jelbourn
Copy link
Member

Possibly the same thing as #10591

This came up during our most recent round of testing. It looks like it only occurs when

  • The dialog is not configured to focus the dialog element on open
  • Animations are enabled

@Splaktar Splaktar self-assigned this Jun 29, 2021
@Splaktar
Copy link
Member

I can reproduce this with the MDC-dialog in the dev-app. When the dialog is opened, either the focused input is read ("How much? Edit text") or the focused button is read ("Close Button Press Search plus Space to activate"). In both cases, no indication is given that a modal dialog has been opened and that focus has been moved inside of that modal dialog.

If you press Search+Up Arrow enough times, you will eventually get to the dialog and get "Neptune Dialog" read out. So it's there, but as Kristiyan mentioned, the rapid swap of the focus to the dialog container and then to the first focusable element causes the screen reader to bail out and announce nothing.

Splaktar added a commit to DevIntent/components that referenced this issue Jun 29, 2021
…when opened

- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jun 30, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jun 30, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jun 30, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jun 30, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open
- update material/dialog API golden file

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jul 19, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open
- update material/dialog API golden file

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jul 22, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open
- update material/dialog API golden file

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jul 22, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- block the same dialog from opening again for 300ms to avoid multiple of the same dialog
  opening before animations complete and the focus is moved off of the trigger
- update tests to use different dialog components when they need to open multiple dialogs

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jul 22, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- block the same dialog from opening again for 300ms to avoid multiple of the same dialog
  opening before animations complete and the focus is moved off of the trigger
- update tests to use different dialog components when they need to open multiple dialogs

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jul 27, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update tests to use different dialog components when they need to open multiple
  dialogs quickly

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jul 27, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update tests to use different dialog components when they need to open multiple
  dialogs quickly

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Jul 27, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update tests to use different dialog components when they need to open multiple
  dialogs quickly

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 2, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open
- update material/dialog API golden file

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 2, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update tests to use different dialog components when they need to open multiple
  dialogs quickly

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 2, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update material/dialog API golden file

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 2, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- add flushes to mdc-dialog tests to allow dialogs to animate open
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update material/dialog API golden file

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 2, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update material/dialog API golden file

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 2, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update tests to use different dialog components when they need to open multiple
  dialogs quickly

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 6, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update tests to use different dialog components when they need to open multiple
  dialogs quickly

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 6, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update material/dialog API golden file

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 6, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update tests to use different dialog components when they need to open multiple
  dialogs quickly

Fixes angular#21840
Splaktar added a commit to DevIntent/components that referenced this issue Aug 9, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update material/dialog API golden file

Fixes angular#21840
zarend pushed a commit that referenced this issue Aug 13, 2021
- notify screen reader users that they have entered a dialog
- previously only the focused element would be read
  i.e. "Close Button Press Search plus Space to activate"
- now the screen reader user gets the normal dialog behavior, which is to
  read the dialog title, role, content, and then tell the user about the
  focused element
  - this matches the guidance here:
    https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
- Avoid opening multiple of the same dialog before animations complete by returning
  the previous `MatDialogRef`
- update material/dialog API golden file

Fixes #21840
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) area: material/dialog G This is is related to a Google internal issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
4 participants