Merge pull request #1797 from jsit/fix/markdown-toolbar-button-focus

fix: Add focus border to markdown toolbar buttons

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

@@ -32,7 +32,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     return (
       <span className="emoji-picker">
         <button
-          className="btn btn-sm text-muted"
+          className="btn btn-sm btn-link rounded-0 text-muted"
           data-tippy-content={I18NextService.i18n.t("emoji")}
           aria-label={I18NextService.i18n.t("emoji")}
           disabled={this.props.disabled}

src/shared/components/common/markdown-textarea.tsx

@@ -170,34 +170,39 @@ export class MarkdownTextArea extends Component<
                 <EmojiPicker
                   onEmojiClick={e => this.handleEmoji(this, e)}
                 ></EmojiPicker>
-                <form className="btn btn-sm text-muted fw-bold">
-                  <label
-                    htmlFor={`file-upload-${this.id}`}
-                    // TODO: Fix this linting violation
-                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                    tabIndex={0}
-                    className={`mb-0 ${
-                      UserService.Instance.myUserInfo && "pointer"
-                    }`}
-                    data-tippy-content={I18NextService.i18n.t("upload_image")}
-                  >
-                    {this.state.imageUploadStatus ? (
-                      <Spinner />
-                    ) : (
+                <label
+                  htmlFor={`file-upload-${this.id}`}
+                  className={classNames("mb-0", {
+                    pointer: UserService.Instance.myUserInfo,
+                  })}
+                  data-tippy-content={I18NextService.i18n.t("upload_image")}
+                >
+                  {this.state.imageUploadStatus ? (
+                    <Spinner />
+                  ) : (
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-link rounded-0 text-muted mb-0"
+                      onClick={() => {
+                        document
+                          .getElementById(`file-upload-${this.id}`)
+                          ?.click();
+                      }}
+                    >
                       <Icon icon="image" classes="icon-inline" />
-                    )}
-                  </label>
-                  <input
-                    id={`file-upload-${this.id}`}
-                    type="file"
-                    accept="image/*,video/*"
-                    name="file"
-                    className="d-none"
-                    multiple
-                    disabled={!UserService.Instance.myUserInfo}
-                    onChange={linkEvent(this, this.handleImageUpload)}
-                  />
-                </form>
+                    </button>
+                  )}
+                </label>
+                <input
+                  id={`file-upload-${this.id}`}
+                  type="file"
+                  accept="image/*,video/*"
+                  name="file"
+                  className="d-none"
+                  multiple
+                  disabled={!UserService.Instance.myUserInfo}
+                  onChange={linkEvent(this, this.handleImageUpload)}
+                />
                 {this.getFormatButton("header", this.handleInsertHeader)}
                 {this.getFormatButton(
                   "strikethrough",
@@ -348,7 +353,7 @@ export class MarkdownTextArea extends Component<
 
     return (
       <button
-        className="btn btn-sm text-muted"
+        className="btn btn-sm btn-link rounded-0 text-muted"
         data-tippy-content={I18NextService.i18n.t(type)}
         aria-label={I18NextService.i18n.t(type)}
         onClick={linkEvent(this, handleClick)}