fix(a11y): Change the look and behavior of some file upload fields

src/assets/css/main.css

@@ -88,6 +88,15 @@
   color: var(--bs-gray) !important;
 }
 
+input[type="file"]::file-selector-button {
+  font: inherit;
+  border: 0;
+  padding: 0.375em 0.75em;
+  border-radius: var(--bs-border-radius);
+  background-color: var(--bs-secondary);
+  color: var(--bs-white);
+}
+
 .icon {
   display: inline-grid;
   display: inline-flex;

src/shared/components/common/image-upload-form.tsx

@@ -33,38 +33,34 @@ export class ImageUploadForm extends Component<
   render() {
     return (
       <form className="image-upload-form d-inline">
-        <label htmlFor={this.id} className="pointer text-muted small fw-bold">
+        {this.props.imageSrc && (
-          {this.props.imageSrc ? (
+          <span className="d-inline-block position-relative">
-            <span className="d-inline-block position-relative">
+            {/* TODO: Create "Current Iamge" translation for alt text */}
-              {/* TODO: Create "Current Iamge" translation for alt text */}
+            <img
-              <img
+              alt=""
-                alt=""
+              src={this.props.imageSrc}
-                src={this.props.imageSrc}
+              height={this.props.rounded ? 60 : ""}
-                height={this.props.rounded ? 60 : ""}
+              width={this.props.rounded ? 60 : ""}
-                width={this.props.rounded ? 60 : ""}
+              className={`img-fluid ${
-                className={`img-fluid ${
+                this.props.rounded ? "rounded-circle" : ""
-                  this.props.rounded ? "rounded-circle" : ""
+              }`}
-                }`}
+            />
-              />
+            <button
-              <button
+              className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
-                className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
+              type="button"
-                type="button"
+              onClick={linkEvent(this, this.handleRemoveImage)}
-                onClick={linkEvent(this, this.handleRemoveImage)}
+              aria-label={I18NextService.i18n.t("remove")}
-                aria-label={I18NextService.i18n.t("remove")}
+            >
-              >
+              <Icon icon="x" classes="mini-overlay" />
-                <Icon icon="x" classes="mini-overlay" />
+            </button>
-              </button>
+          </span>
-            </span>
+        )}
-          ) : (
-            <span className="btn btn-secondary">{this.props.uploadTitle}</span>
-          )}
-        </label>
         <input
           id={this.id}
           type="file"
           accept="image/*,video/*"
+          className="small"
           name={this.id}
-          className="d-none"
           disabled={!UserService.Instance.myUserInfo}
           onChange={linkEvent(this, this.handleImageUpload)}
         />

src/shared/components/home/emojis-form.tsx

@@ -87,7 +87,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
           </div>
         )}
         <div className="table-responsive">
-          <table id="emojis_table" className="table table-sm table-hover">
+          <table
+            id="emojis_table"
+            className="table table-sm table-hover align-middle"
+          >
             <thead className="pointer">
               <tr>
                 <th>{I18NextService.i18n.t("column_emoji")}</th>
@@ -129,30 +132,30 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         />
                       )}
                       {cv.image_url.length === 0 && (
-                        <form>
+                        <label
-                          <label
+                          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                            className="btn btn-sm btn-secondary pointer"
+                          tabIndex={0}
-                            htmlFor={`file-uploader-${index}`}
+                          className="btn btn-sm btn-secondary pointer"
-                            data-tippy-content={I18NextService.i18n.t(
+                          htmlFor={`file-uploader-${index}`}
-                              "upload_image"
+                          data-tippy-content={I18NextService.i18n.t(
+                            "upload_image"
+                          )}
+                        >
+                          {capitalizeFirstLetter(
+                            I18NextService.i18n.t("upload")
+                          )}
+                          <input
+                            name={`file-uploader-${index}`}
+                            id={`file-uploader-${index}`}
+                            type="file"
+                            accept="image/*"
+                            className="d-none"
+                            onChange={linkEvent(
+                              { form: this, index: index },
+                              this.handleImageUpload
                             )}
-                          >
+                          />
-                            {capitalizeFirstLetter(
+                        </label>
-                              I18NextService.i18n.t("upload")
-                            )}
-                            <input
-                              name={`file-uploader-${index}`}
-                              id={`file-uploader-${index}`}
-                              type="file"
-                              accept="image/*"
-                              className="d-none"
-                              onChange={linkEvent(
-                                { form: this, index: index },
-                                this.handleImageUpload
-                              )}
-                            />
-                          </label>
-                        </form>
                       )}
                     </td>
                     <td className="text-right">

src/shared/components/home/site-form.tsx

@@ -155,28 +155,32 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="input-group mb-3">
+        <div className="row mb-3">
-          <label className="me-2 col-form-label">
+          <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("icon")}
           </label>
-          <ImageUploadForm
+          <div className="col-sm-10">
-            uploadTitle={I18NextService.i18n.t("upload_icon")}
+            <ImageUploadForm
-            imageSrc={this.state.siteForm.icon}
+              uploadTitle={I18NextService.i18n.t("upload_icon")}
-            onUpload={this.handleIconUpload}
+              imageSrc={this.state.siteForm.icon}
-            onRemove={this.handleIconRemove}
+              onUpload={this.handleIconUpload}
-            rounded
+              onRemove={this.handleIconRemove}
-          />
+              rounded
+            />
+          </div>
         </div>
-        <div className="input-group mb-3">
+        <div className="row mb-3">
-          <label className="me-2 col-form-label">
+          <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("banner")}
           </label>
