add role="alert" in ErrorList

Author: kettanaito

exercises/02.authentication/02.problem.2fa/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1" role="alert">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}

exercises/02.authentication/02.solution.2fa/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1" role="alert">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}

exercises/02.authentication/03.problem.passkeys/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1" role="alert">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}

exercises/02.authentication/03.solution.passkeys/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1" role="alert">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}

exercises/02.authentication/03.solution.passkeys/tests/e2e/authentication-passkeys.test.ts

@@ -72,8 +72,10 @@ test('displays an error when authenticating via a passkey fails', async ({
 	await page.getByRole('button', { name: 'Login with a passkey' }).click()
 
 	await expect(
-		page.getByText(
-			'Failed to authenticate with passkey: The operation either timed out or was not allowed',
-		),
+		page
+			.getByRole('alert')
+			.getByText(
+				'Failed to authenticate with passkey: The operation either timed out or was not allowed',
+			),
 	).toBeVisible()
 })

exercises/02.authentication/04.problem.protected-logic/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1" role="alert">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}

exercises/02.authentication/04.solution.protected-logic/app/components/forms.tsx

@@ -24,7 +24,7 @@ export function ErrorList({
 	const errorsToRender = errors?.filter(Boolean)
 	if (!errorsToRender?.length) return null
 	return (
-		<ul id={id} className="flex flex-col gap-1">
+		<ul id={id} className="flex flex-col gap-1" role="alert">
 			{errorsToRender.map((e) => (
 				<li key={e} className="text-foreground-destructive text-[10px]">
 					{e}