From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 05:35:34 +0000 (-0400)
Subject: fix(a11y): Change divs and links to buttons
X-Git-Url: http://these/git/?a=commitdiff_plain;h=0cc354b26431202f9b67ed638ba3ec5be1c3cc61;p=lemmy-ui.git

fix(a11y): Change divs and links to buttons
---

diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 6e47832..081792a 100644
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -585,9 +585,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
 
         return (
           suggestedTitle && (
-            <div
-              className="mt-1 text-muted small fw-bold pointer"
-              role="button"
+            <button
+              type="button"
+              className="mt-1 small border-0 bg-transparent p-0 d-block text-muted fw-bold pointer"
               onClick={linkEvent(
                 { i: this, suggestedTitle },
                 copySuggestedTitle
@@ -595,7 +595,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             >
               {I18NextService.i18n.t("copy_suggested_title", { title: "" })}{" "}
               {suggestedTitle}
-            </div>
+            </button>
           )
         );
       }
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 48fb5c0..d2fe98d 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -248,12 +248,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             </a>
           </div>
           <div className="my-2 d-block d-sm-none">
-            <a
-              className="d-inline-block"
+            <button
+              type="button"
+              className="p-0 border-0 bg-transparent d-inline-block"
               onClick={linkEvent(this, this.handleImageExpandClick)}
             >
               <PictrsImage src={this.imageSrc} />
-            </a>
+            </button>
           </div>
         </>
       );
diff --git a/src/shared/components/private_message/private-message.tsx b/src/shared/components/private_message/private-message.tsx
index b31e1cd..c8f73eb 100644
--- a/src/shared/components/private_message/private-message.tsx
+++ b/src/shared/components/private_message/private-message.tsx
@@ -109,17 +109,17 @@ export class PrivateMessage extends Component<
               </span>
             </li>
             <li className="list-inline-item">
-              <div
-                role="button"
-                className="pointer text-monospace"
+              <button
+                type="button"
+                className="pointer text-monospace btn p-0 d-block"
                 onClick={linkEvent(this, this.handleMessageCollapse)}
               >
                 {this.state.collapsed ? (
-                  <Icon icon="plus-square" classes="icon-inline" />
+                  <Icon icon="plus-square" />
                 ) : (
-                  <Icon icon="minus-square" classes="icon-inline" />
+                  <Icon icon="minus-square" />
                 )}
-              </div>
+              </button>
             </li>
           </ul>
           {this.state.showEdit && (