X Tutup
The Wayback Machine - https://web.archive.org/web/20220321101726/https://github.com/angular/components/pull/24121
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

fix(material/dialog): don't wait for animation before moving focus #24121

Merged
merged 2 commits into from Mar 7, 2022

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Dec 20, 2021

For a long time we used to move focus into the dialog after the opening animation was finished, because it allowed for the content to settle in case something like an autocomplete needed to open. This approach has caused us accessibility issues in the past, because we've had to find ways to prevent the user from interacting with content behind the dialog while the opening animation is running.

Initially we used to move focus to the dialog container before transferring it into the dialog, but that ended up interrupting the screen reader. In a later change we started returning the previous dialog ref if the same kind of dialog is opened while the animation is still running. The problem with this approach is that it doesn't allow for multiple dialog to be opened quickly (see #24037).

These changes aim to address the root cause by moving focus immediately after the dialog content is attached. If this causes regressions with autocompletes inside dialogs, we now have APIs that allow users to customize the focus behavior.

Fixes #24037.

@crisbeto crisbeto requested review from devversion and as code owners Dec 20, 2021
@josephperrott josephperrott removed the request for review from Dec 20, 2021
Copy link
Member

@Splaktar Splaktar left a comment

I want to run this locally with a screen reader to test it out, but I'll have to find another time to do that on another laptop since I can't run the dev-app on my primary machine (m1Max mac) due to #23983.

Which screen reader, browser, OS combinations did you test this against?

tools/public_api_guard/material/dialog.md Show resolved Hide resolved
@crisbeto
Copy link
Member Author

@crisbeto crisbeto commented Jan 6, 2022

@Splaktar the bot should post a link to the deployed dev app soon.

@github-actions
Copy link

@github-actions github-actions bot commented Jan 6, 2022

Copy link
Member

@jelbourn jelbourn left a comment

LGTM. I tried this in VoiceOver and NVDA

@Splaktar
Copy link
Member

@Splaktar Splaktar commented Jan 13, 2022

I'll test in ChromeVox since that was what the original a11y fix was meant to address in #21840.

Copy link
Member

@Splaktar Splaktar left a comment

Verified in ChromeVox on ChromeOS 96.0.4664.111.

This LGTM, thank you!

@zarend
Copy link
Collaborator

@zarend zarend commented Feb 9, 2022

This caused 105 failures on an internal test run from 5 days ago. I looked at a sample of 12 of them and they were all screenshot diff changes where a different element was focused after opening a dialog. Most of the changes looked reasonable to me, but there was one case that was questionable. There's some example of highlighting the text of an input field on opening a dialog. With this change, it no longer highlights that text.

For a long time we used to move focus into the dialog after the opening animation was finished, because it allowed for the content to settle in case something like an autocomplete needed to open. This approach has caused us accessibility issues in the past, because we've had to find ways to prevent the user from interacting with content behind the dialog while the opening animation is running.

Initially we used to move focus to the dialog container before transferring it into the dialog, but that ended up interrupting the screen reader. In a later change we started returning the previous dialog ref if the same kind of dialog is opened while the animation is still running. The problem with this approach is that it doesn't allow for multiple dialog to be opened quickly (see angular#24037).

These changes aim to address the root cause by moving focus immediately after the dialog content is attached. If this causes regressions with autocompletes inside dialogs, we now have APIs that allow users to customize the focus behavior.

Fixes angular#24037.
@crisbeto
Copy link
Member Author

@crisbeto crisbeto commented Mar 4, 2022

Given that a lot of folks seem to be blocked by this externally and that the current behavior is difficult to land internally, I've pushed an extra commit to make the instant focus opt-in. Hopefully this makes the change easier to land.

@crisbeto crisbeto merged commit 92863cc into angular:master Mar 7, 2022
17 checks passed
crisbeto added a commit that referenced this issue Mar 7, 2022
…24121)

* fix(material/dialog): don't wait for animation before moving focus

