Skip to content

Datepicker focus trap #24300

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

Merged
merged 1 commit into from
Feb 7, 2022
Merged

Datepicker focus trap #24300

merged 1 commit into from
Feb 7, 2022

Conversation

zarend
Copy link
Contributor

@zarend zarend commented Jan 28, 2022

see commit message for description

@zarend zarend force-pushed the datepicker-focus-trap branch 3 times, most recently from 8ab8bcb to 8d27a72 Compare January 29, 2022 00:44
@zarend zarend marked this pull request as ready for review January 29, 2022 00:44
@zarend zarend requested a review from mmalerba as a code owner January 29, 2022 00:44
@zarend zarend requested a review from jelbourn January 29, 2022 00:45
@zarend zarend added Accessibility This issue is related to accessibility (a11y) area: material/datepicker dev-app preview When applied, previews of the dev-app are deployed to Firebase target: patch This PR is targeted for the next patch release labels Jan 29, 2022
…and ChromeVox

Fixes focus trapping on the datepicker dialog by putting `role="dialog"` `aria-modal="true"` and `cdkTrapFocus` all on the same element. This aligns the datepicker with how MatDialog does focus trapping.

Without having them all on the same element, users could exit out of the focus trapping using screenreader specific navigation with VoiceOver and ChromeVox.

Fixes angular#2345
@zarend zarend force-pushed the datepicker-focus-trap branch from 8d27a72 to 7433b7f Compare January 29, 2022 00:50
@zarend zarend requested a review from a team as a code owner January 29, 2022 00:50
@github-actions
Copy link

github-actions bot commented Jan 29, 2022

Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm aside from one minor comment

@josephperrott josephperrott removed the request for review from a team February 7, 2022 15:46
@zarend zarend added the action: merge The PR is ready for merge by the caretaker label Feb 7, 2022
@zarend zarend merged commit 1c91731 into angular:master Feb 7, 2022
zarend added a commit that referenced this pull request Feb 7, 2022
…and ChromeVox (#24300)

Fixes focus trapping on the datepicker dialog by putting `role="dialog"` `aria-modal="true"` and `cdkTrapFocus` all on the same element. This aligns the datepicker with how MatDialog does focus trapping.

Without having them all on the same element, users could exit out of the focus trapping using screenreader specific navigation with VoiceOver and ChromeVox.

Fixes #2345

(cherry picked from commit 1c91731)
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Feb 15, 2022
This PR contains the following updates:

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

---

### Release Notes

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

### [`v13.2.2`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1322-enamel-eagle-2022-02-09)

[Compare Source](angular/components@13.2.1...13.2.2)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [4b6e83274](angular/components@4b6e832) | fix | **scrolling:** fix scrolling in appendOnly mode ([#&#8203;24153](angular/components#24153)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [f5199eeeb](angular/components@f5199ee) | fix | **datepicker:** fix improper focus trapping with VoiceOver and ChromeVox ([#&#8203;24300](angular/components#24300)) |
| [a72bcbe50](angular/components@a72bcbe) | fix | **datepicker:** remove abbr from day of week header ([#&#8203;24106](angular/components#24106)) |

##### material-experimental

| Commit | Type | Description |
| -- | -- | -- |
| [3bbcb444f](angular/components@3bbcb44) | fix | **mdc-checkbox:** add missing classes for checked ([#&#8203;24350](angular/components#24350)) |

##### material-experiental

| Commit | Type | Description |
| -- | -- | -- |
| [70bec6054](angular/components@70bec60) | fix | **mdc-list:** update material-components-web to pick up multi-select list keyboard support ([#&#8203;24354](angular/components#24354)) |

#### Special Thanks

Alan Agius, Artur Androsovych, Chabbey François, Joey Perrott, Kristiyan Kostadinov, Miles Malerba, Paul Gschwendtner, Zach Arend and renovate\[bot]

<!-- 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 <[email protected]>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1161
Reviewed-by: Epsilon_02 <[email protected]>
Co-authored-by: Calciumdibromid Bot <[email protected]>
Co-committed-by: Calciumdibromid Bot <[email protected]>
amysorto pushed a commit to amysorto/components that referenced this pull request Feb 15, 2022
…and ChromeVox (angular#24300)

Fixes focus trapping on the datepicker dialog by putting `role="dialog"` `aria-modal="true"` and `cdkTrapFocus` all on the same element. This aligns the datepicker with how MatDialog does focus trapping.

Without having them all on the same element, users could exit out of the focus trapping using screenreader specific navigation with VoiceOver and ChromeVox.

Fixes angular#2345
@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 Mar 10, 2022
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) action: merge The PR is ready for merge by the caretaker area: material/datepicker dev-app preview When applied, previews of the dev-app are deployed to Firebase target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants