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 6e478326763ae6ffb9899fff637c816ffd6ed48d..081792aa0e35841df6cefbe79728d653946621a4 100644 (file)
--- 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 48fb5c07172bb8668f003f9c4f8ed2e9d03fa6b8..d2fe98dea81da56f12dfe56214134f36cb5af9af 100644 (file)
--- 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 b31e1cdbe8801e60843b3a564cc32d89d445bc1b..c8f73eb3e4e7a7136a8e75cd1fc29ff51e0a24e3 100644 (file)
--- 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 && (