Fix WAVE warnings

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

Hide file tree

Showing 6 changed files with 54 additions and 45 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/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
@@ -9,40 +9,32 @@ 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"
-			/>
-
-			<img
-				src={image}
-				alt={altText}
-				className="w-full aspect-video object-cover object-center order-1"
-			/>
+				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>
+
+					<div 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 />
+					</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">

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,6 +35,7 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 					"h-6",
 					"bg-white/40",
 					"rounded-full",
+					"text-black",
 
 					// Checked indicator
 					"after:content-['']",
@@ -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
@@ -15,6 +15,16 @@
     @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,15 @@ 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",
-			background: "#007da3",
+			outlineColor: "#ec7100",
+			background: "#094f64",
 		},
 
 		fontFamily: {