Skip to content

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Apr 6, 2022

We use an empty space to prevent the select from collapsing when it doesn't have a value, but the approach we were using was being read out as a blank space by VoiceOver on Chrome. These changes switch to using visibility: hidden so that it isn't read out.

Fixes #24731.

We use an empty space to prevent the select from collapsing when it doesn't have a value, but the approach we were using was being read out as a blank space by VoiceOver on Chrome. These changes switch to using `visibility: hidden` so that it isn't read out.

Fixes angular#24731.
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Apr 6, 2022
@crisbeto crisbeto requested a review from zarend April 6, 2022 12:31
Copy link
Contributor

@zarend zarend left a comment

Choose a reason for hiding this comment

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

Interesting, I poked around on the docs site, and it looks like the accessibility tree was picking up " " as the value for the combobox. LGTM.

Screen Shot 2022-04-08 at 9 19 23 AM

@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Apr 8, 2022
@crisbeto
Copy link
Member Author

crisbeto commented Apr 8, 2022

This is actually the result of a similar bug fix for Safari from a year ago. It used to be a DOM node which was being read out by VoiceOver so the fix was to move it into a pseudo element which wasn't being read out by Safari, but is apparently there on Chrome.

@amysorto amysorto merged commit 333f3a4 into angular:master Apr 12, 2022
amysorto pushed a commit that referenced this pull request Apr 12, 2022
…4741)

We use an empty space to prevent the select from collapsing when it doesn't have a value, but the approach we were using was being read out as a blank space by VoiceOver on Chrome. These changes switch to using `visibility: hidden` so that it isn't read out.

Fixes #24731.

(cherry picked from commit 333f3a4)
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Apr 19, 2022
This PR contains the following updates:

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

---

### Release Notes

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

### [`v13.3.3`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1333-tweed-table-2022-04-13)

[Compare Source](angular/components@13.3.2...13.3.3)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [949e3c7fbc](angular/components@949e3c7) | fix | **a11y:** visually hidden element affecting scrolling ([#&#8203;24620](angular/components#24620)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [1e010a3624](angular/components@1e010a3) | fix | **checkbox:** add the boolean property coercion for checked input ([#&#8203;20645](angular/components#20645)) |
| [6c65b1d703](angular/components@6c65b1d) | fix | **chips:** prevent default behavior on remove button ([#&#8203;24722](angular/components#24722)) |
| [4501b2518d](angular/components@4501b25) | fix | **datepicker:** avoid rerender when min/maxDate changes to different time on the same day ([#&#8203;24434](angular/components#24434)) |
| [aae60833eb](angular/components@aae6083) | fix | **list:** wrong order of arguments when calling custom compareWith function ([#&#8203;24743](angular/components#24743)) |
| [68c5e870bd](angular/components@68c5e87) | fix | **select:** empty space read out by VoiceOver on Chrome ([#&#8203;24741](angular/components#24741)) |
| [0d1755d566](angular/components@0d1755d) | fix | **snack-bar:** update generic types for openFromComponent ([#&#8203;24634](angular/components#24634)) |
| [b83d225b33](angular/components@b83d225) | fix | **tabs:** wrong scroll distance if selected tab is removed ([#&#8203;24118](angular/components#24118)) |
| [ca30f426a9](angular/components@ca30f42) | perf | **progress-bar:** do not run change detection if there are no `animationEnd` listeners ([#&#8203;24673](angular/components#24673)) |

#### Special Thanks

Artur Androsovych, Georgian Stan, Klemen Oslaj, Kristiyan Kostadinov, Michael Doner, Pascal Weyrich, Paul Gschwendtner, RobStrader and Zach Arend

<!-- 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/1306
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>
@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 May 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(MatSelect): With VoiceOver + Chrome, "space" is announced when user navigates to mat-select if there is nothing yet selected from dropdown
3 participants