Merge pull request #1570 from jsit/fix/a11y-fixes-2

fix(a11y): Fixing some small a11y issues

src/assets/css/main.css

@@ -276,10 +276,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);

src/shared/components/common/emoji-picker.tsx

@@ -50,6 +50,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
                   pickerOptions={{}}
                 ></EmojiMart>
               </div>
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
               <div
                 onClick={linkEvent(this, this.togglePicker)}
                 className="click-away-container"

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

@@ -36,7 +36,9 @@ export class ImageUploadForm extends Component<
         <label htmlFor={this.id} className="pointer text-muted small fw-bold">
           {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 : ""}
@@ -44,12 +46,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 text-white"
+                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>

src/shared/components/common/searchable-select.tsx

@@ -106,8 +106,12 @@ export class SearchableSelect extends Component<
         <button
           id={id}
           type="button"
+          role="combobox"
           className="form-select d-inline-block text-start"
           aria-haspopup="listbox"
+          aria-controls="searchable-select-input"
+          aria-activedescendant={options[selectedIndex].label}
+          aria-expanded={false}
           data-bs-toggle="dropdown"
           onClick={linkEvent(this, focusSearch)}
           ref={this.toggleButtonRef}
@@ -116,17 +120,14 @@ export class SearchableSelect extends Component<
             ? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
             : options[selectedIndex].label}
         </button>
-        <div
-          role="combobox"
-          aria-activedescendant={options[selectedIndex].label}
-          className="modlog-choices-font-size dropdown-menu w-100 p-2"
-        >
+        <div className="modlog-choices-font-size dropdown-menu w-100 p-2">
           <div className="input-group">
             <span className="input-group-text">
               {loading ? <Spinner /> : <Icon icon="search" />}
             </span>
             <input
               type="text"
+              id="searchable-select-input"
               className="form-control"
               ref={this.searchInputRef}
               onInput={linkEvent(this, handleSearch)}