Nicer image replacement for #nav-link mobile menu button

The large negative text-indent can sometimes cause horizontal scrollbars
in Right-to-Left languages, and, in some browsers, can also result in a
huge :focus outline being drawn around the button and off to the right
of the window.

Setting a zero height, padding top, and overflow:hidden is a simpler
way to achieve the same thing, and works regardless of text direction,
text length, or focus state.

2 files changed, 4 insertions, 2 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a400271a..642facde6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
         - Clearer relocation options while you’re reporting a problem #2238
         - Speed up fetching lists of bodies. #2248
         - Improve vertical alignment of navigation menu in Internet Explorer 9–11.
+        - Mobile menu button no longer uses -9999px text-indent hack.
     - Bugfixes:
         - Fix display of area/pins on body page when using Bing or TonerLite map.
         - Do not scan through all problems to show /_dev pages.
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 22fc70d0a..587ff59f3 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -525,11 +525,12 @@ ul.error {
 // this is a skip to nav for mobile users only
 #nav-link {
   width: 3em;
-  height: 3em;
+  height: 0;
+  padding-top: 3em;
+  overflow: hidden;
   background: transparent url(../fixmystreet/images/#{$menu-image}.png) center center no-repeat;
   background-image: inline-image("../fixmystreet/images/#{$menu-image}.svg"), none;
   background-size: 22px 18px;
-  text-indent: -999999px;
   #{$right}: 0;
 }