Make all emoji inputs screen-reader-friendly

src/components/emoji_input/emoji_input.js

@@ -287,6 +287,7 @@ const EmojiInput = {
           ...rest,
           img: imageUrl || ''
         }))
+      this.highlighted = -1
       this.$refs.screenReaderNotice.announce(
         this.$tc('tool_tip.autocomplete_available',
           this.suggestions.length,

src/components/post_status_form/post_status_form.js

@@ -8,6 +8,7 @@ import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
+import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
@@ -629,6 +630,9 @@ const PostStatusForm = {
     },
     openProfileTab () {
       this.$store.dispatch('openSettingsModalTab', 'profile')
+    },
+    propsToNative (props) {
+      return propsToNative(props)
     }
   }
 }

src/components/post_status_form/post_status_form.vue

@@ -124,14 +124,17 @@
           :suggest="emojiSuggestor"
           class="form-control"
         >
-          <input
+          <template #default="inputProps">
-            v-model="newStatus.spoilerText"
+            <input
-            type="text"
+              v-model="newStatus.spoilerText"
-            :placeholder="$t('post_status.content_warning')"
+              type="text"
-            :disabled="posting && !optimisticPosting"
+              :placeholder="$t('post_status.content_warning')"
-            size="1"
+              :disabled="posting && !optimisticPosting"
-            class="form-post-subject"
+              v-bind="propsToNative(inputProps)"
-          >
+              size="1"
+              class="form-post-subject"
+            >
+          </template>
         </EmojiInput>
         <EmojiInput
           ref="emoji-input"
@@ -158,11 +161,7 @@
               :disabled="posting && !optimisticPosting"
               class="form-post-body"
               :class="{ 'scrollable-form': !!maxHeight }"
-              v-bind="inputProps"
+              v-bind="propsToNative(inputProps)"
-              :aria-owns="inputProps.ariaOwns"
-              :aria-autocomplete="inputProps.ariaAutocomplete"
-              :aria-activedescendant="inputProps.ariaActiveDescendant"
-              :aria-expanded="inputProps.ariaExpanded"
               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
               @keydown.meta.enter="postStatus($event, newStatus)"
               @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"

src/components/settings_modal/tabs/profile_tab.js

@@ -12,6 +12,7 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import localeService from 'src/services/locale/locale.service.js'
+import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -257,6 +258,9 @@ const ProfileTab = {
         messageArgs: [error.message],
         level: 'error'
       })
+    },
+    propsToNative (props) {
+      return propsToNative(props)
     }
   }
 }

src/components/settings_modal/tabs/profile_tab.vue

@@ -8,11 +8,14 @@
         enable-emoji-picker
         :suggest="emojiSuggestor"
       >
-        <input
+        <template #default="inputProps">
-          id="username"
+          <input
-          v-model="newName"
+            id="username"
-          class="name-changer"
+            v-model="newName"
-        >
+            class="name-changer"
+            v-bind="propsToNative(inputProps)"
+          >
+        </template>
       </EmojiInput>
       <p>{{ $t('settings.bio') }}</p>
       <EmojiInput
@@ -20,10 +23,13 @@
         enable-emoji-picker
         :suggest="emojiUserSuggestor"
       >
-        <textarea
+        <template #default="inputProps">
-          v-model="newBio"
+          <textarea
-          class="bio resize-height"
+            v-model="newBio"
-        />
+            class="bio resize-height"
+            v-bind="propsToNative(inputProps)"
+          />
+        </template>
       </EmojiInput>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
@@ -48,10 +54,13 @@
             hide-emoji-button
             :suggest="userSuggestor"
           >
-            <input
+            <template #default="inputProps">
-              v-model="newFields[i].name"
+              <input
-              :placeholder="$t('settings.profile_fields.name')"
+                v-model="newFields[i].name"
-            >
+                :placeholder="$t('settings.profile_fields.name')"
+                v-bind="propsToNative(inputProps)"
+              >
+            </template>
           </EmojiInput>
           <EmojiInput
             v-model="newFields[i].value"
@@ -59,10 +68,13 @@
             hide-emoji-button
             :suggest="userSuggestor"
           >
-            <input
+            <template #default="inputProps">
-              v-model="newFields[i].value"
+              <input
-              :placeholder="$t('settings.profile_fields.value')"
+                v-model="newFields[i].value"
-            >
+                :placeholder="$t('settings.profile_fields.value')"
+                v-bind="propsToNative(inputProps)"
+              >
+            </template>
           </EmojiInput>
           <button
             class="delete-field button-unstyled -hover-highlight"

src/services/attributes_helper/attributes_helper.service.js

@@ -0,0 +1,8 @@
+import { kebabCase } from 'lodash'
+
+const propsToNative = props => Object.keys(props).reduce((acc, cur) => {
+  acc[kebabCase(cur)] = props[cur]
+  return acc
+}, {})
+
+export { propsToNative }