Cleanup: WCAG issues

nikoshell · nikoshell · commit b7e4ed5568a9 · 2025-05-16T00:51:16.000+02:00
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -12,7 +12,7 @@ const gitVersion = __GIT_VERSION__;
     {
       links.footer.map((section) => (
         <div class="md:w-auto mb-8 md:mb-0 text-start">
-          <h3 class="font-bold text-lg mb-4">{section.name}</h3>
+          <h2 class="font-bold text-lg mb-4">{section.name}</h2>
           {section.items ? (
             <ul class="space-y-2">
               {section.items.map((item) => (
@@ -51,7 +51,7 @@ const gitVersion = __GIT_VERSION__;
         class="flex flex-col lg:flex-row self-center gap-2 lg:gap-12 justify-end"
       >
         <div
-          class="flex flex-col text-white/40 w-full lg:w-2/3 p-5 items-center text-center"
+          class="flex flex-col text-white/60 w-full lg:w-2/3 p-5 items-center text-center"
         >
           <p>
             Excited about our mission? Want to collaborate or contribute? Let's
@@ -63,7 +63,7 @@ const gitVersion = __GIT_VERSION__;
           </p>
         </div>
         <div
-          class="flex text-white/40 w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
+          class="flex text-white/60 w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
         >
           <div>
             <EPSLogo width="90" height="90" class="w-[90px] mr-4 h-auto" />
@@ -111,7 +111,7 @@ const gitVersion = __GIT_VERSION__;
     </div>
   </div>
 
-  <p class="mb-16 text-white/10 text-center">
+  <p class="mb-16 text-text-inverted text-center">
     version: {gitVersion} @ {buildTimestamp}
   </p>
 </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -4,15 +4,15 @@ import HeaderActions from "@components/header/header-actions.astro";
 import HeaderLogo from "@components/header/header-logo.astro";
 import Search from "@components/Search.astro";
 
-import links from "../data/links.json";
+import links from "@data/links.json";
 ---
 
 <section
   id="navbar"
   class="fixed top-0 z-50 transition-transform duration-300 transform-gpu w-full"
 >
   <div
-    class="container max-w-[1150px] mx-auto px-6 py-2 mt-1 lg:p-2 lg:mt-6 px-2 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
+    class="container max-w-[1150px] mx-auto px-6 py-2 mt-1 lg:p-2 lg:mt-6 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
   >
     <input
       type="checkbox"
diff --git a/src/components/Modal.astro b/src/components/Modal.astro
@@ -19,6 +19,7 @@ const { id = 'modal', open = false, closeOnOutsideClick = false } = Astro.props;
       clear
       icon="close"
       iconSize="fa-xl"
+      aria-label="Close button"
       data-close-modal
       class="w-[3em] h-[3em] absolute top-4 right-4 text-primary hover:text-black "
     />
diff --git a/src/components/Search.astro b/src/components/Search.astro
@@ -10,6 +10,7 @@ import Modal from "@components/Modal.astro";
   <SearchComponent
     id="search"
     className="pagefind-ui"
+    aria-label="Toggle navigation menu"
     uiOptions={{
       showImages: false,
       translations: {
diff --git a/src/components/SponsorLogo.astro b/src/components/SponsorLogo.astro
@@ -28,7 +28,8 @@ const logo = sponsorLogos[sponsor.id];
     {
       website ? (
 
-        <a href={website}>
+        <a href={website} aria-label={`Link to ${title}`}
+>
           <Image
             src={logo}
             alt={`${title} Logo`}
diff --git a/src/components/header/header-actions.astro b/src/components/header/header-actions.astro
@@ -31,14 +31,13 @@ const IS_LIVE = false;
               <kbd>Ctrl</kbd><kbd>K</kbd>
             </kbd>
           </button>
-      <Button custom url="/tickets" icon="ticket" class="button-link font-bold text-lg px-4 py-3 rounded-full inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black w-full max-w-36 max-xl:hidden bg-button text-text-inverted hover:bg-button-hover border-transparent">Tickets</Button>
+      <Button custom url="/tickets" icon="ticket" class="button-link font-bold text-lg px-4 py-3 rounded-full inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-white w-full max-w-36 max-xl:hidden bg-button text-text-inverted hover:bg-button-hover border-transparent">Tickets</Button>
       {IS_LIVE && <Button url="/live">Live</Button>}
       </>
      : null
   }
 
-
-  <label for="nav_toggle" class="flex xl:hidden">
+  <label for="nav_toggle" class="flex xl:hidden" aria-label="Toggle navigation menu">
       <span class="w-[3em] h-[3em] font-bold text-lg px-4 py-4 rounded-full inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black bg-primary text-white hover:bg-primary-hover border-transparent">
       {mobile ? <Icon name="close" size="fa-xl" /> : <Icon name="bars" size="fa-xl" />}
       </span>
diff --git a/src/components/header/header-button.astro b/src/components/header/header-button.astro
@@ -14,7 +14,7 @@ const { href, variant = "standard" } = Astro.props;
     {
       "bg-text": variant === "menu",
       "bg-primary": variant === "standard",
-      "text-text-inverted": variant !== "live",
+      "text-text": variant !== "live",
       "bg-red": variant === "live",
     },
   ]}
diff --git a/src/components/sections/hero/hero.astro b/src/components/sections/hero/hero.astro
@@ -89,7 +89,7 @@ const action2 = "/sponsorship/sponsor/";
             src="/logo.png"
             height="188"
             width="188"
-            alt="EuroPython logo"
+            alt="2025 EuroPython logo"
           />
         </div>
         <h1
@@ -137,7 +137,7 @@ const action2 = "/sponsorship/sponsor/";
         <div class="px-5 md:px-10 md:m-10">
           <Image
             src={heroImage}
-            alt="EuroPython 2025 Hero Image"
+            alt="EuroPython 2025 Conference"
             class="w-full max-w-5xl lg:max-w-full h-auto lg:h-full rounded-2xl shadow-xl"
           />
         </div>
@@ -153,8 +153,8 @@ const action2 = "/sponsorship/sponsor/";
             <Icon name="calendar-days" size="fa-3x" />
           </div>
           <div>
-            <h3 class="text-2xl md:text-5xl font-bold">7</h3>
-            <p class="text-xl md:text-3xl">Days</p>
+            <h2 class="text-2xl md:text-5xl font-bold">7</h2>
+            <h3 class="text-xl md:text-3xl">Days</h3>
           </div>
         </div>
         <div class="p-4 bg-gray-100 rounded-lg flex items-center">
@@ -164,8 +164,8 @@ const action2 = "/sponsorship/sponsor/";
             <Icon name="users" size="fa-3x" />
           </div>
           <div>
-            <h3 class="text-2xl md:text-5xl font-bold">1.3k+</h3>
-            <p class="text-xl md:text-3xl">Attendees</p>
+            <h2 class="text-2xl md:text-5xl font-bold">1.3k+</h2>
+            <h3 class="text-xl md:text-3xl">Attendees</h3>
           </div>
         </div>
         <div class="p-4 bg-gray-100 rounded-lg flex items-center">
@@ -175,8 +175,8 @@ const action2 = "/sponsorship/sponsor/";
             <Icon name="comments" size="fa-3x" />
           </div>
           <div>
-            <h3 class="text-2xl md:text-5xl font-bold">180+</h3>
-            <p class="text-xl md:text-3xl">Speakers</p>
+            <h2 class="text-2xl md:text-5xl font-bold">180+</h2>
+            <h3 class="text-xl md:text-3xl">Speakers</h3>
           </div>
         </div>
       </div>
diff --git a/src/components/sections/keynoters/keynoter.astro b/src/components/sections/keynoters/keynoter.astro
@@ -62,19 +62,19 @@ const isSpeaker = entries.some((entry) => entry.id === slug);
         ) : (
           <>
             {isSpeaker ? (
-              <p class="text-[#17223A] font-bold">
+              <h2 class="text-[#17223A] font-bold">
                 <a
                   href={`/speaker/${slug}`}
-                  class="text-[#17223A] font-bold hover:underline"
+                  class="text-2xl text-[#17223A] font-bold hover:underline"
                 >
                   {name}
                 </a>
-              </p>
+              </h2>
             ) : (
-              <p class="text-[#17223A] font-bold">{name}</p>
+              <h2 class="text-2xl text-[#17223A] font-bold">{name}</h2>
             )}
             {tagline && (
-              <p class="text-secondary-hover text-lg italic">{tagline}</p>
+              <h3 class="text-secondary-hover text-lg italic">{tagline}</h3>
             )}
           </>
         )
diff --git a/src/components/sections/keynoters/keynoters.astro b/src/components/sections/keynoters/keynoters.astro
@@ -47,10 +47,7 @@ const placeholders = Math.max(0, 5 - keynoters.length);
 
   <div class="flex items-center flex-col pt-6">
     <div class="text-center">
-      <h3 class="font-bold text-3xl m-4 ">
-        <span class="text-body-light inline-block mr-2">#</span>
-        See other sessions
-      </h3>
+      <Headline as="h4" title="See other sessions" />
       <Button url="/sessions">See sessions preview</Button>
     </div>
   </div>
diff --git a/src/components/sections/subscribe.astro b/src/components/sections/subscribe.astro
@@ -41,6 +41,7 @@ const socialLinks = [
       id="subscribeForm"
       class="flex flex-col sm:flex-row justify-center items-center gap-4"
     >
+      <label for="emailInput" class="sr-only">Email address</label>
       <input
         id="emailInput"
         type="email"
diff --git a/src/components/sections/updates/card.astro b/src/components/sections/updates/card.astro
@@ -16,7 +16,6 @@ const { title, subtitle, url, image } = Astro.props;
 <div
   class="prose-xl min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
 >
-  <a href={url} class="block">
     <div class="relative w-full">
       <Image
         src={image}
@@ -27,11 +26,8 @@ const { title, subtitle, url, image } = Astro.props;
         loading="lazy"
       />
     </div>
-  </a>
   <div class="flex items-center flex-col flex-grow mb-2">
-    <a href={url} class="button-link block hover:underline">
-      <h3 >{title}</h3>
-    </a>
+    <h3 >{title}</h3>
     <slot />
   </div>
 
diff --git a/src/components/sponsors/sponsor-tier.astro b/src/components/sponsors/sponsor-tier.astro
@@ -1,7 +1,6 @@
 ---
 import { getCollection } from "astro:content";
 import SponsorLogo from "@components/SponsorLogo.astro";
-import { Image } from "astro:assets";
 
 type Sponsor = Awaited<ReturnType<typeof getCollection<"sponsors">>>[0];
 
@@ -14,20 +13,17 @@ export interface Props {
   top?: boolean;
 }
 
-
-import { sponsorLogos } from "@data/sponsorLogos";
-
 const { tier, top } = Astro.props;
 ---
 
 <div class="relative">
-  <h4 class="absolute w-10 font-bold top-0 bottom-0 font-title text-primary">
+  <h3 class="absolute w-10 font-bold top-0 bottom-0 font-title text-primary">
     <span
       class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-90 block origin-center whitespace-nowrap"
     >
       {tier.name}
     </span>
-  </h4>
+  </h3>
   <div
     class:list={[
       "grid ml-12 items-center justify-items-center",
@@ -39,15 +35,7 @@ const { tier, top } = Astro.props;
   >
     {
       tier.sponsors.map((sponsor) => (
-        <div>
-        <a
-          href={sponsor.data.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
           <SponsorLogo sponsor={sponsor.id} />
-        </a>
-        </div>
       ))
     }
   </div>
diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro
@@ -23,10 +23,10 @@ const {
 
 const resolvedIsExternal = isExternal ?? url?.startsWith("http");
 
-const baseClasses = "button-link font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black";
+const baseClasses = "button-link font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border text-text";
 const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover border-transparent";
 const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
-const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-primary-active border-transparent";
+const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-text-inverted border-transparent";
 const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg-button-hover";
 const disabledClasses = "opacity-50 pointer-events-none";
 const iconClasses = "mx-2 ";
diff --git a/src/content/deadlines/05_call_for_venues.md b/src/content/deadlines/05_call_for_venues.md
@@ -1,6 +1,6 @@
 ---
 title: Call for 2026 Venues
-subtitle: Read More
+subtitle: Propose a Venue
 url: https://europython-society.org/call-for-europython-2026-host-venues
 image: "./venue.jpg"
 ---
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -2,14 +2,20 @@
   --color-primary: #151f38;
   --color-primary-hover: #7a7ebd;
   --color-primary-active: #7a7ebd;
-  --color-button: #ee714b;
-  --color-button-hover: #fabc1b;
+
+  --color-button: #6b5ca5; /* Darker orange-brown */
+  --color-button-hover: #8572c6; /* Lighter than base, but still accessible */
+  --color-button-active: #514689; /* Darker for pressed state */
+  --color-button-focus: #9c4222; /* Same as base with a visible outline */
+  --color-button-disabled: #b7b2c7; /* Desaturated, lighter version */
+  --color-button-text: #fdfdfd; /* White text on all states */
+
   --color-secondary: #151f38;
   --color-secondary-dark: #f5e5d6;
   --color-secondary-darkest: white;
   --color-secondary-light: #7a7ebd;
   --color-text: #151f38;
-  --color-text-inverted: white;
+  --color-text-inverted: #fdfdfd;
   --color-body-background: #f5e5d6;
   --color-hero-primary: #151f38;
   --color-hero-secondary: #fabc1b;

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,8 @@ const logo = sponsorLogos[sponsor.id];`
`28`	`28`	`{`
`29`	`29`	`website ? (`
`30`	`30`
`31`		`- <a href={website}>`
	`31`	+ <a href={website} aria-label={`Link to ${title}`}
	`32`	`+>`
`32`	`33`	`<Image`
`33`	`34`	`src={logo}`
`34`	`35`	alt={`${title} Logo`}
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const { href, variant = "standard" } = Astro.props;`
`14`	`14`	`{`
`15`	`15`	`"bg-text": variant === "menu",`
`16`	`16`	`"bg-primary": variant === "standard",`
`17`		`- "text-text-inverted": variant !== "live",`
	`17`	`+ "text-text": variant !== "live",`
`18`	`18`	`"bg-red": variant === "live",`
`19`	`19`	`},`
`20`	`20`	`]}`