Merge pull request #683 from datum-cloud/chore/main-landmark

chore: update accessibility

Author: felixwidjaja

src/components/Footer.astro

@@ -96,7 +96,7 @@ const navData = navigation as NavData;
       >
         <!-- Navigation Sections -->
 
-        <div class="footer-nav-container">
+        <div class="footer-nav-container" role="navigation">
           {
             navData.footer.map((section) => (
               <div class="footer-nav-section">
@@ -110,6 +110,7 @@ const navData = navigation as NavData;
                         target={item.isExternal ? '_blank' : undefined}
                         rel={item.isExternal ? 'noopener noreferrer' : undefined}
                         data-astro-prefetch="hover"
+                        tabindex="0"
                       >
                         {item.text.toLowerCase() === 'github' ? (
                           <>
@@ -134,7 +135,7 @@ const navData = navigation as NavData;
           }
         </div>
         <!-- Social Links Section -->
-        <div class="footer-actions-section">
+        <div class="footer-actions-section" role="contentinfo">
           <div class="w-full">
             <div class="mb-8 flex w-full justify-center space-x-3 md:justify-end-safe">
               {
@@ -155,8 +156,8 @@ const navData = navigation as NavData;
             <p
               class="footer-copyright mb-2 w-full text-center text-nowrap md:text-right [&_a]:inline-block"
             >
-              <a href="/legal/terms/" class="footer-nav-link">Terms of Service</a>,
-              <a href="/legal/privacy/" class="footer-nav-link">Privacy Policy</a>
+              <a href="/legal/terms/" class="footer-nav-link" tabindex="0">Terms of Service</a>,
+              <a href="/legal/privacy/" class="footer-nav-link" tabindex="0">Privacy Policy</a>
             </p>
             <p class="footer-copyright">
               &copy; {new Date().getFullYear()} Datum Technology, Inc.

src/components/Hero.astro

@@ -31,7 +31,7 @@ const {
       >
         {/* Hero Main Content */}
         {(title || description) && (
-          <div class="hero--main-content-inner">
+          <div class="hero--main-content-inner" role="banner">
             {(iconName && iconName !== '') || (subtitle && subtitle !== '') ? (
               <div class="hero--main-content-icon">
                 {iconName && iconName !== '' && (

src/components/Nav.astro

@@ -24,6 +24,7 @@ const {
   class="nav--main fade-in--pure"
   data-reveal="fade-in--pure--visible"
   data-reveal-immediate="true"
+  role="navigation"
 >
   {/* Logo */}
 

src/components/NavMenu.astro

@@ -62,6 +62,7 @@ function hasActiveChild(sections: NavData['main'][0]['children'], currentPath: s
               href={item.href}
               class={`nav-menu-link ${isActive ? 'link--active' : ''}`}
               data-astro-prefetch="hover"
+              tabindex="0"
             >
               <span>{item.text}</span>
               {item.children && <Arrow class="nav-dropdown-arrow" />}
@@ -89,6 +90,7 @@ function hasActiveChild(sections: NavData['main'][0]['children'], currentPath: s
                               href={subItem.href}
                               class={`nav-dropdown-link ${isSubItemActive ? 'link--active' : ''}`}
                               data-astro-prefetch="hover"
+                              tabindex="0"
                             >
                               {'icon' in subItem && subItem.icon && (
                                 <div class="nav-dropdown-icon">

src/components/home/FirstSection.astro

@@ -29,7 +29,11 @@ if (content.data.images) {
 }
 ---
 
-<section class="bg-glacier-mist-700 section--block section--block--pad overflow-clip">
+<section
+  class="bg-glacier-mist-700 section--block section--block--pad fade-in--pure overflow-clip"
+  data-reveal="fade-in--pure--visible"
+  data-reveal-immediate="true"
+>
   <div class="absolute right-0 bottom-0 z-0 flex w-[663px]">
     <Image
       src={sceneTree}
@@ -49,9 +53,7 @@ if (content.data.images) {
       />
       <!-- Scene Tree Image -->
       <div
-        class="fade-in--pure relative z-10 flex flex-col px-6 pt-8 pb-6 md:px-11 md:pt-11 lg:px-16 lg:pt-16 xl:px-20 xl:pt-20"
-        data-reveal="fade-in--pure--visible"
-        data-reveal-delay="100"
+        class="relative z-10 flex flex-col px-6 pt-8 pb-6 md:px-11 md:pt-11 lg:px-16 lg:pt-16 xl:px-20 xl:pt-20"
       >
         <div
           class="mx-auto mb-10 flex w-full flex-col justify-between gap-9 text-center md:mb-20 md:flex-row md:text-left lg:mb-20 xl:mb-24"

src/components/home/Hero.astro

@@ -19,6 +19,7 @@ const { title = '', description = '', class: className } = Astro.props as HeroPr
       class="fade-in--small max-width relative z-40 flex flex-col items-center justify-center gap-7 pt-16 pb-29 text-center md:pt-16 md:pb-44 lg:pt-18 lg:pb-32 xl:gap-9 xl:pt-20 xl:pb-44"
       data-reveal="fade-in--small--visible"
       data-reveal-immediate="true"
+      role="banner"
     >
       <h1
         class="datum-text-10xl m-auto max-w-140 text-white"

src/v1/styles/components-nav.css

@@ -51,15 +51,17 @@
     @apply transition-transform duration-200 ease-in-out;
   }
 
-  .nav-dropdown:hover .nav-dropdown-arrow {
+  .nav-dropdown:hover .nav-dropdown-arrow,
+  .nav-dropdown:focus-within .nav-dropdown-arrow {
     @apply rotate-180;
   }
 
   .nav-dropdown-menu {
     @apply pointer-events-none invisible absolute top-full left-0 z-90 w-max min-w-[250px] rounded-[var(--radius-lg)] bg-white p-6 opacity-0 transition-all duration-200 ease-in-out;
   }
 
-  .nav-dropdown:hover .nav-dropdown-menu {
+  .nav-dropdown:hover .nav-dropdown-menu,
+  .nav-dropdown:focus-within .nav-dropdown-menu {
     @apply pointer-events-auto visible opacity-100;
   }