-          <ImageUploadForm
+          <div className="col-sm-10">
-            uploadTitle={I18NextService.i18n.t("upload_banner")}
+            <ImageUploadForm
-            imageSrc={this.state.siteForm.banner}
+              uploadTitle={I18NextService.i18n.t("upload_banner")}
-            onUpload={this.handleBannerUpload}
+              imageSrc={this.state.siteForm.banner}
-            onRemove={this.handleBannerRemove}
+              onUpload={this.handleBannerUpload}
-          />
+              onRemove={this.handleBannerRemove}
+            />
+          </div>
         </div>
         <div className="mb-3 row">
           <label className="col-12 col-form-label" htmlFor="site-desc">

src/shared/components/post/post-form.tsx

@@ -347,32 +347,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             <input
               type="url"
               id="post-url"
-              className="form-control"
+              className="form-control mb-3"
               value={url}
               onInput={linkEvent(this, handlePostUrlChange)}
               onPaste={linkEvent(this, handleImageUploadPaste)}
             />
             {this.renderSuggestedTitleCopy()}
-            <form>
-              <label
-                htmlFor="file-upload"
-                className={`${
-                  UserService.Instance.myUserInfo && "pointer"
-                } d-inline-block float-right text-muted fw-bold`}
-                data-tippy-content={I18NextService.i18n.t("upload_image")}
-              >
-                <Icon icon="image" classes="icon-inline" />
-              </label>
-              <input
-                id="file-upload"
-                type="file"
-                accept="image/*,video/*"
-                name="file"
-                className="d-none"
-                disabled={!UserService.Instance.myUserInfo}
-                onChange={linkEvent(this, handleImageUpload)}
-              />
-            </form>
             {url && validURL(url) && (
               <div>
                 <a
@@ -402,56 +382,73 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 </a>
               </div>
             )}
