Merge pull request #1109 from alphagov/update-visually-hidden-text-class

Update visually hidden class to fix ordering issue in VoiceOver OSX
alphagov · Jan 9, 2019 · 65372fb · 65372fb
2 parents ac5c683 + 376bf53
commit 65372fb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,14 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Update visually hidden class to fix ordering issue in VoiceOver OSX
+
+  We have fixed an issue in VoiceOver OSX where using the `govuk-visually-hidden` class in links would result in the text being announced out of order.
+
+  We also now recommend to use aria-label or aria-labelledby where appropriate.
+
+  ([PR #1109](https://github.com/alphagov/govuk-frontend/pull/1109))
+
 ## 2.4.1 (fix release)
 
 🔧 Fixes:

diff --git a/src/helpers/_visually-hidden.scss b/src/helpers/_visually-hidden.scss
@@ -18,7 +18,8 @@
 
   width: 1px iff($important, !important);
   height: 1px iff($important, !important);
-  margin: -1px iff($important, !important);
+  // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
+  margin: 0 iff($important, !important);
   padding: 0 iff($important, !important);
 
   overflow: hidden iff($important, !important);
@@ -49,7 +50,8 @@
 
   width: 1px iff($important, !important);
   height: 1px iff($important, !important);
-  margin: -1px iff($important, !important);
+  // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
+  margin: 0 iff($important, !important);
 
   overflow: hidden iff($important, !important);
   clip: rect(0 0 0 0) iff($important, !important);