fix: small wave compliancy issues on landing page

Author: thilobillerbeck

core/src/components/Footer.astro

@@ -115,6 +115,7 @@ import logoWHite from '@nixos/branding/artifacts/internal/nixos-logomark-white-f
       id="scroll-to-top"
       class="bg-secondary-afghani-blue-25 hover:bg-secondary-afghani-blue-45 text-primary-white absolute right-4 bottom-4 z-50 rounded-xl drop-shadow-md transition-all duration-100 md:-right-14 md:bottom-8"
     >
+      <span class="sr-only">Scroll to top</span>
       <Icon class="h-14 w-14 p-1" name="mdi:keyboard-arrow-up" />
     </a>
   </Container>

core/src/components/Header.astro

@@ -79,6 +79,7 @@ const navbarItemActiveStyle = `border-b-secondary-afghani-blue-85 bg-secondary-a
       {
         headerMenu.data.items.map((item) => (
           <Link
+            role="menuitem"
             class:list={[
               'pt-7 pb-6',
               navbarItemStyle,

core/src/components/ui/Input.astro

@@ -7,6 +7,7 @@ interface Props {
   icon?: 'search' | null;
   placeholder?: string;
   name?: string;
+  title?: string;
 }
 
 const {
@@ -15,10 +16,12 @@ const {
   icon = null,
   placeholder = '',
   name = null,
+  title,
 } = Astro.props;
 ---
 
-<div class="relative">
+<label class="relative block">
+  <span class="sr-only">{title}</span>
   <Icon
     alt="Search"
     class:list={[
@@ -34,6 +37,7 @@ const {
   />
   <input
     type="text"
+    title={title}
     class="focus:border-secondary-afghani-blue-75 focus:outline-secondary-afghani-blue-95 border-primary-black-85 outline-2 outline-transparent"
     class:list={[
       'text-normal rounded-full',
@@ -49,4 +53,4 @@ const {
     name={name}
     placeholder={placeholder}
   />
-</div>
+</label>

core/src/components/ui/NixosSearchInput.astro

@@ -36,6 +36,7 @@ const {
   <Input
     color={color}
     size={size}
+    title="Search NixOS Packages and Options"
     placeholder={`Search for ${collectionMap[collection]}`}
     name="query"
   />