e2e: added tests for accessibility (#78)

app/in/PostView/index.tsx

@@ -77,9 +77,14 @@ export const PostView = ({
           This is the end.
         </div>
       ) : (
-        <div className="flex w-fit flex-col items-stretch bg-secondary-100 p-4 shadow-2xl" ref={spinnerRef}>
-          <div className=" h-24 w-24 animate-spin rounded-full bg-secondary-600">
-            <div className=" mx-4 mt-4 h-16 w-16 rounded-full bg-secondary-100"></div>
+        <div
+          className="flex w-fit flex-col items-stretch bg-secondary-100 p-4 text-black shadow-2xl"
+          aria-label="Loading more posts..."
+          role="alert"
+          ref={spinnerRef}
+        >
+          <div className="h-24 w-24 animate-spin rounded-full bg-secondary-600 text-white">
+            <div className="mx-4 mt-4 h-16 w-16 rounded-full bg-secondary-100"></div>
             <div className="ml-12 h-4 w-2 bg-secondary-100"></div>
           </div>
         </div>

app/in/page.tsx

@@ -19,10 +19,10 @@ const Page = async () => {
   const user = await checkUser(sess.user._id.toString());
   const { posts } = (await req.json()) as responseJSON;
   return (
-    <div className="flex max-w-[100vw] flex-col items-center gap-8 p-24">
+    <main className="flex max-w-[100vw] flex-col items-center gap-8 p-24">
       <PostEditor />
       <PostView voted={user.data.voted} initPosts={posts} session={session as unknown as ObjectId} />
-    </div>
+    </main>
   );
 };
 

app/in/user/[id]/page.tsx

@@ -50,11 +50,11 @@ const Page = async ({ params }: { params: { id: string } }) => {
   span.end();
   return (
     <div className="flex w-screen max-w-[100vw] flex-col items-center gap-8 p-24">
-      <div className="  bg-secondary-100 shadow-2xl">
+      <div className=" bg-secondary-100 shadow-2xl">
         <div className="grid grid-cols-2 items-start self-stretch p-4">
           {user ? (
             <>
-              <div className=" col-span-full">
+              <div className="col-span-full">
                 <h1 className="text-xl font-bold">User profile</h1>
                 <div className="p-4">
                   <div className="flex flex-row gap-4 p-2">

app/in/user/page.tsx

@@ -29,7 +29,7 @@ const Page = async () => {
 
   span.end();
   return (
-    <div className=" w-screen max-w-[100vw]  gap-8 p-24">
+    <div className="w-screen max-w-[100vw]  gap-8 p-24">
       <div className="grid grid-cols-2 bg-secondary-100 shadow-2xl">
         <div className="col-span-full p-8">
           <h1 className="col-span-full text-xl font-bold">Your profile</h1>

app/login/components/LoginForm/index.tsx

@@ -11,7 +11,7 @@ const LoginForm = () => {
   return (
     <>
       <div className="flex flex-col items-center gap-8">
-        <div key={1} className=" grid grid-cols-2 items-center gap-4">
+        <div key={1} className="grid grid-cols-2 items-center gap-4">
           <label htmlFor="email" className="text-lg font-bold">
             E-mail:{" "}
           </label>
@@ -39,7 +39,7 @@ const LoginForm = () => {
         </div>
         {error.type ? <Alert type={error.type}>{error.message}</Alert> : null}
         <div
-          className="mt-8 cursor-pointer rounded-xl bg-primary-600 p-2 text-secondary-200 hover:bg-primary-500"
+          className="mt-8 cursor-pointer rounded-xl bg-primary-600 p-2 text-secondary-100 hover:bg-primary-500"
           onClick={() => {
             if (!email || !pass) {
               seterror({ type: "warning", message: "Please type in your email and password" });

app/login/page.tsx

@@ -7,15 +7,15 @@ export const metadata: Metadata = {
 
 const Page = () => {
   return (
-    <div className="grid h-screen w-screen place-content-center bg-secondary-200">
+    <main className="grid h-screen w-screen place-content-center bg-secondary-200">
       <div className="m-4 flex flex-col items-center rounded-xl bg-primary-200 p-8 text-center">
         <div className="mb-8">
           <h1 className="text-4xl">Welcome back!</h1>
           <h2 className="text-lg">Log in to your account</h2>
         </div>
         <LoginForm />
       </div>
-    </div>
+    </main>
   );
 };
 

app/page.tsx

@@ -18,20 +18,24 @@ const Page = async () => {
     <>
       <div className="flex flex-col items-center justify-start bg-secondary-200">
         <Header />
-        <div className="flex h-[40vh] w-screen flex-col items-center justify-center bg-primary-800 p-4 text-center text-secondary-200 lg:h-[60vh]">
+        <div
+          role="banner"
+          className="flex h-[40vh] w-screen flex-col items-center justify-center bg-primary-800 p-4 text-center text-secondary-200 lg:h-[60vh]"
+        >
           <h1 className="pb-8 text-3xl lg:text-6xl">WordBook - the Internet redefined</h1>
           <h2 className="text-lg lg:text-2xl">We merged Facebook and Wordpress and now we feel smug about it&trade;</h2>
         </div>
         <Link
+          role="button"
           href={"/signup"}
-          className="z-10 mt-[-1.5rem] rounded-full bg-primary-500 p-2 text-xl text-secondary-200 sm:mt-[-3.5rem] sm:p-8 sm:text-5xl"
+          className="z-10 mt-[-1.5rem] rounded-full bg-primary-500 p-2 text-xl text-secondary-100 sm:mt-[-3.5rem] sm:p-8 sm:text-5xl"
         >
           Sign up
         </Link>
-        <Link href={"/login"} className="z-20 font-bold text-primary-800 hover:underline">
+        <Link role="button" href={"/login"} className="z-20 font-bold text-primary-800 hover:underline">
           Or log in if you have an account
         </Link>
-        <div className="mt-[-3.5rem] grid w-screen grid-cols-1 pt-20 lg:grid-cols-2">
+        <main role="main" className="mt-[-3.5rem] grid w-screen grid-cols-1 pt-20 lg:grid-cols-2">
           <div className="grid place-content-center p-4 text-xl">
             <div>
               Usually, when a bakery or other shop wanted to be present on the Internet, they had to sign up on social
@@ -55,15 +59,15 @@ const Page = async () => {
               they can edit in thier browser - like in Wordpress, and an account which they can post something on, and
               have a photo galerry - just like on Facebook. It&apos;s{" "}
               <mark className="bg-primary-300 px-1 font-bold">simple</mark> - you can try yourself, if you sign up{" "}
-              <Link href={"/signup"} className="text-primary-500 hover:underline">
+              <Link href={"/signup"} className="font-bold text-primary-600 hover:underline">
                 here
               </Link>
             </div>
           </div>
           <div className="grid place-content-center p-4 lg:col-start-1 lg:row-start-2">
             <Image src="/static/computer.jpg" alt="Easy Wordbook usage" width={266} height={189} />
           </div>
-        </div>
+        </main>
       </div>
     </>
   );

app/signup/components/LoginForm/index.tsx

@@ -74,7 +74,7 @@ const LoginForm = () => {
           ></input>
         </div>,
 
-        <div key={4} className=" flex flex-col content-center items-center justify-items-center gap-4">
+        <div key={4} className="flex flex-col content-center items-center justify-items-center gap-4">
           {error.type ? (
             <div id="alert">
               <Alert type={error.type}>{error.message}</Alert>
@@ -83,7 +83,7 @@ const LoginForm = () => {
             <h2 className="col-span-2 text-xl">All done!</h2>
           )}
           <div
-            className="cursor-pointer rounded-xl bg-primary-600 p-4 text-2xl text-secondary-200 hover:bg-primary-500"
+            className="cursor-pointer rounded-xl bg-primary-600 p-4 text-2xl text-secondary-100 hover:bg-primary-500"
             onClick={() => {
               sumbit(state, seterror);
             }}

app/signup/page.tsx

@@ -9,15 +9,15 @@ export const metadata: Metadata = {
 const Page = () => {
   return (
     <>
-      <div className="grid h-screen w-screen place-content-center bg-secondary-200">
+      <main className="grid h-screen w-screen place-content-center bg-secondary-200">
         <div className="m-4 flex flex-col items-center rounded-xl bg-primary-200  p-8 text-center">
           <div className="mb-8">
             <h1 className="text-4xl">Welcome to Wordbook</h1>
             <h2 className="text-lg">We&apos;re sure you&apos;ll like it here</h2>
           </div>
           <LoginForm />
         </div>
-      </div>
+      </main>
     </>
   );
 };

components/Alert/index.tsx

@@ -14,9 +14,9 @@ export const Alert = ({ children, type }: { children: ReactNode; type: alertType
         <div
           role="alert"
           title="alert"
-          className=" flex flex-row flex-nowrap items-center border-l-8 border-vividred-600 bg-vividred-300 p-4 text-vividred-800"
+          className="flex flex-row flex-nowrap items-center border-l-8 border-vividred-600 bg-vividred-300 p-4 text-vividred-800"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className=" mr-4 w-8">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="mr-4 w-8">
             <circle cx="12" cy="12" r="10" className="fill-vividred-600" />
             <path
               className="fill-vividred-300"
@@ -31,7 +31,7 @@ export const Alert = ({ children, type }: { children: ReactNode; type: alertType
         <div
           role="alert"
           title="alert"
-          className=" flex flex-row flex-nowrap items-center border-l-8 border-vividyellow-600 bg-vividyellow-300 p-4 text-vividyellow-800"
+          className="flex flex-row flex-nowrap items-center border-l-8 border-vividyellow-600 bg-vividyellow-300 p-4 text-vividyellow-800"
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="mr-4 w-8">
             <path className="fill-vividyellow-600" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z" />
@@ -48,7 +48,7 @@ export const Alert = ({ children, type }: { children: ReactNode; type: alertType
         <div
           role="alert"
           title="alert"
-          className=" flex flex-row flex-nowrap items-center border-l-8 border-teal-600 bg-teal-300 p-4 text-teal-800"
+          className="flex flex-row flex-nowrap items-center border-l-8 border-teal-600 bg-teal-300 p-4 text-teal-800"
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="mr-4 w-8">
             <circle cx="12" cy="12" r="10" className="fill-teal-600" />
@@ -65,10 +65,10 @@ export const Alert = ({ children, type }: { children: ReactNode; type: alertType
         <div
           role="alert"
           title="alert"
-          className=" flex flex-row flex-nowrap items-center border-l-8 border-teal-600 bg-teal-300 p-4 text-teal-800"
+          className="flex flex-row flex-nowrap items-center border-l-8 border-teal-600 bg-teal-300 p-4 text-teal-800"
         >
-          <div className=" mr-4 h-8 w-8 animate-spin rounded-full bg-teal-600">
-            <div className=" ml-2 mr-4 mt-2 h-4 w-4 rounded-full bg-teal-300"></div>
+          <div className="mr-4 h-8 w-8 animate-spin rounded-full bg-teal-600">
+            <div className="ml-2 mr-4 mt-2 h-4 w-4 rounded-full bg-teal-300"></div>
             <div className="ml-3.5 h-2 w-1 bg-teal-300"></div>
           </div>
           <div className="text-xl font-bold">{children}</div>
@@ -79,9 +79,9 @@ export const Alert = ({ children, type }: { children: ReactNode; type: alertType
         <div
           role="alert"
           title="alert"
-          className=" flex flex-row flex-nowrap items-center border-l-8 border-lightblue-600 bg-lightblue-300 p-4 text-lightblue-800"
+          className="flex flex-row flex-nowrap items-center border-l-8 border-lightblue-600 bg-lightblue-300 p-4 text-lightblue-800"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className=" mr-4 w-8">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="mr-4 w-8">
             <path className="fill-lightblue-600" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z" />
             <path
               className="fill-lightblue-300"

components/FileUpload/index.tsx

@@ -50,6 +50,7 @@ export default function FileUploader(props: {
   return (
     <input
       type="file"
+      aria-label="add a file"
       onChange={() => void onImageFileChange}
       className="rounded-md bg-secondary-800 p-8 text-xl text-white shadow-inner shadow-secondary-500"
     />

components/Header/index.tsx

@@ -3,16 +3,24 @@ import { UserID } from "schemas/user";
 
 export const Header = ({ user }: { user?: UserID }) => {
   return (
-    <div className="sticky top-0 z-30 flex w-full flex-col items-center">
-      <input id="hamburgir" type="checkbox" className="peer sr-only" defaultChecked={true}></input>
+    <nav role="navigation" className="sticky top-0 z-30 flex w-full flex-col items-center">
+      <input
+        id="hamburgir"
+        type="checkbox"
+        className="peer sr-only"
+        aria-label="top bar toggle"
+        defaultChecked={true}
+      ></input>
 
       <div
         id="menu"
         className="top-0 flex w-full scale-y-100 flex-col items-center gap-2 bg-white p-2 shadow-2xl  peer-checked:max-sm:hidden sm:flex-row sm:items-baseline"
       >
-        <Link href="/in" className="text-xl font-bold sm:pr-8">
-          WordBook
-        </Link>
+        <h1>
+          <Link href="/in" className="text-xl font-bold sm:pr-8">
+            WordBook
+          </Link>
+        </h1>
         <Link href={"#"} className="mx-4 text-primary-600 hover:underline">
           About
         </Link>
@@ -24,15 +32,15 @@ export const Header = ({ user }: { user?: UserID }) => {
         </Link>
         {user ? (
           <div className="flex flex-row flex-wrap items-center justify-center sm:ml-auto">
-            <h3 className="hidden text-sm font-bold sm:mr-4 sm:block">{user.name}</h3>
+            <h2 className="hidden text-sm font-bold sm:mr-4 sm:block">{user.name}</h2>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="mt-4 h-8 w-full sm:mt-0 sm:w-8">
               <circle cx="12" cy="12" r="10" className="fill-primary-600" />
               <path
                 className="fill-primary-100"
                 d="M3.66 17.52A5 5 0 0 1 8 15h8a5 5 0 0 1 4.34 2.52 10 10 0 0 1-16.68 0zM12 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"
               />
             </svg>
-            <input type="checkbox" id="cb" className="peer sr-only"></input>
+            <input type="checkbox" id="cb" aria-label="toggle user details" className="peer sr-only"></input>
             <label
               htmlFor="cb"
               className="hidden w-full cursor-pointer place-content-center duration-200 peer-checked:scale-y-[-1] sm:grid sm:w-fit"
@@ -58,8 +66,7 @@ export const Header = ({ user }: { user?: UserID }) => {
                 Account settings
               </Link>
 
-              <a href={"/api/logout"} className=" mt-4 self-end text-vividred-600 hover:underline">
-                {/* not Link, we don't want to prefetch logout */}
+              <a href={"/api/logout"} className="mt-4 self-end text-vividred-600 hover:underline">
                 Log out
               </a>
             </div>
@@ -81,8 +88,8 @@ export const Header = ({ user }: { user?: UserID }) => {
       </div>
       <label
         id="switch"
-        role="button"
         htmlFor="hamburgir"
+        aria-label="switch for the top bar"
         className="grid w-full cursor-pointer place-content-center duration-200  peer-checked:scale-y-[-1] sm:hidden"
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-8">
@@ -93,6 +100,6 @@ export const Header = ({ user }: { user?: UserID }) => {
           />
         </svg>
       </label>
-    </div>
+    </nav>
   );
 };

components/PageSwitcher/index.tsx

@@ -33,12 +33,13 @@ export const PageSwitcher = ({
                   setPage((p) => (p === maxPages - 1 ? p : p + 1));
                 }
           }
+          aria-disabled={nextDisabled}
         >
           next >
         </div>
       )}
 
-      <span className=" flex flex-row  items-center justify-center justify-items-center gap-2">
+      <span className="flex flex-row  items-center justify-center justify-items-center gap-2">
         {numbers.map((number, i) => {
           return [
             <div

components/Post/index.tsx

@@ -24,7 +24,7 @@ export const Post = ({ post, votePost: _votePost }: { post: PostAuthorID; votePo
       <div className="flex w-fit flex-col items-stretch bg-secondary-100 shadow-2xl">
         <div className="flex flex-row gap-4 p-2">
           <Link href={`/in/user/${post.author._id.toString()}`} className="group">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-12">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="user icon" className="w-12">
               <circle cx="12" cy="12" r="10" className="fill-primary-600" />
               <path
                 className="fill-primary-100"
@@ -50,29 +50,30 @@ export const Post = ({ post, votePost: _votePost }: { post: PostAuthorID; votePo
             {post.content}
           </Markdown>
         </div>
-        <div className="flex flex-row flex-nowrap gap-4 p-4">
+        <div className="flex flex-row flex-nowrap items-center gap-4 p-4 font-mono tabular-nums">
           <div
-            className="cursor-pointer font-semibold text-green-300 hover:font-bold hover:text-green-500"
+            className="grid cursor-pointer place-content-center rounded-full bg-green-200 p-1 px-2 text-sm font-semibold text-green-900 outline outline-2 outline-green-900 hover:bg-green-400"
             onClick={() => {
               votePost(post._id, true);
             }}
           >
-            + {post.up}
+            <p>+ {post.up}</p>
           </div>
           <div
-            className="cursor-pointer font-semibold text-red-300 hover:font-bold hover:text-red-500"
+            className="grid cursor-pointer place-content-center rounded-full bg-red-200 p-1 px-2 text-sm font-semibold text-red-900 outline outline-2 outline-red-900 hover:bg-red-400"
             onClick={() => {
               votePost(post._id, false);
             }}
           >
-            - {post.down}
+            <p>- {post.down}</p>
           </div>
-          <div className="flex flex-row flex-nowrap gap-2 font-semibold text-primary-300 hover:font-bold hover:text-primary-600">
+          <div className="mt-1 flex flex-row flex-nowrap gap-2 font-semibold text-primary-300 hover:font-bold hover:text-primary-600">
             <svg
               onClick={() => {
                 setShowThread((q) => !q);
               }}
               height="800px"
+              aria-label="toggle comment thread"
               width="800px"
               version="1.1"
               className="h-8 w-8 cursor-pointer"
@@ -104,7 +105,12 @@ export const Post = ({ post, votePost: _votePost }: { post: PostAuthorID; votePo
                   <div className="bg-secondary-100 p-4 shadow-2xl">
                     <div className="flex flex-row gap-4 p-2">
                       <Link href={`/in/user/${comment.author._id.toString()}`} className="group">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-12">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          aria-label="user icon"
+                          className="w-12"
+                        >
                           <circle cx="12" cy="12" r="10" className="fill-primary-600" />
                           <path
                             className="fill-primary-100"

components/PostEditor/index.tsx

@@ -11,7 +11,8 @@ export const PostEditor = (props?: { submit?: typeof submit }) => {
   const [alert, setalert] = useState<alertMessage>({ type: null, message: "" });
   return (
     <div className="flex max-w-[1000px] flex-col items-end gap-4 px-4">
-      <div className="flex flex-col items-start gap-2 self-start">
+      <h1 className="w-full text-xl font-semibold">Write a post:</h1>
+      <div className="flex flex-col items-start self-start p-8 font-light">
         <span>Upload an image: </span>
         <FileUploader
           uploadedCallback={(filename: string) =>