move footer icons to CSS bg images (mdn#3655)

* ↗ Fixes mdn#2900: move footer icons to CSS bg images * replace with utility class visually-hidden
peterbe · Jun 1, 2021 · aaaff99 · aaaff99
1 parent be3ae1e
commit aaaff99
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/client/src/ui/organisms/footer/index.scss b/client/src/ui/organisms/footer/index.scss
@@ -47,16 +47,31 @@
     ul {
       padding-inline-start: $base-spacing / 4;
     }
+  }
 
-    svg {
-      height: 18px;
-      vertical-align: sub;
-      width: 18px;
+  .social-icon::before {
+    background-size: 18px;
+    content: "";
+    display: inline-block;
+    filter: invert(1);
+    height: 18px;
+    vertical-align: sub;
+    width: 18px;
+  }
 
-      path {
-        fill: #fff;
-      }
-    }
+  .twitter::before {
+    background: transparent url("~@mdn/dinocons/social/twitter.svg") 0 0
+      no-repeat;
+  }
+
+  .github::before {
+    background: transparent url("~@mdn/dinocons/brands/github-mark-small.svg") 0
+      0 no-repeat;
+  }
+
+  .instagram::before {
+    background: transparent url("~@mdn/dinocons/social/instagram.svg") 0 0
+      no-repeat;
   }
 
   .footer-license {

diff --git a/client/src/ui/organisms/footer/index.tsx b/client/src/ui/organisms/footer/index.tsx
@@ -1,9 +1,4 @@
 import * as React from "react";
-
-import { ReactComponent as GithubIcon } from "@mdn/dinocons/brands/github-mark-small.svg";
-import { ReactComponent as TwitterIcon } from "@mdn/dinocons/social/twitter.svg";
-import { ReactComponent as InstagramIcon } from "@mdn/dinocons/social/instagram.svg";
-
 import { useLocale } from "../../../hooks";
 import { Logo } from "../../atoms/logo";
 import "./index.scss";
@@ -76,22 +71,22 @@ export function Footer() {
           <ul>
             <li>
               <a
+                className="social-icon twitter"
                 href="https://twitter.com/mozdevnet"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Twitter"
               >
-                <TwitterIcon />
+                <span className="visually-hidden">MDN on Twitter</span>
               </a>
             </li>
             <li>
               <a
+                className="social-icon github"
                 href="https://github.com/mdn/"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Github"
               >
-                <GithubIcon />
+                <span className="visually-hidden">MDN on Github</span>
               </a>
             </li>
           </ul>
@@ -102,22 +97,22 @@ export function Footer() {
           <ul>
             <li>
               <a
+                className="social-icon github"
                 href="https://twitter.com/mozilla"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Twitter"
               >
-                <TwitterIcon />
+                <span className="visually-hidden">Mozilla on Twitter</span>
               </a>
             </li>
             <li>
               <a
+                className="social-icon instagram"
                 href="https://www.instagram.com/mozillagram/"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Instagram"
               >
-                <InstagramIcon />
+                <span className="visually-hidden">Mozilla on Instagram</span>
               </a>
             </li>
           </ul>