From c480bf07a019af913677c29bf1199f1ebbe6ec9f Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Fri, 12 Nov 2021 16:23:54 -0500 Subject: [PATCH 1/4] added left position 0 to visually hidden --- UNRELEASED.md | 2 ++ src/styles/shared/_accessibility.scss | 1 + 2 files changed, 3 insertions(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 7eef3841d6e..4bccc576572 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -8,6 +8,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Bug fixes +- Fixed `VisuallyHidden` to be positioned in the top left corner of its parent to avoid horizontal scroll issues ([#4641](https://github.com/Shopify/polaris-react/pull/4641)). + ### Documentation ### Development workflow diff --git a/src/styles/shared/_accessibility.scss b/src/styles/shared/_accessibility.scss index 27d9d844e58..50cdc796979 100644 --- a/src/styles/shared/_accessibility.scss +++ b/src/styles/shared/_accessibility.scss @@ -6,6 +6,7 @@ // stylelint-disable declaration-no-important position: absolute !important; top: 0; + left: 0; clip: rect(1px, 1px, 1px, 1px) !important; overflow: hidden !important; height: 1px !important; From dab49645142c09750d5e06a873f132755fc60a14 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Fri, 12 Nov 2021 17:55:14 -0500 Subject: [PATCH 2/4] modernized visually hidden styles --- src/styles/shared/_accessibility.scss | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/styles/shared/_accessibility.scss b/src/styles/shared/_accessibility.scss index 50cdc796979..3ca95d40f73 100644 --- a/src/styles/shared/_accessibility.scss +++ b/src/styles/shared/_accessibility.scss @@ -2,16 +2,13 @@ /// accessibility tools. @mixin visually-hidden { - // Need to make sure we override any existing styles. - // stylelint-disable declaration-no-important - position: absolute !important; - top: 0; - left: 0; - clip: rect(1px, 1px, 1px, 1px) !important; - overflow: hidden !important; - height: 1px !important; - width: 1px !important; - padding: 0 !important; - border: 0 !important; - // stylelint-enable declaration-no-important + clip-path: inset(50%); + height: 1px; + width: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + margin: 0; + padding: 0; + border: 0; } From 35ff532e562f886dc0d0575203b64374939594b1 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Mon, 15 Nov 2021 08:59:43 -0500 Subject: [PATCH 3/4] used gov uk design system styles for visually hidden since they have already been tested --- UNRELEASED.md | 4 ++-- src/styles/shared/_accessibility.scss | 12 +++++++----- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 4bccc576572..22fff3aece7 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -6,9 +6,9 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Enhancements -### Bug fixes +- Update `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641)). -- Fixed `VisuallyHidden` to be positioned in the top left corner of its parent to avoid horizontal scroll issues ([#4641](https://github.com/Shopify/polaris-react/pull/4641)). +### Bug fixes ### Documentation diff --git a/src/styles/shared/_accessibility.scss b/src/styles/shared/_accessibility.scss index 3ca95d40f73..3867409464e 100644 --- a/src/styles/shared/_accessibility.scss +++ b/src/styles/shared/_accessibility.scss @@ -1,14 +1,16 @@ /// Used to hide an element visually, but keeping it accessible for /// accessibility tools. +/// styles referenced from GOV.UK design system +/// https://github.com/h5bp/main.css/issues/12#issuecomment-451965809 @mixin visually-hidden { - clip-path: inset(50%); - height: 1px; - width: 1px; - overflow: hidden; position: absolute; - white-space: nowrap; + width: 1px; + height: 1px; margin: 0; padding: 0; + overflow: hidden; + clip-path: inset(50%); border: 0; + white-space: nowrap; } From b68bc47b63afc8f0718d4a1c52c21a976ff4b6d3 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Mon, 15 Nov 2021 10:48:25 -0500 Subject: [PATCH 4/4] added back in importants --- src/styles/shared/_accessibility.scss | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/styles/shared/_accessibility.scss b/src/styles/shared/_accessibility.scss index 3867409464e..d5f84c3baae 100644 --- a/src/styles/shared/_accessibility.scss +++ b/src/styles/shared/_accessibility.scss @@ -4,13 +4,16 @@ /// styles referenced from GOV.UK design system /// https://github.com/h5bp/main.css/issues/12#issuecomment-451965809 @mixin visually-hidden { - position: absolute; - width: 1px; - height: 1px; - margin: 0; - padding: 0; - overflow: hidden; - clip-path: inset(50%); - border: 0; - white-space: nowrap; + // Need to make sure we override any existing styles. + // stylelint-disable declaration-no-important + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + clip-path: inset(50%) !important; + border: 0 !important; + white-space: nowrap !important; + // stylelint-enable declaration-no-important }