Fix WAVE warnings

icapps · Apr 23, 2024 · fe27b18 · fe27b18
1 parent 66eb122
commit fe27b18
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 48 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,18 +1,23 @@
+import { useAppState } from "@/providers";
 import type { ButtonHTMLAttributes, PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
 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
@@ -11,15 +11,18 @@ 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",
 			)}
 		>
 			<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
@@ -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
@@ -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
@@ -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,14 +35,15 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 					"h-6",
 					"bg-white/40",
 					"rounded-full",
+					"text-black",
 
 					// Checked indicator
 					"after:content-['']",
 					"after:absolute",
 					"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
@@ -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
@@ -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: {