-            {this.state.imageLoading && <Spinner />}
-            {url && isImage(url) && (
-              <img src={url} className="img-fluid" alt="" />
-            )}
-            {this.state.imageDeleteUrl && (
-              <button
-                className="btn btn-danger btn-sm mt-2"
-                onClick={linkEvent(this, handleImageDelete)}
-                aria-label={I18NextService.i18n.t("delete")}
-                data-tippy-content={I18NextService.i18n.t("delete")}
-              >
-                <Icon icon="x" classes="icon-inline me-1" />
-                {capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
-              </button>
-            )}
-            {this.props.crossPosts && this.props.crossPosts.length > 0 && (
-              <>
-                <div className="my-1 text-muted small fw-bold">
-                  {I18NextService.i18n.t("cross_posts")}
-                </div>
-                <PostListings
-                  showCommunity
-                  posts={this.props.crossPosts}
-                  enableDownvotes={this.props.enableDownvotes}
-                  enableNsfw={this.props.enableNsfw}
-                  allLanguages={this.props.allLanguages}
-                  siteLanguages={this.props.siteLanguages}
-                  viewOnly
-                  // All of these are unused, since its view only
-                  onPostEdit={() => {}}
-                  onPostVote={() => {}}
-                  onPostReport={() => {}}
-                  onBlockPerson={() => {}}
-                  onLockPost={() => {}}
-                  onDeletePost={() => {}}
-                  onRemovePost={() => {}}
-                  onSavePost={() => {}}
-                  onFeaturePost={() => {}}
-                  onPurgePerson={() => {}}
-                  onPurgePost={() => {}}
-                  onBanPersonFromCommunity={() => {}}
-                  onBanPerson={() => {}}
-                  onAddModToCommunity={() => {}}
-                  onAddAdmin={() => {}}
-                  onTransferCommunity={() => {}}
-                />
-              </>
-            )}
           </div>
         </div>
+
+        <div className="mb-3 row">
+          <label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
+            {capitalizeFirstLetter(I18NextService.i18n.t("image"))}
+            <Icon icon="image" classes="icon-inline ms-1" />
+          </label>
+          <input
+            id="file-upload"
+            type="file"
+            accept="image/*,video/*"
+            name="file"
+            className="small col-sm-10"
+            disabled={!UserService.Instance.myUserInfo}
+            onChange={linkEvent(this, handleImageUpload)}
+          />
+          {this.state.imageLoading && <Spinner />}
+          {url && isImage(url) && (
+            <img src={url} className="img-fluid" alt="" />
+          )}
+          {this.state.imageDeleteUrl && (
+            <button
+              className="btn btn-danger btn-sm mt-2"
+              onClick={linkEvent(this, handleImageDelete)}
+              aria-label={I18NextService.i18n.t("delete")}
+              data-tippy-content={I18NextService.i18n.t("delete")}
+            >
+              <Icon icon="x" classes="icon-inline me-1" />
+              {capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
+            </button>
+          )}
+          {this.props.crossPosts && this.props.crossPosts.length > 0 && (
+            <>
+              <div className="my-1 text-muted small fw-bold">
+                {I18NextService.i18n.t("cross_posts")}
+              </div>
+              <PostListings
+                showCommunity
+                posts={this.props.crossPosts}
+                enableDownvotes={this.props.enableDownvotes}
+                enableNsfw={this.props.enableNsfw}
+                allLanguages={this.props.allLanguages}
+                siteLanguages={this.props.siteLanguages}
+                viewOnly
+                // All of these are unused, since its view only
+                onPostEdit={() => {}}
+                onPostVote={() => {}}
+                onPostReport={() => {}}
+                onBlockPerson={() => {}}
+                onLockPost={() => {}}
+                onDeletePost={() => {}}
+                onRemovePost={() => {}}
+                onSavePost={() => {}}
+                onFeaturePost={() => {}}
+                onPurgePerson={() => {}}
+                onPurgePost={() => {}}
+                onBanPersonFromCommunity={() => {}}
+                onBanPerson={() => {}}
+                onAddModToCommunity={() => {}}
+                onAddAdmin={() => {}}
+                onTransferCommunity={() => {}}
+              />
+            </>
+          )}
+        </div>
+
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="post-title">
             {I18NextService.i18n.t("title")}