Optmize accessibility

src/assets/icons/index.ts

@@ -1,3 +1,4 @@
 export { default as ArrowRight } from "./arrowRight.tsx";
 export { default as IcappsLogo } from "./icappsLogo.tsx";
 export { default as Exclamation } from "./exclamation.tsx";
+export { default as LinkedIn } from "./linkedin.tsx";

src/assets/icons/linkedin.tsx

@@ -0,0 +1,36 @@
+import type { SvgIcon } from "./types";
+
+function exclamation({ title, width = 24, height = 24, ...props }: SvgIcon) {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 24 24"
+			fill="none"
+			{...props}
+		>
+			<title>{title}</title>
+
+			<path
+				d="M6.5 8C7.32843 8 8 7.32843 8 6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M5 10C5 9.44772 5.44772 9 6 9H7C7.55228 9 8 9.44771 8 10V18C8 18.5523 7.55228 19 7 19H6C5.44772 19 5 18.5523 5 18V10Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M11 19H12C12.5523 19 13 18.5523 13 18V13.5C13 12 16 11 16 13V18.0004C16 18.5527 16.4477 19 17 19H18C18.5523 19 19 18.5523 19 18V12C19 10 17.5 9 15.5 9C13.5 9 13 10.5 13 10.5V10C13 9.44771 12.5523 9 12 9H11C10.4477 9 10 9.44772 10 10V18C10 18.5523 10.4477 19 11 19Z"
+				fill="currentColor"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M20 1C21.6569 1 23 2.34315 23 4V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H20ZM20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}
+
+export default exclamation;

src/components/Container.tsx

