From 0ad285b16674fb98dc17fb636a9f1a0dbb9dd2a4 Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <abias1122@gmail.com>
Date: Fri, 23 Jun 2023 22:46:33 -0400
Subject: [PATCH 01/11] Fix emojis being unable to save

---
 src/shared/components/home/admin-settings.tsx |  15 --
 src/shared/components/home/emojis-form.tsx    | 192 +++++++++++-------
 2 files changed, 115 insertions(+), 92 deletions(-)

diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index 7ac69fed..76877d84 100644
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@@ -44,7 +44,6 @@ interface AdminSettingsState {
   instancesRes: RequestState<GetFederatedInstancesResponse>;
   bannedRes: RequestState<BannedPersonsResponse>;
   leaveAdminTeamRes: RequestState<GetSiteResponse>;
-  emojiLoading: boolean;
   loading: boolean;
   themeList: string[];
   isIsomorphic: boolean;
@@ -59,7 +58,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     bannedRes: { state: "empty" },
     instancesRes: { state: "empty" },
     leaveAdminTeamRes: { state: "empty" },
-    emojiLoading: false,
     loading: false,
     themeList: [],
     isIsomorphic: false,
@@ -215,7 +213,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                       onCreate={this.handleCreateEmoji}
                       onDelete={this.handleDeleteEmoji}
                       onEdit={this.handleEditEmoji}
-                      loading={this.state.emojiLoading}
                     />
                   </div>
                 </div>
@@ -345,35 +342,23 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
   }
 
   async handleEditEmoji(form: EditCustomEmoji) {
-    this.setState({ emojiLoading: true });
-
     const res = await HttpService.client.editCustomEmoji(form);
     if (res.state === "success") {
       updateEmojiDataModel(res.data.custom_emoji);
     }
-
-    this.setState({ emojiLoading: false });
   }
 
   async handleDeleteEmoji(form: DeleteCustomEmoji) {
-    this.setState({ emojiLoading: true });
-
     const res = await HttpService.client.deleteCustomEmoji(form);
     if (res.state === "success") {
       removeFromEmojiDataModel(res.data.id);
     }
-
-    this.setState({ emojiLoading: false });
   }
 
   async handleCreateEmoji(form: CreateCustomEmoji) {
-    this.setState({ emojiLoading: true });
-
     const res = await HttpService.client.createCustomEmoji(form);
     if (res.state === "success") {
       updateEmojiDataModel(res.data.custom_emoji);
     }
-
-    this.setState({ emojiLoading: false });
   }
 }
diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index 8428a54f..caf8221c 100644
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@@ -1,4 +1,5 @@
 import { myAuthRequired, setIsoData } from "@utils/app";
+import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
 import {
   CreateCustomEmoji,
@@ -11,14 +12,13 @@ import { HttpService, I18NextService } from "../../services";
 import { pictrsDeleteToast, toast } from "../../toast";
 import { EmojiMart } from "../common/emoji-mart";
 import { HtmlTags } from "../common/html-tags";
-import { Icon } from "../common/icon";
+import { Icon, Spinner } from "../common/icon";
 import { Paginator } from "../common/paginator";
 
 interface EmojiFormProps {
   onEdit(form: EditCustomEmoji): void;
   onCreate(form: CreateCustomEmoji): void;
   onDelete(form: DeleteCustomEmoji): void;
-  loading: boolean;
 }
 
 interface EmojiFormState {
@@ -36,6 +36,7 @@ interface CustomEmojiViewForm {
   keywords: string;
   changed: boolean;
   page: number;
+  loading: boolean;
 }
 
 export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
@@ -52,6 +53,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
       keywords: x.keywords.map(x => x.keyword).join(" "),
       changed: false,
       page: 1 + Math.floor(index / this.itemsPerPage),
+      loading: false,
     })),
     page: 1,
   };
