adds aria-labels to relevant elements so that it passes the lighthous…

…e test
fiatjaf · Nov 18, 2023 · 15e0919 · 15e0919
1 parent 04207bf
commit 15e0919
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/Editor.jsx b/src/Editor.jsx
@@ -42,14 +42,18 @@ export function Editor({
           value={comment}
           readOnly={!editable}
           onChange={e => setComment(e.target.value)}
+          aria-label="comment text area"
         />
         <InputSectionRow2>
           <Notices>
             {notices.map(notice => (
               <Notice key={notice.text}>{notice.text}</Notice>
             ))}
           </Notices>
-          <InfoButton onClick={() => setIsInfoOpen(!isInfoOpen)}>
+          <InfoButton
+            onClick={() => setIsInfoOpen(!isInfoOpen)}
+            aria-label="info button"
+          >
             <SvgInfo
               xmlns="http://www.w3.org/2000/svg"
               x="0px"
@@ -67,6 +71,9 @@ export function Editor({
           <PostButton
             onClick={publicKey ? publishEvent : establishNostrKey}
             disabled={!editable}
+            aria-label={
+              publicKey ? (editable ? 'Post comment' : 'Submitting') : 'Comment'
+            }
           >
             {publicKey ? (editable ? 'Post comment' : 'Submitting') : 'Comment'}
           </PostButton>

diff --git a/src/ReplyButton.jsx b/src/ReplyButton.jsx
@@ -20,7 +20,7 @@ const ChatBubbleIcon = () => (
 
 const ReplyButton = ({onClick}) => {
   return (
-    <GhostButton type="button" onClick={onClick}>
+    <GhostButton type="button" onClick={onClick} aria-label="reply button">
       <ChatBubbleIcon />
     </GhostButton>
   )

diff --git a/src/Thread.jsx b/src/Thread.jsx
@@ -34,7 +34,10 @@ export default function Thread({
             href={'nostr:' + nip19.npubEncode(thread.pubkey)}
           >
             {getImage(metadata, thread.pubkey) && (
-              <CommentAuthorImage src={getImage(metadata, thread.pubkey)} />
+              <CommentAuthorImage
+                src={getImage(metadata, thread.pubkey)}
+                aria-label="comment author image"
+              />
             )}
             {getName(metadata, thread.pubkey)}
           </CommentAuthor>{' '}