Browse Source

Add some aria to post status form

tusooa 2 years ago
parent
commit
d159031121

+ 3 - 0
src/components/emoji_input/emoji_input.vue

@@ -16,6 +16,7 @@
       ref="hiddenOverlay"
       ref="hiddenOverlay"
       class="hidden-overlay"
       class="hidden-overlay"
       :style="overlayStyle"
       :style="overlayStyle"
+      :aria-hidden="true"
     >
     >
       <span>{{ preText }}</span>
       <span>{{ preText }}</span>
       <span
       <span
@@ -33,6 +34,7 @@
         v-if="!hideEmojiButton"
         v-if="!hideEmojiButton"
         class="button-unstyled emoji-picker-icon"
         class="button-unstyled emoji-picker-icon"
         type="button"
         type="button"
+        :title="$t('emoji.add_emoji')"
         @click.prevent="togglePicker"
         @click.prevent="togglePicker"
       >
       >
         <FAIcon :icon="['far', 'smile-beam']" />
         <FAIcon :icon="['far', 'smile-beam']" />
@@ -53,6 +55,7 @@
       ref="suggestorPopover"
       ref="suggestorPopover"
       class="autocomplete-panel"
       class="autocomplete-panel"
       placement="bottom"
       placement="bottom"
+      :trigger-attrs="{ 'aria-hidden': true }"
     >
     >
       <template #content>
       <template #content>
         <div
         <div

+ 1 - 0
src/components/emoji_picker/emoji_picker.vue

@@ -3,6 +3,7 @@
     ref="popover"
     ref="popover"
     trigger="click"
     trigger="click"
     popover-class="emoji-picker popover-default"
     popover-class="emoji-picker popover-default"
+    :trigger-attrs="{ 'aria-hidden': true }"
     @show="onPopoverShown"
     @show="onPopoverShown"
     @close="onPopoverClosed"
     @close="onPopoverClosed"
   >
   >

+ 10 - 0
src/components/post_status_form/post_status_form.vue

@@ -30,6 +30,9 @@
           <span>{{ $t('post_status.scope_notice.public') }}</span>
           <span>{{ $t('post_status.scope_notice.public') }}</span>
           <a
           <a
             class="fa-scale-110 fa-old-padding dismiss"
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
             @click.prevent="dismissScopeNotice()"
           >
           >
             <FAIcon icon="times" />
             <FAIcon icon="times" />
@@ -42,6 +45,9 @@
           <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
           <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
           <a
           <a
             class="fa-scale-110 fa-old-padding dismiss"
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
             @click.prevent="dismissScopeNotice()"
           >
           >
             <FAIcon icon="times" />
             <FAIcon icon="times" />
@@ -54,6 +60,9 @@
           <span>{{ $t('post_status.scope_notice.private') }}</span>
           <span>{{ $t('post_status.scope_notice.private') }}</span>
           <a
           <a
             class="fa-scale-110 fa-old-padding dismiss"
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
             @click.prevent="dismissScopeNotice()"
           >
           >
             <FAIcon icon="times" />
             <FAIcon icon="times" />
@@ -199,6 +208,7 @@
               id="post-content-type"
               id="post-content-type"
               v-model="newStatus.contentType"
               v-model="newStatus.contentType"
               class="form-control"
               class="form-control"
+              :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
             >
             >
               <option
               <option
                 v-for="postFormat in postFormats"
                 v-for="postFormat in postFormats"

+ 2 - 1
src/components/select/select.js

@@ -13,6 +13,7 @@ export default {
     'modelValue',
     'modelValue',
     'disabled',
     'disabled',
     'unstyled',
     'unstyled',
-    'kind'
+    'kind',
+    'attrs'
   ]
   ]
 }
 }

+ 1 - 0
src/components/select/select.vue

@@ -6,6 +6,7 @@
     <select
     <select
       :disabled="disabled"
       :disabled="disabled"
       :value="modelValue"
       :value="modelValue"
+      v-bind="attrs"
       @change="$emit('update:modelValue', $event.target.value)"
       @change="$emit('update:modelValue', $event.target.value)"
     >
     >
       <slot />
       <slot />

+ 2 - 0
src/i18n/en.json

@@ -266,6 +266,7 @@
       "text/markdown": "Markdown",
       "text/markdown": "Markdown",
       "text/bbcode": "BBCode"
       "text/bbcode": "BBCode"
     },
     },
+    "content_type_selection": "Post format",
     "content_warning": "Subject (optional)",
     "content_warning": "Subject (optional)",
     "default": "Just landed in L.A.",
     "default": "Just landed in L.A.",
     "direct_warning_to_all": "This post will be visible to all the mentioned users.",
     "direct_warning_to_all": "This post will be visible to all the mentioned users.",
@@ -283,6 +284,7 @@
       "private": "This post will be visible to your followers only",
       "private": "This post will be visible to your followers only",
       "unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
       "unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
     },
     },
+    "scope_notice_dismiss": "Close this notice",
     "scope": {
     "scope": {
       "direct": "Direct - post to mentioned users only",
       "direct": "Direct - post to mentioned users only",
       "private": "Followers-only - post to followers only",
       "private": "Followers-only - post to followers only",