From 825b27748444c592e4bf35bf4a26ba7bf3918299 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 6 Apr 2022 05:30:34 -0700 Subject: [PATCH] fix(material/select): empty space read out by VoiceOver on Chrome 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. --- src/material-experimental/mdc-select/select.scss | 7 ++++--- src/material/select/select.scss | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss index ec28ceed0594..367f4b5ab029 100644 --- a/src/material-experimental/mdc-select/select.scss +++ b/src/material-experimental/mdc-select/select.scss @@ -170,8 +170,9 @@ $scale: 0.75 !default; content: ' '; white-space: pre; width: 1px; - - // Prevents some browsers from rendering the element in high contrast mode. display: inline-block; - opacity: 0; + + // Prevents some browsers from rendering the element in high contrast mode. Use `visibility` + // instead of `opacity` since VoiceOver + Chrome still reads out the space with the latter. + visibility: hidden; } diff --git a/src/material/select/select.scss b/src/material/select/select.scss index b4e3c70c17df..f8e902fee6be 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -168,8 +168,9 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin); content: ' '; white-space: pre; width: 1px; - - // Prevents some browsers from rendering the element in high contrast mode. display: inline-block; - opacity: 0; + + // Prevents some browsers from rendering the element in high contrast mode. Use `visibility` + // instead of `opacity` since VoiceOver + Chrome still reads out the space with the latter. + visibility: hidden; }