Web Vitals | Improve Accessibility

languages-learner · Mar 11, 2024 · 5419c00 · 5419c00
1 parent b34bd46
commit 5419c00
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/.../words/components/WordsContainer/components/WordsContainerHeader/WordsContainerHeader.vue b/.../words/components/WordsContainer/components/WordsContainerHeader/WordsContainerHeader.vue
@@ -48,6 +48,7 @@ const updateText = (value: string) => {
                             align="center"
                             class="words-container-header__checkbox">
                             <n-checkbox
+                                :aria-label="$t('select_all_words')"
                                 :disabled="isAllWordsSelectedDisabled"
                                 :data-test="EDataTest.words_container_header_checkbox"
                                 :checked="isAllWordsSelected"

diff --git a/...onents/WordsContainerHeader/WordsContainerHeaderStatuses/WordsContainerHeaderStatuses.vue b/...onents/WordsContainerHeader/WordsContainerHeaderStatuses/WordsContainerHeaderStatuses.vue
@@ -4,7 +4,7 @@ const WordStatusIcon = defineAsyncComponent(() => import('@/modules/workspace/mo
 import { useWordStatuses } from '@/modules/workspace/modules/words/composables/useWordStatuses'
 
 const { isMobile } = useAppBreakpoints()
-const { wordStatusOptionsWithAll, getWordStatusesValues } = useWordStatuses()
+const { wordStatusLabel, wordStatusOptionsWithAll, getWordStatusesValues } = useWordStatuses()
 
 const currentStatus = defineModel<WordsFilters['status']>('status', { required: true })
 const options = computed(() => unref(wordStatusOptionsWithAll).map(option => ({
@@ -36,6 +36,7 @@ const updateStatus = (value: WordsFilters['status']) => {
             :data-test="EDataTest.words_container_header_status"
             :class="{[EDataTestClass.words_container_header_status_active]: isSelectedStatus(wordStatus)}"
             :secondary="isSelectedStatus(wordStatus)"
+            :aria-label="wordStatusLabel[wordStatus]"
         >
             <template #icon>
                 <WordStatusIcon :status="wordStatus" />

diff --git a/...ContainerWordsList/components/WordsContainerWordsListItem/WordsContainerWordsListItem.vue b/...ContainerWordsList/components/WordsContainerWordsListItem/WordsContainerWordsListItem.vue
@@ -82,6 +82,7 @@ const toggleChangeableView = () => {
                 class="words-container-words-list-item__property">
                 <n-checkbox
                     v-if="!source.disabled"
+                    :aria-label="$t('select_word')"
                     :data-test="EDataTest.words_list_item_checkbox"
                     :checked="isSelected"
                     :on-update:checked="toggleSelection">
@@ -92,6 +93,7 @@ const toggleChangeableView = () => {
                 class="words-container-words-list-item__property">
                 <n-button
                     @click="() => speak(source.word)"
+                    :aria-label="$t('speak')"
                     text>
                     <template #icon>
                         <n-icon
@@ -132,6 +134,7 @@ const toggleChangeableView = () => {
                 span="2 m:1"
                 class="words-container-words-list-item__property">
                 <n-button
+                    :aria-label="$t('edit')"
                     :disabled="source.disabled"
                     text
                     :data-test="EDataTest.words_list_item_edit_button">
@@ -172,6 +175,7 @@ const toggleChangeableView = () => {
                     </template>
                     <template #trigger>
                         <n-button
+                            :aria-label="$t('delete')"
                             :disabled="source.disabled"
                             text
                             :data-test="EDataTest.words_list_item_delete_button">

diff --git a/src/modules/workspace/modules/words/composables/useWordStatuses.ts b/src/modules/workspace/modules/words/composables/useWordStatuses.ts
@@ -10,30 +10,28 @@ export const WordStatusTranslationKey: Record<EWordStatus, string> = {
 export const useWordStatuses = () => {
     const { t } = useI18n()
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const wordStatusLabel: Record<EWordStatus, string> = Object.fromEntries(
+        getWordStatusesValues()
+            .map((status) => [status as EWordStatus, t(WordStatusTranslationKey[status as EWordStatus])] as [EWordStatus, string]),
+    )
+
     const wordStatusOptions: Array<{
         label: string,
         value: WordsFilters['status']
-    }> = [
-        {
-            label: t(WordStatusTranslationKey[EWordStatus.NEW_WORD]),
-            value: EWordStatus.NEW_WORD,
-        },
-        {
-            label: t(WordStatusTranslationKey[EWordStatus.LEARN]),
-            value: EWordStatus.LEARN,
-        },
-        {
-            label: t(WordStatusTranslationKey[EWordStatus.LEARNED]),
-            value: EWordStatus.LEARNED,
-        },
-    ]
+    }> = getWordStatusesValues().map((status) => ({
+        label: wordStatusLabel[status as EWordStatus],
+        value: status as EWordStatus,
+    }))
 
     const wordStatusOptionsWithAll = [{
         label: t('all'),
         value: -1,
     }].concat(wordStatusOptions)
 
     return {
+        wordStatusLabel,
         wordStatusOptions,
         wordStatusOptionsWithAll,
         getWordStatusesValues,