fix: accessibility issues on homepage (#212)

EmmaDawsonDev · web-flow · commit 8216bc85e9c7 · 2022-10-02T08:55:29.000+05:30
diff --git a/src/components/Global/Footer.js b/src/components/Global/Footer.js
@@ -69,7 +69,7 @@ const Footer = () => {
                     {item.name}
                   </p>
 
-                  <nav className="mt-8">
+                  <nav className="mt-8" aria-label={item.name}>
                     <ul className="space-y-4 text-sm">
                       {item.children.map((child) => (
                         <li key={child.name}>
diff --git a/src/components/Home/HeroSection/ContributeButton.js b/src/components/Home/HeroSection/ContributeButton.js
@@ -4,17 +4,14 @@ import Link from 'next/link';
 const ContributeButton = () => {
   return (
     <>
-      <motion.button
+      <motion.a
         className="inline-flex items-center justify-center px-8 py-3 text-base font-medium transition-all duration-100 bg-gray-100 border border-transparent rounded-md shadow-md border-dark hover:border-white/80 text-slate-700 hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 1 }}
+        href="https://github.com/webxdao"
       >
-        <Link href="https://github.com/webxdao">
-          <a className="inline-flex items-center justify-center w-full">
-            Contribute
-          </a>
-        </Link>
-      </motion.button>
+        Contribute
+      </motion.a>
     </>
   );
 };
diff --git a/src/components/Home/HeroSection/DiscordButton.js b/src/components/Home/HeroSection/DiscordButton.js
@@ -5,18 +5,15 @@ import Link from 'next/link';
 const DiscordButton = () => {
   return (
     <>
-      <motion.button
+      <motion.a
         className="inline-flex items-center justify-center px-4 py-3 text-base font-medium transition-all duration-100 border border-transparent rounded-md shadow-sm hover:border-white/80 bg-cyber-webx text-white/80 hover:text-white hover:bg-gradient-to-r hover:from-pink-700 hover:to-pink-900 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 1 }}
+        href="https://dsc.gg/webxdao"
       >
-        <Link href="https://dsc.gg/webxdao">
-          <a className="inline-flex items-center justify-center w-full">
-            Join WebXDAO
-            <FaDiscord className="w-5 h-5 ml-3 -mr-1" aria-hidden="true" />
-          </a>
-        </Link>
-      </motion.button>
+        Join WebXDAO
+        <FaDiscord className="w-5 h-5 ml-3 -mr-1" aria-hidden="true" />
+      </motion.a>
     </>
   );
 };
diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
