From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 23:44:22 +0000 (-0400)
Subject: fix(a11y): Change image remove button to true button element
X-Git-Url: http://these/git/README.zh.hant.md?a=commitdiff_plain;h=dccfc72e73770190d0bfe01a400274e39803aaa6;p=lemmy-ui.git

fix(a11y): Change image remove button to true button element
---

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index d61dafd..a93055e 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -275,10 +275,7 @@ hr {
 }
 
 .mini-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 2px;
+  display: block;
   height: 1.5em;
   width: 1.5em;
   background: rgba(0, 0, 0, 0.4);
diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index 5f68ea5..f217cfa 100644
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -39,7 +39,9 @@ export class ImageUploadForm extends Component<
         >
           {this.props.imageSrc ? (
             <span className="d-inline-block position-relative">
+              {/* TODO: Create "Current Iamge" translation for alt text */}
               <img
+                alt=""
                 src={this.props.imageSrc}
                 height={this.props.rounded ? 60 : ""}
                 width={this.props.rounded ? 60 : ""}
@@ -47,12 +49,14 @@ export class ImageUploadForm extends Component<
                   this.props.rounded ? "rounded-circle" : ""
                 }`}
               />
-              <a
+              <button
+                className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent"
+                type="button"
                 onClick={linkEvent(this, this.handleRemoveImage)}
                 aria-label={I18NextService.i18n.t("remove")}
               >
                 <Icon icon="x" classes="mini-overlay" />
-              </a>
+              </button>
             </span>
           ) : (
             <span className="btn btn-secondary">{this.props.uploadTitle}</span>