@@ -119,33 +121,39 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                 .map((cv, index) => (
                   <tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
                     <td style="text-align:center;">
-                      <label
-                        htmlFor={index.toString()}
-                        className="pointer text-muted small font-weight-bold"
-                      >
-                        {cv.image_url.length > 0 && (
-                          <img
-                            className="icon-emoji-admin"
-                            src={cv.image_url}
-                          />
-                        )}
-                        {cv.image_url.length == 0 && (
-                          <span className="btn btn-sm btn-secondary">
-                            Upload
-                          </span>
-                        )}
-                      </label>
-                      <input
-                        name={index.toString()}
-                        id={index.toString()}
-                        type="file"
-                        accept="image/*"
-                        className="d-none"
-                        onChange={linkEvent(
-                          { form: this, index: index },
-                          this.handleImageUpload
-                        )}
-                      />
+                      {cv.image_url.length > 0 && (
+                        <img
+                          className="icon-emoji-admin"
+                          src={cv.image_url}
+                          alt={cv.alt_text}
+                        />
+                      )}
+                      {cv.image_url.length === 0 && (
+                        <form>
+                          <label
+                            className="btn btn-sm btn-secondary pointer"
+                            htmlFor={`file-uploader-${index}`}
+                            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
+                              )}
+                            />
+                          </label>
+                        </form>
+                      )}
                     </td>
                     <td className="text-right">
                       <input
@@ -213,8 +221,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         <span title={this.getEditTooltip(cv)}>
                           <button
                             className={
-                              (cv.changed ? "text-success " : "text-muted ") +
-                              "btn btn-link btn-animate"
+                              (this.canEdit(cv)
+                                ? "text-success "
+                                : "text-muted ") + "btn btn-link btn-animate"
                             }
                             onClick={linkEvent(
                               { i: this, cv: cv },
@@ -222,17 +231,15 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                             )}
                             data-tippy-content={I18NextService.i18n.t("save")}
                             aria-label={I18NextService.i18n.t("save")}
-                            disabled={
-                              this.props.loading ||
-                              !this.canEdit(cv) ||
-                              !cv.changed
-                            }
+                            disabled={!this.canEdit(cv)}
                           >
-                            {/* <Icon
-                                                            icon="edit"
-                                                            classes={`icon-inline`}
-                                                        /> */}
-                            Save
+                            {cv.loading ? (
+                              <Spinner />
+                            ) : (
+                              capitalizeFirstLetter(
+                                I18NextService.i18n.t("save")
+                              )
+                            )}
                           </button>
                         </span>
                         <button
@@ -243,7 +250,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                           )}
                           data-tippy-content={I18NextService.i18n.t("delete")}
                           aria-label={I18NextService.i18n.t("delete")}
-                          disabled={this.props.loading}
+                          disabled={cv.loading}
                           title={I18NextService.i18n.t("delete")}
                         >
                           <Icon
@@ -281,7 +288,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
       this.state.customEmojis.filter(
         x => x.shortcode == cv.shortcode && x.id != cv.id
       ).length == 0;
