From d3b894334147f359554e1e1182a0dd7e7625e4bc Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 19:24:09 -0400
Subject: [PATCH 1/6] fix: Ignore rule for clickaway div; 'Esc' works for this

---
 src/shared/components/common/emoji-picker.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/components/common/emoji-picker.tsx b/src/shared/components/common/emoji-picker.tsx
index ba36d755f..cf4c9c6df 100644
--- a/src/shared/components/common/emoji-picker.tsx
+++ b/src/shared/components/common/emoji-picker.tsx
@@ -45,6 +45,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"

From dccfc72e73770190d0bfe01a400274e39803aaa6 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 19:44:22 -0400
Subject: [PATCH 2/6] fix(a11y): Change image remove button to true button
 element

---
 src/assets/css/main.css                            | 5 +----
 src/shared/components/common/image-upload-form.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index d61dafdae..a93055ed1 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 5f68ea54f..f217cfab5 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>

From 47aafed45f1c5322aaaefcf4f8fe2a5a97e60a8e Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 19:52:30 -0400
Subject: [PATCH 3/6] fix(a11y): Fix some a11y markup in Searchable Select
 component

---
 src/shared/components/common/searchable-select.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index a29fe1606..37a0c8367 100644
--- a/src/shared/components/common/searchable-select.tsx
+++ b/src/shared/components/common/searchable-select.tsx
@@ -106,8 +106,11 @@ 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-expanded={false}
           data-bs-toggle="dropdown"
           onClick={linkEvent(this, focusSearch)}
           ref={this.toggleButtonRef}
@@ -116,17 +119,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)}

From 36c1577718911de8c6fd2e0d2b9790ca4fd6665e Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 19:55:04 -0400
Subject: [PATCH 4/6] fix(a11y): Add alt text to emojis form

---
 src/shared/components/home/emojis-form.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index 8428a54fe..2ec41d053 100644
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@@ -125,6 +125,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                       >
                         {cv.image_url.length > 0 && (
                           <img
+                            alt={cv.alt_text}
                             className="icon-emoji-admin"
                             src={cv.image_url}
                           />

From 99de15b10b5b43c4203d796d062903ca1d318563 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 19:58:06 -0400
Subject: [PATCH 5/6] fix(a11y): Make foreground of 'remove image button' white

---
 src/shared/components/common/image-upload-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index f217cfab5..8ece39e93 100644
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -50,7 +50,7 @@ export class ImageUploadForm extends Component<
                 }`}
               />
               <button
-                className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent"
+                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")}

From 5365d16d62c9223093029b8ea2f79531a022662a Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 25 Jun 2023 01:03:06 -0400
Subject: [PATCH 6/6] fix(a11y): Restore aria-activedescendant

---
 src/shared/components/common/searchable-select.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index 37a0c8367..801cd8674 100644
--- a/src/shared/components/common/searchable-select.tsx
+++ b/src/shared/components/common/searchable-select.tsx
@@ -110,6 +110,7 @@ export class SearchableSelect extends Component<
           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)}