fix: improve accessibility in Navigation, Footer, and PageNotFound (#7594)

Author: shivxmsharma

src/components/Footer/Footer.jsx

@@ -47,7 +47,7 @@ const Footer = () => (
       </p>
     </Container>
     <Container className="footer__inner">
-      <section className="footer__left">
+      <section className="footer__left" aria-label="Quick links">
         <Link className="footer__link" to="/guides/getting-started/">
           Get Started
         </Link>
@@ -59,13 +59,13 @@ const Footer = () => (
         </Link>
       </section>
 
-      <section className="footer__middle">
+      <section className="footer__middle" aria-label="Home">
         <Link to="/" className="footer__icon">
           <img src={Icon} alt="webpack icon" width={35} height={35} />
         </Link>
       </section>
 
-      <section className="footer__right">
+      <section className="footer__right" aria-label="Resources and links">
         <Link className="footer__link" to="https://webpack.threadless.com/">
           Swag Store
         </Link>

src/components/Navigation/Navigation.jsx

@@ -137,7 +137,10 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
           <Link to="/" className="md:mr-auto">
             <Logo />
           </Link>
-          <nav className="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px] md:items-center">
+          <nav
+            className="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px] md:items-center"
+            aria-label="Main navigation"
+          >
             {links.map(({ content, url, isActive, ariaLabel }) => (
               <NavigationItem
                 key={url}

src/components/PageNotFound/PageNotFound.scss

@@ -1,9 +1,17 @@
+@use "functions";
+
 .button {
   text-decoration: none;
   display: inline-block;
   padding: 3px 5px;
   font-size: 1.1rem;
   border-radius: 5px;
   width: auto;
-  border: 1px solid #1a6bac;
+  border: 1px solid functions.getColor(denim);
+  color: functions.getColor(denim);
+
+  &:hover {
+    background-color: functions.getColor(denim);
+    color: functions.getColor(white);
+  }
 }