@@ -1,3 +1,4 @@
+import { useAppState } from "@/providers";
 import type { HTMLAttributes, PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
@@ -7,8 +8,11 @@ export type ContainerProps = PropsWithChildren &
 	};
 
 function Container({ className, narrow, ...props }: ContainerProps) {
+	const { isCompliant } = useAppState();
+	const Element = isCompliant ? "section" : "div";
+
 	return (
-		<div
+		<Element
 			className={twMerge(
 				"container",
 				"mx-auto",

src/components/Footer.tsx

@@ -1,11 +1,48 @@
-import { Container } from ".";
+import { LinkedIn } from "@/assets/icons";
+import { useAppState } from "@/providers";
+import { Container, Typography } from ".";
+
+const ADDRESS = "Hangar 26/27, Rijnkaai 100 B16, 2000 Antwerp Belgium";
 
 function footer() {
+	const { isCompliant } = useAppState();
+
 	return (
 		<Container className="my-0 md:my-0 lg:my-0 xl:my-0">
-			<div className="py-6 flex border-t border-opacity-50">
-				<h5 className="font-bold mr-3">Adres</h5>
-				<p>Hangar 26/27, Rijnkaai 100 B16, 2000 Antwerp Belgium</p>
+			<div className="py-6 border-t border-opacity-50 lg:flex items-end">
+				<div>
+					{isCompliant && (
+						<Typography variant="h6" as="h2" className="mr-2">
+							Adres
+							<span className="sr-only">: </span>
+						</Typography>
+					)}
+					<p>
+						{isCompliant ? (
+							<a
+								target="_blank"
+								href="https://www.google.com/maps/dir/?api=1&destination=icapps"
+								rel="noreferrer"
+							>
+								{ADDRESS}
+							</a>
+						) : (
+							ADDRESS
+						)}
+					</p>
+				</div>
+				<div className="ml-auto mt-4 lg:mt-0">
+					<a
+						href="https://www.linkedin.com/company/icapps"
+						target="_blank"
+						rel="noreferrer"
+					>
+						<LinkedIn title="LinkedIn" />
+						{isCompliant && (
+							<span className="sr-only">Go to icapps' LinkedIn page</span>
+						)}
+					</a>
+				</div>
 			</div>
 		</Container>
 	);

src/components/Header.tsx

@@ -22,6 +22,12 @@ function Header() {
 
 				<div className="mt-12 grow flex items-center">
 					<h1 className="uppercase text-4xl lg:text-7xl/normal">
+						{isCompliant && (
+							<span className="block uppercase text-xl font-bold">
+								E-inclusion demo
+								<span className="sr-only">: </span>
+							</span>
+						)}
 						The only <strong>disability</strong> is when people cannot see{" "}
 						<strong>human potential</strong>.
 					</h1>

src/components/Input.tsx

@@ -19,9 +19,11 @@ function Input({ label, className, multiline, error, ...props }: InputProps) {
 			<label htmlFor={id} className="block mb-1 uppercase font-light text-sm">
 				{label}
 			</label>
+
 			<Element
 				id={id}
 				className={twMerge([
+					"block",
 					"w-full",
 					"max-w-[80ch]",
 					"p-3",
@@ -31,12 +33,18 @@ function Input({ label, className, multiline, error, ...props }: InputProps) {
 					error ? "border-red" : "border-black",
 					className,
 				])}
+				{...(error
+					? { "aria-invalid": true, "aria-describedby": `${id}-error` }
+					: {})}
 				{...(multiline ? { rows: 5 } : {})} // Only add rows attribute if multiline
 				{...props}
 			/>
 
 			{error && (
-				<span className="text-red text-sm mt-1 flex items-center">
+				<span
+					id={`${id}-error`}
+					className="bg-red p-2  rounded-md text-sm inline-flex mt-2 items-center"
+				>
 					<Exclamation title="Error: " className="mr-2" />
 					{error}
 				</span>

src/components/Layout.tsx

@@ -19,7 +19,15 @@ function Layout({ children }: Layout) {
 	useEffect(() => {
 		document.title = isCompliant ? "E-inclusion demo" : "";
 		document.documentElement.lang = isCompliant ? "en" : "";
-	});
+
+		const viewportElement = document.querySelector("meta[name=viewport]");
+		viewportElement?.setAttribute(
+			"content",
+			isCompliant
+				? "width=device-width, initial-scale=1.0"
+				: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+		);
+	}, [isCompliant]);
 
 	return (
 		<div className={twMerge(["flex", "flex-col", "size-full"])}>

src/components/Navigation.tsx

@@ -8,6 +8,7 @@ import { twMerge } from "tailwind-merge";
 function Navigation() {
 	const [isNavOpen, setIsNavOpen] = useState(false);
 	const { isCompliant, toggleCompliancy } = useAppState();
+	const NavElement = isCompliant ? "nav" : "div";
 
 	const toggleNavigation = () => {
 		setIsNavOpen((prev) => !prev);
@@ -17,7 +18,7 @@ function Navigation() {
 		<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 focus:outline-none focus:ring-1 focus:ring-gray-600"
+					className="flex-none text-xl font-semibold"
 					title={isCompliant ? "Icapps" : ""}
 					href="#!"
 				>
@@ -33,10 +34,17 @@ function Navigation() {
 				<div className="sm:hidden">
 					{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
 					<button
-						aria-hidden={isCompliant}
 						onClick={toggleNavigation}
-						className="p-2 inline-flex justify-center items-center gap-2 rounded-lg border border-gray-700 hover:border-gray-600 font-medium text-congress-blue-600 hover:text-congress-blue-400 shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-blue-600 transition-all text-sm"
+						className="p-2 inline-flex justify-center items-center gap-2 rounded-lg border border-gray-700 hover:border-gray-600 font-medium text-congress-blue-600 hover:text-congress-blue-400 shadow-sm align-middle transition-all text-sm"
+						{...(isCompliant
+							? {
+									"aria-expanded": isNavOpen,
+									"aria-haspopup": "true",
+									"aria-controls": "menu",
+							  }
+							: {})}
 					>
+						<span className="sr-only">Toggle navigation</span>
 						<svg
 							className="flex-shrink-0 size-4"
 							xmlns="http://www.w3.org/2000/svg"
@@ -67,27 +75,22 @@ function Navigation() {
 				</div>
 			</div>
 			<div
+				id="menu"
+				aria-hidden={!isNavOpen}
 				className={twMerge(
 					"overflow-hidden transition-all duration-300 basis-full grow sm:block",
 					isNavOpen ? "max-h-screen" : "max-h-0 sm:max-h-none",
 				)}
 			>
-				<div className="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5 py-2">
+				<NavElement className="flex flex-col items-start gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5 py-2">
 					{navigationItems.map((item) => (
 						<a
 							key={item.title}
 							href={item.href}
 							className={twMerge(
 								"relative",
-								"block",
 								"font-medium",
-								"focus:outline-none",
 								isCompliant && [
-									"focus:ring-1",
-									"focus:ring-white",
-									"focus:ring-offset-4",
-									"focus:ring-offset-blueZodiac",
-									"pb-1",
 									'before:content-[""]',
 									"before:absolute",
 									"before:w-full",
@@ -102,7 +105,10 @@ function Navigation() {
 									"before:hover:scale-x-100",
 									"before:hover:origin-left",
 								],
-								item.isActive && ["font-bold", "text-white/30"],
+								item.isActive &&
+									(isCompliant
+										? ["font-bold", "underline underline-offset-4"]
+										: ["font-bold", "text-white/30"]),
 							)}
 						>
 							{item.title}
@@ -113,9 +119,9 @@ function Navigation() {
 						label="WCAG"
 						value={isCompliant}
 						onChange={toggleCompliancy}
-						className="ml-8"
+						className="lg:ml-8"
 					/>
-				</div>
+				</NavElement>
 			</div>
 		</div>
 	);

src/components/NewsTeaser.tsx

@@ -5,30 +5,63 @@ import { Typography } from ".";
 
 type NewsTeaserProps = Omit<NewsItem, "key">;
 
-function NewsTeaser({ image, title, summary }: NewsTeaserProps) {
+function NewsTeaser({ image, title, summary, href }: NewsTeaserProps) {
 	const { isCompliant } = useAppState();
 
-	return (
+	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> */}
+			<a
+				href={href}
+				aria-hidden
+				tabIndex={-1}
+				target="_blank"
+				rel="noreferrer"
+				className="absolute inset-0"
+			/>
+
+			<img
+				src={image}
+				alt={title}
+				className="w-full aspect-video object-cover object-center order-1"
+			/>
+		</article>
+	) : (
 		<div className="relative mb-4 text-black flex flex-col pb-12 bg-white border-2">
 			<img
 				src={image}
-				alt={isCompliant ? title : ""}
+				alt=""
 				className="w-full aspect-video object-cover object-center"
 			/>
 			<div className="p-4">
 				<Typography variant="h5">{title}</Typography>
 				<p>{summary}</p>
 
 				<a
-					href="#!"
+					href={href}
 					target="_blank"
 					rel="noreferrer"
 					className="absolute bottom-0 right-0 aspect-square bg-background text-white p-2"
 				>
-					{isCompliant && (
-						<span className="sr-only">Read more about "{title}"</span>
-					)}
-					<ArrowRight aria-hidden={isCompliant as true} />
+					<ArrowRight title="" />
 				</a>
 			</div>
 		</div>

src/components/Switch.tsx

@@ -54,7 +54,10 @@ function Switch({ label, value, onChange, className, ...props }: SwitchProps) {
 					"after:w-5",
 					"after:transition-all",
 					"peer-checked:bg-green",
-					isCompliant && ["focus:ring-1", "focus:ring-white"],
+					isCompliant && [
+						"peer-focus:ring-2",
+						"peer-focus:ring-brightTurquoise",
+					],
 				)}
 			/>
 			<span className="ms-3 text-sm font-medium">{label}</span>

src/hooks/useForm.ts

@@ -10,7 +10,7 @@ const formErrors: Record<keyof ValidityState, string> = {
 	tooLong: "Please shorten this text.",
 	tooShort: "Please lengthen this text.",
 	typeMismatch: "Please match the requested format.",
-	valueMissing: "Please fill out this field.",
+	valueMissing: "Please fill in this field.",
 	valid: "",
 };
 
@@ -34,6 +34,11 @@ function useForm(formRef: RefObject<HTMLFormElement>) {
 		if (!isValid) {
 			if (!formRef.current?.checkValidity()) {
 				e.preventDefault();
+				(
+					formRef.current?.querySelector("input:invalid, textarea:invalid") as
+						| HTMLInputElement
+						| HTMLTextAreaElement
+				)?.focus();
 				return false;
 			}
 		}

src/index.css

@@ -14,4 +14,12 @@
   body.compliant p {
     @apply max-w-[60ch];
   }
+
+  body.compliant button,
+  body.compliant a,
+  body.compliant input,
+  body.compliant select,
+  body.compliant textarea {
+    @apply focus:outline-brightTurquoise focus:ring-offset-2;
+  }
 }