From fe27b18366cf719b1009e05e628388098d4d2833 Mon Sep 17 00:00:00 2001
From: Helena Standaert <helena.standaert@gmail.com>
Date: Tue, 23 Apr 2024 11:03:06 +0200
Subject: [PATCH] Fix WAVE warnings

---
 src/components/Button.tsx     | 11 ++++--
 src/components/Header.tsx     |  7 +++-
 src/components/Navigation.tsx |  8 +---
 src/components/NewsTeaser.tsx | 69 ++++++++++++++++++++---------------
 src/components/Switch.tsx     | 11 ++++--
 src/index.css                 | 12 +++++-
 tailwind.config.js            |  8 ++--
 7 files changed, 78 insertions(+), 48 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index d984bb6..bfcb5a9 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,3 +1,4 @@
+import { useAppState } from "@/providers";
 import type { ButtonHTMLAttributes, PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
@@ -5,14 +6,18 @@ export type ButtonProps = PropsWithChildren &
 	ButtonHTMLAttributes<HTMLButtonElement>;
 
 function Button({ type = "button", className, ...props }: ButtonProps) {
+	const { isCompliant } = useAppState();
+
 	return (
 		<button
 			className={twMerge(
-				"bg-blueZodiac",
-				"hover:bg-blueZodiac/60",
+				isCompliant
+					? ["bg-orange"]
+					: ["bg-blueZodiac", "hover:bg-blueZodiac/60"],
+				isCompliant && "font-bold",
 				"transition-colors",
 				"duration-200",
-				"text-white",
+				isCompliant ? "text-blueZodiac" : "text-white",
 				"py-2",
 				"px-4",
 				"rounded",
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f56d946..4644961 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -11,7 +11,11 @@ function Header() {
 			className={twMerge(
 				"mb-auto",
 				"text-sm",
-				isCompliant && ["bg-gradient-to-b", "from-blueZodiac", "to-background"],
+				isCompliant && [
+					"bg-gradient-to-b",
+					"from-blueZodiac",
+					"to-backgroundCompliant",
+				],
 				"lg:min-h-screen",
 				"flex",
 				"flex-col",
@@ -19,7 +23,6 @@ function Header() {
 		>
 			<Container className="grow flex flex-col">
 				<Navigation />
-
 				<div className="pt-12 my-auto">
 					<div className="uppercase text-4xl lg:text-7xl/normal">
 						{isCompliant && (
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index b0e47ab..fdc583e 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -17,18 +17,14 @@ function Navigation() {
 	return (
 		<div className="w-full sm:flex sm:items-center sm:justify-between my-4 sm:my-6 lg:my-8">
 			<div className="flex items-center justify-between">
-				<a
-					className="flex-none text-xl font-semibold"
-					title={isCompliant ? "Icapps" : ""}
-					href="#!"
-				>
+				<a className="flex-none text-xl font-semibold" href="#!">
 					{isCompliant ? (
 						<>
 							<span className="sr-only">Icapps</span>
 							<IcappsLogo aria-hidden />
 						</>
 					) : (
-						<IcappsLogo title="" />
+						<IcappsLogo title="Icapps" />
 					)}
 				</a>
 				<div className="sm:hidden">
diff --git a/src/components/NewsTeaser.tsx b/src/components/NewsTeaser.tsx
index dc546be..f3435d2 100644
--- a/src/components/NewsTeaser.tsx
+++ b/src/components/NewsTeaser.tsx
@@ -1,6 +1,7 @@
 import type { NewsItem } from "@/assets/content";
 import { ArrowRight } from "@/assets/icons";
 import { useAppState } from "@/providers";
+import { twMerge } from "tailwind-merge";
 import { Typography } from ".";
 
 type NewsTeaserProps = Omit<NewsItem, "key">;
@@ -9,40 +10,41 @@ function NewsTeaser({ image, title, summary, href, altText }: NewsTeaserProps) {
 	const { isCompliant } = useAppState();
 
 	return isCompliant ? (
-		<article className="relative mb-4 text-black flex flex-col pb-12 bg-white border-2">
-			<div className="p-4 order-2">
-				<Typography variant="h5" as={isCompliant ? "h3" : "h5"}>
-					{title}
-				</Typography>
-
-				<p>{summary}</p>
-
-				<a
-					href={href}
-					target="_blank"
-					rel="noreferrer"
-					className="absolute bottom-0 right-0 aspect-square bg-background text-white p-2"
-				>
-					<span className="sr-only">Read more about "{title}"</span>
-					<ArrowRight aria-hidden />
-				</a>
-			</div>
-
-			{/* biome-ignore lint/a11y/useAnchorContent: <explanation> */}
+		<article className="flex">
 			<a
 				href={href}
-				aria-hidden
-				tabIndex={-1}
 				target="_blank"
 				rel="noreferrer"
-				className="absolute inset-0"
-			/>
+				className="relative mb-4 text-black flex flex-col pb-12 bg-white border-2"
+			>
+				<div className="p-4 order-2">
+					<Typography variant="h5" as={isCompliant ? "h3" : "h5"}>
+						{title}
+					</Typography>
 
-			<img
-				src={image}
-				alt={altText}
-				className="w-full aspect-video object-cover object-center order-1"
-			/>
+					<p>{summary}</p>
+
+					<div
+						className={twMerge([
+							"absolute",
+							"bottom-0",
+							"right-0",
+							"aspect-square",
+							isCompliant ? "bg-backgroundCompliant" : "bg-background",
+							"text-white p-2",
+						])}
+					>
+						<span className="sr-only">Read more about "{title}"</span>
+						<ArrowRight aria-hidden />
+					</div>
+				</div>
+
+				<img
+					src={image}
+					alt={altText}
+					className="w-full aspect-video object-cover object-center order-1"
+				/>
+			</a>
 		</article>
 	) : (
 		<div className="relative mb-4 text-black flex flex-col pb-12 bg-white border-2">
@@ -59,7 +61,14 @@ function NewsTeaser({ image, title, summary, href, altText }: NewsTeaserProps) {
 					href={href}
 					target="_blank"
 					rel="noreferrer"
-					className="absolute bottom-0 right-0 aspect-square bg-background text-white p-2"
+					className={twMerge(
+						"absolute",
+						"bottom-0",
+						"right-0",
+						"aspect-square",
+						isCompliant ? "bg-backgroundCompliant" : "bg-background",
+						"text-white p-2",
+					)}
 				>
 					<ArrowRight aria-hidden />
 				</a>
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index 4c87998..d7d3a6f 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -25,6 +25,7 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 				type="button"
 				role="switch"
 				aria-checked={value ? "true" : "false"}
+				aria-labelledby={`${id}-label`}
 				onClick={handleChange}
 				id={id}
 				className={twMerge([
@@ -34,6 +35,7 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 					"h-6",
 					"bg-white/40",
 					"rounded-full",
+					"text-black",
 
 					// Checked indicator
 					"after:content-['']",
@@ -41,7 +43,7 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 					"after:top-[2px]",
 					"after:start-[2px]",
 					"after:bg-white",
-					"after:border-gray-300",
+					"after:border-white",
 					"after:border",
 					"after:rounded-full",
 					"after:h-5",
@@ -64,9 +66,12 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 				<span className="sr-only">off</span>
 				<span className="sr-only">on</span>
 			</button>
-			<label htmlFor={id} className="ms-3 text-sm font-medium cursor-pointer">
+			<span
+				id={`${id}-label`}
+				className="ms-3 text-sm font-medium cursor-pointer"
+			>
 				{label}
-			</label>
+			</span>
 		</div>
 	);
 }
diff --git a/src/index.css b/src/index.css
index 60ac96c..6774a17 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,13 +8,23 @@
   }
 
   body.compliant {
-    @apply font-noto;
+    @apply font-noto bg-backgroundCompliant;
   }
 
   body.compliant p {
     @apply max-w-[60ch];
   }
 
+  body:not(.compliant) p,
+  body:not(.compliant) h1,
+  body:not(.compliant) h2,
+  body:not(.compliant) h3,
+  body:not(.compliant) h4,
+  body:not(.compliant) h5,
+  body:not(.compliant) h6 {
+    @apply leading-none;
+  }
+
   body.compliant button,
   body.compliant a,
   body.compliant input,
diff --git a/tailwind.config.js b/tailwind.config.js
index a5dddd8..07895c4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,14 +8,16 @@ export default {
 			white: "#ffffff",
 			black: "#000000",
 			gray: "#cccccc",
-			blueZodiac: "#0a1930",
+			blueZodiac: "#0a1931",
 			green: "#00ff00",
 			brightTurquoise: "#00e5ff",
-			red: "#EF5350",
+			red: "#ef5350",
+			orange: "#ec7100",
 
 			// specific
-			outlineColor: "#93C700",
+			outlineColor: "#ec7100",
 			background: "#007da3",
+			backgroundCompliant: "#094f64",
 		},
 
 		fontFamily: {