For a long time we used to move focus into the dialog after the opening animation was finished, because it allowed for the content to settle in case something like an autocomplete needed to open. This approach has caused us accessibility issues in the past, because we've had to find ways to prevent the user from interacting with content behind the dialog while the opening animation is running.

Initially we used to move focus to the dialog container before transferring it into the dialog, but that ended up interrupting the screen reader. In a later change we started returning the previous dialog ref if the same kind of dialog is opened while the animation is still running. The problem with this approach is that it doesn't allow for multiple dialog to be opened quickly (see #24037).

These changes aim to address the root cause by moving focus immediately after the dialog content is attached. If this causes regressions with autocompletes inside dialogs, we now have APIs that allow users to customize the focus behavior.

Fixes #24037.

* fixup! fix(material/dialog): don't wait for animation before moving focus

(cherry picked from commit 92863cc)
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this issue Mar 18, 2022
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`13.2.5` -> `13.2.6`](https://renovatebot.com/diffs/npm/@angular%2fcdk/13.2.5/13.2.6) |
| [@angular/material](https://github.com/angular/components) | dependencies | patch | [`13.2.5` -> `13.2.6`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/13.2.5/13.2.6) |

---

### Release Notes

<details>
<summary>angular/components</summary>

### [`v13.2.6`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1326-suede-spaghetti-2022-03-09)

[Compare Source](angular/components@13.2.5...13.2.6)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [39929a815d](angular/components@39929a8) | fix | **overlay:** backdrop timeouts not being cleared in some cases ([#&#8203;23972](angular/components#23972)) |
| [2f2b0c7cf4](angular/components@2f2b0c7) | fix | **testing:** dispatch mouseover and mouseout events in UnitTestElement ([#&#8203;24490](angular/components#24490)) |
| [edca54f2d0](angular/components@edca54f) | fix | **testing:** require at least one argument for locator functions ([#&#8203;23619](angular/components#23619)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [c4993ac171](angular/components@c4993ac) | fix | **button:** avoid setting a tabindex on all link buttons ([#&#8203;22901](angular/components#22901)) |
| [c47d30e0e5](angular/components@c47d30e) | fix | **dialog:** don't wait for animation before moving focus ([#&#8203;24121](angular/components#24121)) |
| [70b8248568](angular/components@70b8248) | fix | **expansion:** able to tab into descendants with visibility while closed ([#&#8203;24045](angular/components#24045)) |
| [d22d73ab8d](angular/components@d22d73a) | fix | **select:** disabled state out of sync when swapping form group with a disabled one ([#&#8203;17872](angular/components#17872)) |
| [911d6b71d4](angular/components@911d6b7) | fix | **slide-toggle:** clear name from host node ([#&#8203;15505](angular/components#15505)) |
| [4b5363d160](angular/components@4b5363d) | fix | **tooltip:** decouple removal logic from change detection ([#&#8203;19432](angular/components#19432)) |

##### material-experimental

| Commit | Type | Description |
| -- | -- | -- |
| [8414646d79](angular/components@8414646) | fix | **mdc-card:** remove extra margin if header doesn't have an avatar ([#&#8203;19072](angular/components#19072)) |
| [f66486dc5b](angular/components@f66486d) | fix | **mdc-slider:** fix a few null pointer exceptions ([#&#8203;23659](angular/components#23659)) |

##### multiple

| Commit | Type | Description |
| -- | -- | -- |
| [6ee0089ce6](angular/components@6ee0089) | fix | don't block child component animations on open ([#&#8203;24529](angular/components#24529)) |

#### Special Thanks

Andrew Seguin, Jeri Peier, Kristiyan Kostadinov and Paul Gschwendtner

<!-- CHANGELOG SPLIT MARKER -->

</details>

---

### Configuration

📅 **Schedule**: At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

 **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).

Co-authored-by: cabr2-bot <cabr2.help@gmail.com>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1214
Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org>
Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

5 participants
X Tutup