Fix some accessibility things

mybearworld · Jun 15, 2024 · 8d651ca · 8d651ca
1 parent edf6d66
commit 8d651ca
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 41 deletions.
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
@@ -125,7 +125,7 @@ const PostBase = memo((props: PostBaseProps) => {
         onDoubleClick={doReply}
         speaker={
           <User username={props.post.u}>
-            <button>
+            <button aria-label={props.post.u}>
               <ProfilePicture
                 size={props.reply ? "h-7 min-h-7 w-7 min-w-7" : undefined}
                 username={props.post.u}
@@ -294,16 +294,20 @@ export const AttachmentView = (props: AttachmentViewProps) => {
   if (props.attachment.mime.startsWith("image/")) {
     return (
       <Popup
+        triggerAsChild
         trigger={
-          <div className="relative h-36 w-36">
+          <button
+            aria-label={props.attachment.filename}
+            className="relative h-36 w-36"
+          >
             <img
               key={props.attachment.id}
               className="h-36 w-36 rounded-xl object-cover"
               src={`https://uploads.meower.org/attachments/${props.attachment.id}/${props.attachment.filename}?preview`}
               alt={props.attachment.filename}
               title={props.attachment.filename}
-              width={props.attachment.width}
-              height={props.attachment.height}
+              width="144"
+              height="144"
             />
             {props.onRemove ? (
               <Button
@@ -314,7 +318,7 @@ export const AttachmentView = (props: AttachmentViewProps) => {
                 <X />
               </Button>
             ) : undefined}
-          </div>
+          </button>
         }
       >
         <div className="flex flex-col gap-2">

diff --git a/src/components/Posts.tsx b/src/components/Posts.tsx
@@ -236,6 +236,7 @@ export const EnterPostBase = (props: EnterPostBaseProps) => {
   return (
     <form onSubmit={handlePost} className={twMerge("w-full")}>
       <Textarea
+        aria-label="Enter post"
         ref={textArea}
         value={postContent}
         onChange={(e) => setPostContent(e.currentTarget.value)}

diff --git a/src/components/ProfilePicture.tsx b/src/components/ProfilePicture.tsx
@@ -77,12 +77,12 @@ export const ProfilePictureBase = (props: ProfilePictureBaseProps) => {
             ? `https://uploads.meower.org/icons/${props.pfp.avatar}`
             : profilePictures.get(props.pfp.pfp_data ?? 500)
         }
+        aria-hidden
       />
       {props.online ? (
-        <div
-          className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full border border-green-600 bg-green-400 dark:border-green-500 dark:bg-green-600 "
-          aria-label="Online"
-        />
+        <div className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full border border-green-600 bg-green-400 dark:border-green-500 dark:bg-green-600">
+          <span className="sr-only">Online</span>
+        </div>
       ) : undefined}
     </div>
   );

diff --git a/src/components/UserView.tsx b/src/components/UserView.tsx
@@ -1,5 +1,5 @@
 import { twMerge } from "tailwind-merge";
-import { MouseEventHandler } from "react";
+import { MouseEventHandler, forwardRef } from "react";
 import { ProfilePicture } from "./ProfilePicture";
 
 export type UserViewProps = {
@@ -9,34 +9,37 @@ export type UserViewProps = {
   disabled?: boolean;
   secondary?: boolean;
 };
-export const UserView = (props: UserViewProps) => {
-  return (
-    <button
-      className={twMerge(
-        "flex w-full items-center gap-2 bg-white px-2 py-1 dark:bg-gray-950",
-        props.secondary
-          ? "bg-white dark:bg-gray-900"
-          : "bg-white dark:bg-gray-950",
-        props.disabled
-          ? ""
-          : props.secondary
-            ? "hover:bg-gray-100 dark:hover:bg-gray-800"
-            : "hover:bg-gray-100 dark:hover:bg-gray-900",
-      )}
-      onClick={props.onClick}
-      disabled={props.disabled}
-    >
-      <ProfilePicture
-        className="inline-block"
-        username={props.username}
-        size="h-8 min-h-8 w-8 min-w-8"
-      />
-      <div>
-        {props.username}{" "}
-        {props.text ? (
-          <span className="text-sm">({props.text})</span>
-        ) : undefined}
-      </div>
-    </button>
-  );
-};
+export const UserView = forwardRef<HTMLButtonElement, UserViewProps>(
+  (props: UserViewProps, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={twMerge(
+          "flex w-full items-center gap-2 bg-white px-2 py-1 dark:bg-gray-950",
+          props.secondary
+            ? "bg-white dark:bg-gray-900"
+            : "bg-white dark:bg-gray-950",
+          props.disabled
+            ? ""
+            : props.secondary
+              ? "hover:bg-gray-100 dark:hover:bg-gray-800"
+              : "hover:bg-gray-100 dark:hover:bg-gray-900",
+        )}
+        onClick={props.onClick}
+        disabled={props.disabled}
+      >
+        <ProfilePicture
+          className="inline-block"
+          username={props.username}
+          size="h-8 min-h-8 w-8 min-w-8"
+        />
+        <div>
+          {props.username}{" "}
+          {props.text ? (
+            <span className="text-sm">({props.text})</span>
+          ) : undefined}
+        </div>
+      </button>
+    );
+  },
+);