Merge pull request #1576 from jsit/fix/a11y-fixes-3

fix(a11y): Some accessibility fixes

.eslintrc.json

@@ -21,14 +21,10 @@
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-empty-function": 0,
     "arrow-body-style": 0,
-    "jsx-a11y/alt-text": 1,
     "jsx-a11y/anchor-is-valid": 1,
-    "jsx-a11y/aria-activedescendant-has-tabindex": 1,
     "jsx-a11y/aria-role": 1,
     "jsx-a11y/click-events-have-key-events": 1,
-    "jsx-a11y/interactive-supports-focus": 1,
     "jsx-a11y/no-static-element-interactions": 1,
-    "jsx-a11y/role-has-required-aria-props": 1,
     "curly": 0,
     "eol-last": 0,
     "eqeqeq": 0,

src/shared/components/app/app.tsx

@@ -35,7 +35,7 @@ export class App extends Component<any, any> {
           <div id="app" className="lemmy-site">
             <button
               type="button"
-              className="btn btn-text skip-link bg-light position-absolute start-0 z-3"
+              className="btn skip-link bg-light position-absolute start-0 z-3"
               onClick={linkEvent(this, this.handleJumpToContent)}
             >
               {I18NextService.i18n.t("jump_to_content", "Jump to content")}

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>
           )
         );
       }

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>
         </>
       );

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 p-0 bg-transparent border-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 && (