Merge branch 'main' into more_accessibility

diff --cc src/shared/components/comment-node.tsx
Simple merge

diff --cc src/shared/components/communities.tsx
Simple merge

diff --cc src/shared/components/login.tsx
index 4a75e45349152d4e466e43d06804bfbbd61358fa,94c685dde9bec5fd40e27577238a9437edc9fe82..ea37d1ed8b4c688d2c19df27f0cab353991d20d0
--- 1/src/shared/components/login.tsx
--- 2/src/shared/components/login.tsx
+++ b/src/shared/components/login.tsx
@@@ -260,11 -253,8 +253,9 @@@ export class Login extends Component<an
                  type="button"
                  class="btn btn-secondary"
                  onClick={linkEvent(this, this.handleRegenCaptcha)}
 +                aria-label={i18n.t('captcha')}
                >
-                 <svg class="icon icon-refresh-cw">
-                   <use xlinkHref="#icon-refresh-cw"></use>
-                 </svg>
+                 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
                </button>
              </label>
              {this.showCaptcha()}

diff --cc src/shared/components/markdown-textarea.tsx
index fe34b2054d3197cdf19fe54bca21cb3f0b522ffe,bc53c741e138e85113e46694b8a9caab00d8d7e6..67d5c4157539895132adad413e7c9661578ed60a
--- 1/src/shared/components/markdown-textarea.tsx
--- 2/src/shared/components/markdown-textarea.tsx
+++ b/src/shared/components/markdown-textarea.tsx
@@@ -183,32 -179,23 +182,26 @@@ export class MarkdownTextArea extends C
              <button
                class="btn btn-sm text-muted"
                data-tippy-content={i18n.t('bold')}
 +              aria-label={i18n.t('bold')}
                onClick={linkEvent(this, this.handleInsertBold)}
              >
-               <svg class="icon icon-inline">
-                 <use xlinkHref="#icon-bold"></use>
-               </svg>
+               <Icon icon="bold" classes="icon-inline" />
              </button>
              <button
                class="btn btn-sm text-muted"
                data-tippy-content={i18n.t('italic')}
 +              aria-label={i18n.t('italic')}
                onClick={linkEvent(this, this.handleInsertItalic)}
              >
-               <svg class="icon icon-inline">
-                 <use xlinkHref="#icon-italic"></use>
-               </svg>
+               <Icon icon="italic" classes="icon-inline" />
              </button>
              <button
                class="btn btn-sm text-muted"
                data-tippy-content={i18n.t('link')}
 +              aria-label={i18n.t('link')}
                onClick={linkEvent(this, this.handleInsertLink)}
              >
-               <svg class="icon icon-inline">
-                 <use xlinkHref="#icon-link"></use>
-               </svg>
+               <Icon icon="link" classes="icon-inline" />
              </button>
              <form class="btn btn-sm text-muted font-weight-bold">
                <label

diff --cc src/shared/components/navbar.tsx
index dee3fc5234a9f9e36ac8fd19de9cbd03f38d081b,a0ba817cf8c863d3a4b66174a135bd1fb70b4f70..d1a8027b74ceae7f8cc6ac756a9e17e4ef490529
--- 1/src/shared/components/navbar.tsx
--- 2/src/shared/components/navbar.tsx
+++ b/src/shared/components/navbar.tsx
@@@ -198,16 -199,9 +199,14 @@@ export class Navbar extends Component<N
                to="/inbox"
                title={i18n.t('inbox')}
              >
-               <svg class="icon">
-                 <use xlinkHref="#icon-bell"></use>
-               </svg>
+               <Icon icon="bell" />
                {this.state.unreadCount > 0 && (
 -                <span class="mx-1 badge badge-light">
 +                <span
 +                  class="mx-1 badge badge-light"
 +                  aria-label={`${this.state.unreadCount} ${i18n.t(
 +                    'unread_messages'
 +                  )}`}
 +                >
                    {this.state.unreadCount}
                  </span>
                )}
@@@ -312,11 -296,8 +305,9 @@@
                    onClick={linkEvent(this, this.handleSearchBtn)}
                    class="px-1 btn btn-link"
                    style="color: var(--gray)"
 +                  aria-label={i18n.t('search')}
                  >
-                   <svg class="icon">
-                     <use xlinkHref="#icon-search"></use>
-                   </svg>
+                   <Icon icon="search" />
                  </button>
                </form>
              )}
