Edit About page and add some ARIA attributes

choubari · Sep 7, 2023 · 89995b6 · 89995b6
1 parent 11a02d5
commit 89995b6
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -29,10 +29,13 @@ export default function About() {
         <p className="mb-4">
           Hey! I'm <span className="font-bold">Kawtar CHOUBARI</span>, a Junior
           Software Engineer and Content Creator from Morocco, currently living
-          in Paris, France. I work on Front-End development with
-          JavaScript/TypeScript on a daily basis with frameworks like ReactJS,
-          Next.js and a bit of React Native. I'm currently looking into learning
-          Back-End JS development with NodeJS.
+          in Paris, France.
+        </p>
+        <p className="mb-4">
+          I work mainly on Front-End development, with JavaScript / TypeScript
+          on a daily basis and frameworks like ReactJS, Next.js, and also React
+          Native. I'm currently looking into learning Back-End JS development
+          with NodeJS.
         </p>
         <p className="mb-4">
           I have been able to put my knowledge in good use by giving back to the
@@ -72,6 +75,7 @@ export default function About() {
           <li>Software Development</li>
           <li>Public Speaking</li>
           <li>Content Creation</li>
+          <li>Community Building</li>
           <li>Partnership & Collaboration</li>
           <li>Student life, Career Advice</li>
           <li>...</li>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -18,7 +18,9 @@ export default function RootLayout({
       <body className="bg-light dark:bg-darker text-darker dark:text-lighter overflow-x-hidden">
         <Providers>
           <Nav />
-          <div className="mx-auto lg:max-w-7xl">{children}</div>
+          <main className="mx-auto lg:max-w-7xl" role="main">
+            {children}
+          </main>
         </Providers>
         <Footer />
         <script

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -12,7 +12,10 @@ import { SiGithub, SiNextdotjs, SiTailwindcss, SiVercel } from "react-icons/si";
 
 export default function Footer() {
   return (
-    <footer className="bg-lighter dark:bg-dark text-darker dark:text-light py-4 mt-20 w-full">
+    <footer
+      role="contentinfo"
+      className="bg-lighter dark:bg-dark text-darker dark:text-light py-4 mt-20 w-full"
+    >
       <div className="mx-auto px-8 pt-5 lg:px-8 lg:max-w-7xl grid grid-cols-1 md:grid-cols-12 gap-8">
         <div className="md:col-span-4 md:space-y-4">
           <Logo />

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -14,17 +14,19 @@ export function Nav() {
   return (
     <nav
       className="w-full bg-lighter dark:bg-dark"
+      role="navigation"
       aria-label="Header Navigation"
     >
       <div className="justify-between px-8 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
         <div className="flex items-center justify-between py-3 md:py-5 md:block">
-          <Link href="/">
+          <Link href="/" aria-label="navigate to home page">
             <Logo />
           </Link>
           <div className="md:hidden">
             <button
               className="p-2"
               onClick={() => setNavbar(!navbar)}
+              aria-label="navigation menu button"
               aria-controls="navbar-multi-level"
               aria-expanded="false"
             >

diff --git a/components/newsletter-box.tsx b/components/newsletter-box.tsx
@@ -7,6 +7,7 @@ function FullWidthDark() {
       height="250"
       frameBorder="0"
       scrolling="no"
+      title="newsletter box"
       style={{
         borderRadius: "4px",
         margin: 0,
@@ -24,6 +25,7 @@ function Slim() {
       width="100%"
       frameBorder="0"
       scrolling="no"
+      title="newsletter box"
       className="rounded-md"
       style={{
         borderRadius: "5px !important",