a11y fixes

bagseye · Aug 15, 2020 · 94f0d74 · 94f0d74
1 parent b2da6aa
commit 94f0d74
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -148,6 +148,7 @@ export default ({ children }) => {
  return (
  <li>
  <a key={index} href={item.url}>
+ <span className="sr-only">{item.name}</span>
  {item.icon}
  </a>
  </li>

diff --git a/src/components/header.js b/src/components/header.js
@@ -154,7 +154,7 @@ export default ({ children }) => {
  <header className="header-cont">
  <div className="logo-cont">
  <Link to="/">
- <img src={Logo} />
+ <img src={Logo} alt="Bonneville logo" />
  </Link>
  </div>
  <button className="btn" onClick={() => menuChange(!menuStatus)}>

diff --git a/src/constants/social-icons.js b/src/constants/social-icons.js
@@ -6,13 +6,16 @@ export default [
  {
  icon: <FaLinkedin />,
  url: "https://www.linkedin.com/in/morgan-baker-developer-inverness",
+ name: "LinkedIn",
  },
  {
  icon: <FaTwitter />,
  url: "https://www.twitter.com",
+ name: "Twitter",
  },
  {
  icon: <DiGithubBadge />,
  url: "https://github.com/bagseye",
+ name: "GitHub",
  },
 ]
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -77,3 +77,28 @@ body {
  cursor: pointer;
  }
 }
+
+.sr-only {
+ border: 0 !important;
+ clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+ -webkit-clip-path: inset(50%) !important;
+ clip-path: inset(50%) !important; /* 2 */
+ height: 1px !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: absolute !important;
+ width: 1px !important;
+ white-space: nowrap !important; /* 3 */
+}
+.sr-only-focusable:focus,
+.sr-only-focusable:active {
+ clip: auto !important;
+ -webkit-clip-path: none !important;
+ clip-path: none !important;
+ height: auto !important;
+ margin: auto !important;
+ overflow: visible !important;
+ width: auto !important;
+ white-space: normal !important;
+}