@@@ -329,16 -310,9 +320,14 @@@
                        to="/inbox"
                        title={i18n.t('inbox')}
                      >
-                       <svg class="icon">
-                         <use xlinkHref="#icon-bell"></use>
-                       </svg>
+                       <Icon icon="bell" />
                        {this.state.unreadCount > 0 && (
 -                        <span class="ml-1 badge badge-light">
 +                        <span
 +                          class="ml-1 badge badge-light"
 +                          aria-label={`${this.state.unreadCount} ${i18n.t(
 +                            'unread_messages'
 +                          )}`}
 +                        >
                            {this.state.unreadCount}
                          </span>
                        )}

diff --cc src/shared/components/post-form.tsx
Simple merge

diff --cc src/shared/components/post-listing.tsx
index 1255b3d69b8dc6911f7e92c5456cafbc4a18108d,d68805bc3f986bd2db061fb253304ac80a097e40..715bb30923098b35433cfcf9ba0ddf5db797e0a8
--- 1/src/shared/components/post-listing.tsx
--- 2/src/shared/components/post-listing.tsx
+++ b/src/shared/components/post-listing.tsx
@@@ -681,11 -639,8 +639,9 @@@ export class PostListing extends Compon
                  class="btn btn-link btn-animate text-muted py-0"
                  onClick={linkEvent(this, this.handleEditClick)}
                  data-tippy-content={i18n.t('edit')}
 +                aria-label={i18n.t('edit')}
                >
-                 <svg class="icon icon-inline">
-                   <use xlinkHref="#icon-edit"></use>
-                 </svg>
+                 <Icon icon="edit" classes="icon-inline" />
                </button>
                <button
                  class="btn btn-link btn-animate text-muted py-0"
@@@ -693,17 -648,13 +649,16 @@@
                  data-tippy-content={
                    !post_view.post.deleted ? i18n.t('delete') : i18n.t('restore')
                  }
 +                aria-label={
 +                  !post_view.post.deleted ? i18n.t('delete') : i18n.t('restore')
 +                }
                >
-                 <svg
-                   class={`icon icon-inline ${
+                 <Icon
+                   icon="trash"
+                   classes={`icon-inline ${
                      post_view.post.deleted && 'text-danger'
                    }`}
-                 >
-                   <use xlinkHref="#icon-trash"></use>
-                 </svg>
+                 />
                </button>
              </>
            )}
@@@ -726,15 -675,13 +679,14 @@@
                    class="btn btn-link btn-animate text-muted py-0"
                    onClick={linkEvent(this, this.handleViewSource)}
                    data-tippy-content={i18n.t('view_source')}
 +                  aria-label={i18n.t('view_source')}
                  >
-                   <svg
-                     class={`icon icon-inline ${
+                   <Icon
+                     icon="file-text"
+                     classes={`icon-inline ${
                        this.state.viewSource && 'text-success'
                      }`}
-                   >
-                     <use xlinkHref="#icon-file-text"></use>
-                   </svg>
+                   />
                  </button>
                )}
                {this.canModOnSelf && (
@@@ -745,17 -692,13 +697,16 @@@
                      data-tippy-content={
                        post_view.post.locked ? i18n.t('unlock') : i18n.t('lock')
                      }
 +                    aria-label={
 +                      post_view.post.locked ? i18n.t('unlock') : i18n.t('lock')
 +                    }
                    >
-                     <svg
-                       class={`icon icon-inline ${
+                     <Icon
+                       icon="lock"
+                       classes={`icon-inline ${
                          post_view.post.locked && 'text-danger'
                        }`}
-                     >
-                       <use xlinkHref="#icon-lock"></use>
-                     </svg>
+                     />
                    </button>
                    <button
                      class="btn btn-link btn-animate text-muted py-0"
@@@ -765,19 -708,13 +716,18 @@@
                          ? i18n.t('unsticky')
                          : i18n.t('sticky')
                      }
 +                    aria-label={
 +                      post_view.post.stickied
 +                        ? i18n.t('unsticky')
 +                        : i18n.t('sticky')
 +                    }
                    >
-                     <svg
-                       class={`icon icon-inline ${
+                     <Icon
+                       icon="pin"
+                       classes={`icon-inline ${
                          post_view.post.stickied && 'text-success'
                        }`}
-                     >
-                       <use xlinkHref="#icon-pin"></use>
-                     </svg>
+                     />
                    </button>
                  </>
                )}