A11Y: avatar upload button should be focusable (#23575)

app/assets/javascripts/discourse/app/components/avatar-uploader.hbs

@@ -1,24 +1,20 @@
-<label
+<input
-  class="btn btn-default btn-icon-text"
+  class="hidden-upload-field"
   disabled={{this.uploading}}
-  title={{i18n "user.change_avatar.upload_title"}}
+  type="file"
+  accept="image/*"
+  aria-hidden="true"
+/>
+<DButton
+  @translatedLabel={{this.uploadLabel}}
+  @icon="far-image"
+  @disabled={{this.uploading}}
+  @action={{this.chooseImage}}
+  @title="user.change_avatar.upload_title"
+  class="btn-default"
   data-uploaded={{this.customAvatarUploaded}}
   data-avatar-upload-id={{this.uploadedAvatarId}}
->
+/>
-  {{d-icon "far-image"}}
-  {{#if this.uploading}}
-    {{i18n "uploading"}}
-    {{this.uploadProgress}}%
-  {{else}}
-    {{i18n "upload"}}
-  {{/if}}
-  <input
-    class="hidden-upload-field"
-    disabled={{this.uploading}}
-    type="file"
-    accept="image/*"
-  />
-</label>
 
 {{#if this.imageIsNotASquare}}
   <div class="warning">{{i18n "user.change_avatar.image_is_not_a_square"}}</div>

app/assets/javascripts/discourse/app/components/avatar-uploader.js

@@ -2,6 +2,8 @@ import Component from "@ember/component";
 import { isBlank } from "@ember/utils";
 import UppyUploadMixin from "discourse/mixins/uppy-upload";
 import discourseComputed from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
+import I18n from "I18n";
 
 export default Component.extend(UppyUploadMixin, {
   type: "avatar",
@@ -31,4 +33,16 @@ export default Component.extend(UppyUploadMixin, {
   data(user_id) {
     return { user_id };
   },
+
+  @discourseComputed("uploading", "uploadProgress")
+  uploadLabel() {
+    return this.uploading
+      ? `${I18n.t("uploading")} ${this.uploadProgress}%`
+      : I18n.t("upload");
+  },
+
+  @action
+  chooseImage() {
+    this.fileInputEl.click();
+  },
 });