From d2b274246f1813f5d13e56a03e2f490f12369d7c Mon Sep 17 00:00:00 2001
From: vanntile <33692650+vanntile@users.noreply.github.com>
Date: Fri, 26 Mar 2021 19:19:20 +0200
Subject: [PATCH] fix: :bug: improved accessibility

---
 package-lock.json  | 15 ++++++++++++++-
 package.json       |  1 +
 pages/index.tsx    | 17 ++++++++++++++++-
 tailwind.config.js |  2 +-
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 95f7e36..3c850f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "vanntile-portfolio",
-      "version": "0.12.1",
+      "version": "1.0.0",
       "dependencies": {
         "@next/mdx": "^10.0.8",
         "date-fns": "^2.19.0",
@@ -64,6 +64,7 @@
         "standard-version": "^9.1.1",
         "stylelint-config-recommended": "^4.0.0",
         "tailwindcss": "^2.0.3",
+        "tailwindcss-visuallyhidden": "^1.0.2",
         "typescript": "4.2"
       },
       "engines": {
@@ -14981,6 +14982,12 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss-visuallyhidden": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.2.tgz",
+      "integrity": "sha512-Hk3Do4x9nAz43CGzcxXqdAhsQs+bE6tUhlcHWBvLC4F8WjqbiGIcp1jPPHmXBAv41D8kFIH0UZyLGw490upsKg==",
+      "dev": true
+    },
     "node_modules/tailwindcss/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -27730,6 +27737,12 @@
         }
       }
     },
+    "tailwindcss-visuallyhidden": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.2.tgz",
+      "integrity": "sha512-Hk3Do4x9nAz43CGzcxXqdAhsQs+bE6tUhlcHWBvLC4F8WjqbiGIcp1jPPHmXBAv41D8kFIH0UZyLGw490upsKg==",
+      "dev": true
+    },
     "text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
diff --git a/package.json b/package.json
index 80e0196..f1ad433 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "standard-version": "^9.1.1",
     "stylelint-config-recommended": "^4.0.0",
     "tailwindcss": "^2.0.3",
+    "tailwindcss-visuallyhidden": "^1.0.2",
     "typescript": "4.2"
   },
   "scripts": {
diff --git a/pages/index.tsx b/pages/index.tsx
index 1c754ae..d98810b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -169,22 +169,27 @@ const IndexPage = (): JSX.Element => {
   const externals = [
     {
       href: 'https://github.com/vanntile',
+      name: 'vanntile on GitHub',
       d: svg.github,
     },
     {
       href: 'https://gitlab.com/vanntile',
+      name: 'vanntile on GitLab',
       d: svg.gitlab,
     },
     {
       href: 'https://stackoverflow.com/users/4679160/vanntile-ianito',
+      name: 'vanntile on StackOverflow',
       d: svg.stackoverflow,
     },
     {
       href: 'https://dribbble.com/vanntile',
+      name: 'vanntile on Dribbble',
       d: svg.dribbble,
     },
     {
       href: 'https://www.linkedin.com/in/valentin-ionita',
+      name: 'vanntile on Linkedin',
       d: svg.linkedin,
     },
   ]
@@ -324,10 +329,20 @@ const IndexPage = (): JSX.Element => {
               key={e.href}
               href={e.href}
               target="_blank"
+              rel="noreferrer"
+              title={e.name}
               className={`${styles.rotateScaleUp} pseudo-none bg-gray-900 rounded-full h-12 w-12 focus:outline-none focus:ring-8 ring-brand-accent`}
             >
-              <svg width="48px" height="48px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                width="48px"
+                height="48px"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
                 <path d={e.d} fill="currentColor" className="text-gray-200" />
+                <span className="visuallyhidden">{e.name}</span>
               </svg>
             </a>
           ))}
diff --git a/tailwind.config.js b/tailwind.config.js
index c250ca7..60d47f0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -54,5 +54,5 @@ module.exports = {
     },
   },
   variants: {},
-  plugins: [],
+  plugins: [require('tailwindcss-visuallyhidden')()],
 }