-    return noEmptyFields && noDuplicateShortCodes;
+    return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
   }
 
   getEditTooltip(cv: CustomEmojiViewForm) {
@@ -339,19 +346,36 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
   }
 
   handleEmojiImageUrlChange(
-    props: { form: EmojiForm; index: number; overrideValue: string | null },
+    {
+      form,
+      index,
+      overrideValue,
+    }: { form: EmojiForm; index: number; overrideValue: string | null },
     event: any
   ) {
-    const custom_emojis = [...props.form.state.customEmojis];
-    const pagedIndex =
-      (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
-    const item = {
-      ...props.form.state.customEmojis[pagedIndex],
-      image_url: props.overrideValue ?? event.target.value,
-      changed: true,
-    };
-    custom_emojis[Number(pagedIndex)] = item;
-    props.form.setState({ customEmojis: custom_emojis });
+    form.setState(prevState => {
+      const custom_emojis = [...form.state.customEmojis];
+      const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
+      const item = {
+        ...form.state.customEmojis[pagedIndex],
+        image_url: overrideValue ?? event.target.value,
+        changed: true,
+      };
+      custom_emojis[Number(pagedIndex)] = item;
+      return {
+        ...prevState,
+        customEmojis: prevState.customEmojis.map((ce, i) =>
+          i === pagedIndex
+            ? {
+                ...ce,
+                image_url: overrideValue ?? event.target.value,
+                changed: true,
+                loading: false,
+              }
+            : ce
+        ),
+      };
+    });
   }
 
   handleEmojiAltTextChange(
@@ -409,7 +433,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
       .split(" ")
       .filter(x => x.length > 0) as string[];
     const uniqueKeywords = Array.from(new Set(keywords));
-    if (d.cv.id != 0) {
+    if (d.cv.id !== 0) {
       d.i.props.onEdit({
         id: d.cv.id,
         category: d.cv.category,
@@ -432,24 +456,33 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
 
   handleAddEmojiClick(form: EmojiForm, event: any) {
     event.preventDefault();
-    const custom_emojis = [...form.state.customEmojis];
-    const page =
-      1 + Math.floor(form.state.customEmojis.length / form.itemsPerPage);
-    const item: CustomEmojiViewForm = {
-      id: 0,
-      shortcode: "",
-      alt_text: "",
-      category: "",
-      image_url: "",
-      keywords: "",
-      changed: true,
-      page: page,
-    };
-    custom_emojis.push(item);
-    form.setState({ customEmojis: custom_emojis, page: page });
+    form.setState(prevState => {
+      const page =
+        1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
+      const item: CustomEmojiViewForm = {
+        id: 0,
+        shortcode: "",
+        alt_text: "",
+        category: "",
+        image_url: "",
+        keywords: "",
+        changed: false,
+        page: page,
+        loading: false,
+      };
+
+      return {
+        ...prevState,
+        customEmojis: [...prevState.customEmojis, item],
+        page,
+      };
+    });
   }
 
-  handleImageUpload(props: { form: EmojiForm; index: number }, event: any) {
+  handleImageUpload(
+    { form, index }: { form: EmojiForm; index: number },
+    event: any
+  ) {
     let file: any;
     if (event.target) {
       event.preventDefault();
@@ -458,20 +491,25 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
       file = event;
     }
 
+    form.setState(prevState => ({
+      ...prevState,
+      customEmojis: prevState.customEmojis.map((cv, i) =>
+        i === index ? { ...cv, loading: true } : cv
+      ),
+    }));
+
     HttpService.client.uploadImage({ image: file }).then(res => {
       console.log("pictrs upload:");
       console.log(res);
       if (res.state === "success") {
         if (res.data.msg === "ok") {
           pictrsDeleteToast(file.name, res.data.delete_url as string);
-        } else {
-          toast(JSON.stringify(res), "danger");
-          const hash = res.data.files?.at(0)?.file;
-          const url = `${res.data.url}/${hash}`;
-          props.form.handleEmojiImageUrlChange(
-            { form: props.form, index: props.index, overrideValue: url },
+          form.handleEmojiImageUrlChange(
+            { form: form, index: index, overrideValue: res.data.url as string },
             event
           );
+        } else {
+          toast(JSON.stringify(res), "danger");
         }
       } else if (res.state === "failed") {
         console.error(res.msg);

From 83ab9e4d8e7c202f1bf002ccdcceb3551e0d5aba Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 18:41:29 -0400
Subject: [PATCH 02/11] fix: Fix some Bootstrap 5 font classes

---
 src/shared/components/comment/comment-node.tsx     |  4 ++--
 src/shared/components/common/image-upload-form.tsx |  5 +----
 src/shared/components/common/markdown-textarea.tsx |  4 ++--
 src/shared/components/common/moment-time.tsx       |  2 +-
 src/shared/components/community/sidebar.tsx        |  8 ++++----
 src/shared/components/home/emojis-form.tsx         |  2 +-
 src/shared/components/home/login.tsx               |  2 +-
 src/shared/components/post/metadata-card.tsx       |  2 +-
 src/shared/components/post/post-form.tsx           | 14 +++++++-------
 src/shared/components/post/post-listing.tsx        | 10 +++++-----
 .../private_message/private-message-form.tsx       |  2 +-
 .../components/private_message/private-message.tsx |  2 +-
 12 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 41f67e6c..5e59d161 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -367,7 +367,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       <Spinner />
                     ) : (
                       <span
-                        className="me-1 font-weight-bold"
+                        className="me-1 fw-bold"
                         aria-label={I18NextService.i18n.t("number_of_points", {
                           count: Number(this.commentView.counts.score),
                           formattedCount: numToSI(
@@ -420,7 +420,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     }
                   />
                 )}
-                <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
+                <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
                   {this.props.showContext && this.linkBtn()}
                   {this.props.markable && (
                     <button
diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index 5f68ea54..283a87ed 100644
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -33,10 +33,7 @@ export class ImageUploadForm extends Component<
   render() {
     return (
       <form className="image-upload-form d-inline">
-        <label
-          htmlFor={this.id}
-          className="pointer text-muted small font-weight-bold"
-        >
+        <label htmlFor={this.id} className="pointer text-muted small fw-bold">
           {this.props.imageSrc ? (
             <span className="d-inline-block position-relative">
               <img
diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 2d306dca..9cfee553 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -154,7 +154,7 @@ export class MarkdownTextArea extends Component<
                   onEmojiClick={e => this.handleEmoji(this, e)}
                   disabled={this.isDisabled}
                 ></EmojiPicker>
-                <form className="btn btn-sm text-muted font-weight-bold">
+                <form className="btn btn-sm text-muted fw-bold">
                   <label
                     htmlFor={`file-upload-${this.id}`}
                     className={`mb-0 ${
@@ -197,7 +197,7 @@ export class MarkdownTextArea extends Component<
                 {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
                 <a
                   href={markdownHelpUrl}
-                  className="btn btn-sm text-muted font-weight-bold"
+                  className="btn btn-sm text-muted fw-bold"
                   title={I18NextService.i18n.t("formatting_help")}
                   rel={relTags}
                 >
diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx
index 7c5693ed..f216adf0 100644
--- a/src/shared/components/common/moment-time.tsx
+++ b/src/shared/components/common/moment-time.tsx
@@ -39,7 +39,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       return (
         <span
           data-tippy-content={this.createdAndModifiedTimes()}
-          className="moment-time font-italics pointer unselectable"
+          className="moment-time fst-italics pointer unselectable"
         >
           <Icon icon="edit-2" classes="icon-inline me-1" />
           {formatPastDate(this.props.updated)}
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 81a5dafc..733c19a1 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -204,17 +204,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             </button>
           )}
           {community.removed && (
-            <small className="me-2 text-muted font-italic">
+            <small className="me-2 text-muted fst-italic">
               {I18NextService.i18n.t("removed")}
             </small>
           )}
           {community.deleted && (
-            <small className="me-2 text-muted font-italic">
+            <small className="me-2 text-muted fst-italic">
               {I18NextService.i18n.t("deleted")}
             </small>
           )}
           {community.nsfw && (
-            <small className="me-2 text-muted font-italic">
+            <small className="me-2 text-muted fst-italic">
               {I18NextService.i18n.t("nsfw")}
             </small>
           )}
@@ -309,7 +309,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const community_view = this.props.community_view;
     return (
       <>
-        <ul className="list-inline mb-1 text-muted font-weight-bold">
+        <ul className="list-inline mb-1 text-muted fw-bold">
           {amMod(this.props.moderators) && (
             <>
               <li className="list-inline-item-action">
diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index 8428a54f..e0fa6807 100644
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@@ -121,7 +121,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                     <td style="text-align:center;">
                       <label
                         htmlFor={index.toString()}
-                        className="pointer text-muted small font-weight-bold"
+                        className="pointer text-muted small fw-bold"
                       >
                         {cv.image_url.length > 0 && (
                           <img
diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index 1853a82b..4dd64665 100644
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -108,7 +108,7 @@ export class Login extends Component<any, State> {
               <button
                 type="button"
                 onClick={linkEvent(this, this.handlePasswordReset)}
-                className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
+                className="btn p-0 btn-link d-inline-block float-right text-muted small fw-bold pointer-events not-allowed"
                 disabled={
                   !!this.state.form.username_or_email &&
                   !validEmail(this.state.form.username_or_email)
diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index 9ba0cbaf..2d770d44 100644
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -43,7 +43,7 @@ export class MetadataCard extends Component<
                       </h5>
                       <span className="d-inline-block ms-2 mb-2 small text-muted">
                         <a
-                          className="text-muted font-italic"
+                          className="text-muted fst-italic"
                           href={post.url}
                           rel={relTags}
                         >
diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index ebea4324..6e478326 100644
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -358,7 +358,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 htmlFor="file-upload"
                 className={`${
                   UserService.Instance.myUserInfo && "pointer"
-                } d-inline-block float-right text-muted font-weight-bold`}
+                } d-inline-block float-right text-muted fw-bold`}
                 data-tippy-content={I18NextService.i18n.t("upload_image")}
               >
                 <Icon icon="image" classes="icon-inline" />
@@ -377,7 +377,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               <div>
                 <a
                   href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
-                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small fw-bold"
                   rel={relTags}
                 >
                   archive.org {I18NextService.i18n.t("archive_link")}
@@ -386,7 +386,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
                     url
                   )}`}
-                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small fw-bold"
                   rel={relTags}
                 >
                   ghostarchive.org {I18NextService.i18n.t("archive_link")}
@@ -395,7 +395,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
                     url
                   )}`}
-                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small fw-bold"
                   rel={relTags}
                 >
                   archive.today {I18NextService.i18n.t("archive_link")}
@@ -419,7 +419,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             )}
             {this.props.crossPosts && this.props.crossPosts.length > 0 && (
               <>
-                <div className="my-1 text-muted small font-weight-bold">
+                <div className="my-1 text-muted small fw-bold">
                   {I18NextService.i18n.t("cross_posts")}
                 </div>
                 <PostListings
@@ -586,7 +586,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         return (
           suggestedTitle && (
             <div
-              className="mt-1 text-muted small font-weight-bold pointer"
+              className="mt-1 text-muted small fw-bold pointer"
               role="button"
               onClick={linkEvent(
                 { i: this, suggestedTitle },
@@ -613,7 +613,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           suggestedPosts &&
           suggestedPosts.length > 0 && (
             <>
-              <div className="my-1 text-muted small font-weight-bold">
+              <div className="my-1 text-muted small fw-bold">
                 {I18NextService.i18n.t("related_posts")}
               </div>
               <PostListings
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index d5ddc2f2..20c20efd 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -538,7 +538,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           )}
           {post.deleted && (
             <small
-              className="unselectable pointer ms-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted fst-italic"
               data-tippy-content={I18NextService.i18n.t("deleted")}
             >
               <Icon icon="trash" classes="icon-inline text-danger" />
@@ -546,7 +546,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           )}
           {post.locked && (
             <small
-              className="unselectable pointer ms-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted fst-italic"
               data-tippy-content={I18NextService.i18n.t("locked")}
             >
               <Icon icon="lock" classes="icon-inline text-danger" />
@@ -554,7 +554,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           )}
           {post.featured_community && (
             <small
-              className="unselectable pointer ms-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted fst-italic"
               data-tippy-content={I18NextService.i18n.t(
                 "featured_in_community"
               )}
@@ -565,7 +565,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           )}
           {post.featured_local && (
             <small
-              className="unselectable pointer ms-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted fst-italic"
               data-tippy-content={I18NextService.i18n.t("featured_in_local")}
               aria-label={I18NextService.i18n.t("featured_in_local")}
             >
@@ -591,7 +591,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <p className="d-flex text-muted align-items-center gap-1 small m-0">
         {url && !(hostname(url) === getExternalHost()) && (
           <a
-            className="text-muted font-italic"
+            className="text-muted fst-italic"
             href={url}
             title={url}
             rel={relTags}
diff --git a/src/shared/components/private_message/private-message-form.tsx b/src/shared/components/private_message/private-message-form.tsx
index 338584b3..145b53dd 100644
--- a/src/shared/components/private_message/private-message-form.tsx
+++ b/src/shared/components/private_message/private-message-form.tsx
@@ -158,7 +158,7 @@ export class PrivateMessageForm extends Component<
                 {I18NextService.i18n.t("cancel")}
               </button>
             )}
-            <ul className="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
+            <ul className="d-inline-block float-right list-inline mb-1 text-muted fw-bold">
               <li className="list-inline-item"></li>
             </ul>
           </div>
diff --git a/src/shared/components/private_message/private-message.tsx b/src/shared/components/private_message/private-message.tsx
index af8d64e5..74f60901 100644
--- a/src/shared/components/private_message/private-message.tsx
+++ b/src/shared/components/private_message/private-message.tsx
@@ -140,7 +140,7 @@ export class PrivateMessage extends Component<
                   dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
                 />
               )}
-              <ul className="list-inline mb-0 text-muted font-weight-bold">
+              <ul className="list-inline mb-0 text-muted fw-bold">
                 {!this.mine && (
                   <>
                     <li className="list-inline-item">

From b543ef5ecb9d2d8fc7682fef51f131deb18a0748 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 18:43:12 -0400
Subject: [PATCH 03/11] fix: Fix another class

---
 src/shared/components/common/moment-time.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx
index f216adf0..ec97eb49 100644
--- a/src/shared/components/common/moment-time.tsx
+++ b/src/shared/components/common/moment-time.tsx
@@ -39,7 +39,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       return (
         <span
           data-tippy-content={this.createdAndModifiedTimes()}
-          className="moment-time fst-italics pointer unselectable"
+          className="moment-time fst-italic pointer unselectable"
         >
           <Icon icon="edit-2" classes="icon-inline me-1" />
           {formatPastDate(this.props.updated)}

From 13d0a52dc8654303dad4eab9d901ac4c47698032 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 18:47:14 -0400
Subject: [PATCH 04/11] fix(a11y): Fix non-list item being inside ul list in
 navbar

---
 src/shared/components/app/navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 2ede00e1..89a280d9 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -347,7 +347,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </li>
                 )}
                 {person && (
-                  <div id="dropdownUser" className="dropdown">
+                  <li id="dropdownUser" className="dropdown">
                     <button
                       className="btn dropdown-toggle"
                       role="button"
@@ -398,7 +398,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                         </button>
                       </li>
                     </ul>
-                  </div>
+                  </li>
                 )}
               </>
             ) : (

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 05/11] 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 ba36d755..cf4c9c6d 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 06/11] 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 d61dafda..a93055ed 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 5f68ea54..f217cfab 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 07/11] 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 a29fe160..37a0c836 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 08/11] 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 8428a54f..2ec41d05 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 09/11] 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 f217cfab..8ece39e9 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 9b8c10a88e9928a8ebe10c8062358de674d3b3aa Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 19:59:28 -0400
Subject: [PATCH 10/11] chore: Empty commit to re-trigger Woodpecker


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 11/11] 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 37a0c836..801cd867 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)}