feat: improve accessibility a bit (#178)

client/src/components/Footer/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import {
   Button, Col, Container, Row
 } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import AuthContext from '../../context/AuthContext';
 import './style.css';
 import { useTranslation } from 'react-i18next';
@@ -45,17 +45,12 @@ function Footer(): JSX.Element {
           </Col>
 
           <Col xs={12} sm={4} className="text-center my-2 my-md-0">
-            <Button
-              variant="link"
-              type="button"
-              onClick={() => navigate('/account')}
-              data-testid="footer-user-text"
-            >
+            <Link to="/account" data-testid="footer-user-text">
               {t('footer_my_account')}
               (
               {user?.email}
               )
-            </Button>
+            </Link>
           </Col>
 
           <Col xs={12} sm={4} className="text-center text-md-end">

client/src/components/LoginForm/index.tsx

@@ -83,7 +83,7 @@ function LoginForm({ prefix }: { prefix: string }): JSX.Element {
   }, [formInvalid]);
 
   return (
-    <Container fluid className="login-page">
+    <Container as="main" fluid className="login-page">
       <Row className="justify-content-center w-100">
         <Col xs={12} md={6} lg={4}>
           <Card>

client/src/views/Landing/index.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Button, Container } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import AuthContext from '../../context/AuthContext';
 import { handleDefaultLang } from '../../lang-service/LangHandler';
@@ -18,34 +18,9 @@ import { LangAvailable, languages } from '../../constants/languages_available';
  * @returns {JSX.Element} The Landing page component.
  */
 function Landing(): JSX.Element {
-  const { signed, checkCurrentAuthUser } = useContext(AuthContext);
-  const navigate = useNavigate();
+  const { checkCurrentAuthUser } = useContext(AuthContext);
   const { i18n, t } = useTranslation();
 
-  /**
-   * Navigates to the specified page.
-   *
-   * @param {string} page - The page to navigate to.
-   */
-  const goTo = useCallback((page: string): void => {
-    navigate(page);
-  }, []);
-
-  /**
-   * Handles the login button click event.
-   *
-   * If a user is already signed in, it navigates to the home page.
-   * Otherwise, it navigates to the login page.
-   */
-  const handleLogin = (): void => {
-    if (signed) {
-      goTo('/home');
-    }
-    else {
-      goTo('/login');
-    }
-  };
-
   const handleLanguage = (lang: string) => {
     i18n.changeLanguage(lang);
     setDefaultLang(lang);
@@ -58,35 +33,15 @@ function Landing(): JSX.Element {
 
   return (
     <Container fluid className="vh-100 d-flex justify-content-center align-items-center landing-page">
-      <div>
-        <h1 className="display-4">
-          {t('landing_title')}
-        </h1>
-        <p className="lead">
-          {t('landing_subtitle')}
-        </p>
+      <main>
+        <h1 className="display-1">{t('landing_title')}</h1>
+        <h2>{t('landing_subtitle')}</h2>
 
-        <Button
-          type="button"
-          variant="primary"
-          className="btn-lg me-3"
-          onClick={handleLogin}
-        >
-          {t('landing_btn_login')}
-        </Button>
+        <Link to="/login" className="login me-3">{t('landing_btn_login')}</Link>
+        <Link to="/register" className="login me-3">{t('landing_btn_register')}</Link>
 
-        <Button
-          variant="outline-primary"
-          className="btn-lg me-3"
-          type="button"
-          onClick={() => goTo('/register')}
-        >
-          {t('landing_btn_register')}
-        </Button>
-
-        <br />
-
-        <div className="my-3">
+        <aside>
+          <h3>You can choose one of these languages</h3>
           {languages.map((lang: LangAvailable) => (
             <Button
               key={lang.key}
@@ -98,8 +53,8 @@ function Landing(): JSX.Element {
               {t(lang.key)}
             </Button>
           ))}
-        </div>
-      </div>
+        </aside>
+      </main>
     </Container>
   );
 }

client/src/views/Landing/styles.scss

@@ -20,44 +20,56 @@ $dark-text: #343a40;
     z-index: 1;
   }
 
-  div {
+  main {
     position: relative;
     z-index: 2; // Ensures the content is above the background and overlay
   }
 
   h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
     margin-bottom: 1rem;
     color: $dark-text;
+    font-weight: 600;
   }
 
-  p {
-    font-size: 1.25rem;
-    margin-bottom: 2rem;
+  h2 {
+    font-size: 2.2rem;
+    font-weight: 300;
+    margin-bottom: 4.5rem;
     color: $dark-text;
   }
 
-  .btn-lg {
-    font-size: 1rem;
-    padding: 0.75rem 1.5rem;
-    min-width: 10rem;
+  h3 {
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: $dark-text;
   }
 
-  .btn-primary {
-    background-color: $primary-color;
-    border-color: $primary-color;
+  a.login {
+    margin-top: 5rem;
+    font-size: 2.5rem;
+    font-weight: 300;
+    padding: 0.75rem 1.5rem;
+  }
+
+  a.login {
     &:hover {
-      background-color: darken($primary-color, 10%);
+      color: darken($primary-color, 20%);
+      font-weight: 600;
     }
   }
 
+  aside {
+    margin-top: 10rem;
+  }
+
   .btn-outline-primary {
     color: $primary-color;
     border-color: $primary-color;
+    width: 6rem;
     &:hover {
       background-color: $primary-color;
       color: #fff;
     }
   }
 }
+