From fd166d8a3108f0a68a8380486c37133cb066c3e6 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+Brawaru@users.noreply.github.com>
Date: Wed, 30 Nov 2022 18:23:31 +0100
Subject: [PATCH] Improve accessibility of language modal

Even though Knossos is not very accessible right now, at least this new
feature can be.
---
 components/ui/ModalLanguages.vue | 108 +++++++++++++++++++++++++------
 i18n/en-US/index.toml            |  11 ++++
 2 files changed, 99 insertions(+), 20 deletions(-)

diff --git a/components/ui/ModalLanguages.vue b/components/ui/ModalLanguages.vue
index 50c2066bf6f..4d2716305c7 100644
--- a/components/ui/ModalLanguages.vue
+++ b/components/ui/ModalLanguages.vue
@@ -20,16 +20,18 @@
         <div class="languages-grid-container">
           <div v-if="automatic" class="automatic-overlay">
             <div class="automatic-overlay-icon">
-              <GlobeIcon />
+              <GlobeIcon aria-hidden="true" />
             </div>
-            <div class="automatic-overlay-title">
-              {{ $t('component.modal-languages.auto-lockout.title') }}
-            </div>
-            <div class="automatic-overlay-description">
-              <IntlFormatted
-                message-id="component.modal-languages.auto-lockout.description"
-                :values="{ language: currentLanguage.displayName }"
-              />
+            <div class="automatic-overlay-content" tabindex="0">
+              <h3 class="automatic-overlay-title">
+                {{ $t('component.modal-languages.auto-lockout.title') }}
+              </h3>
+              <p class="automatic-overlay-description">
+                <IntlFormatted
+                  message-id="component.modal-languages.auto-lockout.description"
+                  :values="{ language: currentLanguage.displayName }"
+                />
+              </p>
             </div>
             <div class="automatic-overlay-actions">
               <button
@@ -53,8 +55,31 @@
                 $t('component.modal-languages.field.search.placeholder')
               "
               :disabled="automatic"
+              aria-describedby="slm-s-desc"
+              @keypress="onSearchKeyPress"
             />
-            <div class="languages-grid" :class="{ empty }">
+            <div id="slm-s-desc" class="sr-only">
+              {{ $t('component.modal-languages.field.search.description') }}
+            </div>
+            <div id="slm-sr-results" class="sr-only" aria-live="polite">
+              {{
+                typedSearchQuery === ''
+                  ? ''
+                  : $t(
+                      'component.modal-languages.announcement.search-results',
+                      {
+                        matches: matchingLanguages.length,
+                      }
+                    )
+              }}
+            </div>
+            <div
+              ref="gridRef"
+              class="languages-grid"
+              :class="{ empty }"
+              :aria-label="$t('component.modal-languages.grid.legend')"
+              role="list"
+            >
               <div
                 v-for="language in matchingLanguages"
                 :key="language.code"
@@ -65,6 +90,7 @@
                 "
                 class="language"
                 :class="{ active: selectedLanguage === language.code }"
+                role="listitem"
               >
                 <input
                   :id="language.inputID"
@@ -78,7 +104,16 @@
                 />
                 <div class="language-info">
                   <label :for="language.inputID" class="language-label">
-                    <div class="display-name">
+                    <div
+                      class="display-name"
+                      :lang="language.code"
+                      :aria-label="
+                        $t('component.modal-languages.language.label', {
+                          displayName: language.displayName,
+                          translatedName: language.translatedName,
+                        })
+                      "
+                    >
                       {{ language.displayName }}
                     </div>
                     <span
@@ -90,7 +125,12 @@
                       "
                       class="browser-locale"
                     >
-                      <GlobeIcon />
+                      <GlobeIcon aria-hidden="true" />
+                      <span class="sr-only">{{
+                        $t(
+                          'component.modal-languages.language.icon-labels.browser-preferred'
+                        )
+                      }}</span>
                     </span>
                     <span
                       v-if="isCurrentlyUsed(language)"
@@ -99,7 +139,12 @@
                       "
                       class="current-locale"
                     >
-                      <Check />
+                      <Check aria-hidden="true" />
+                      <span class="sr-only">{{
+                        $t(
+                          'component.modal-languages.language.icon-labels.currently-used'
+                        )
+                      }}</span>
                     </span>
                   </label>
                   <div class="translated-name">
@@ -110,16 +155,24 @@
               <div
                 v-if="!empty && matchingLanguages.length < 4"
                 class="language spacer"
+                aria-hidden="true"
               />
               <div
                 v-if="!empty && matchingLanguages.length < 3"
                 class="language spacer"
+                aria-hidden="true"
               />
               <div
                 v-if="!empty && matchingLanguages.length < 2"
                 class="language spacer"
+                aria-hidden="true"
               />
-              <div v-if="empty" class="placeholder">
+              <div
+                v-if="empty"
+                class="placeholder"
+                tabindex="0"
+                role="listitem"
+              >
                 {{ $t('component.modal-languages.filler.no-results') }}
               </div>
             </div>
@@ -202,7 +255,9 @@ export default defineComponent({
       /** @type {null | InstanceType<import('./Modal.vue').default>} */ (null)
     )
 
-    return { modalRef }
+    const gridRef = ref(/** @type {null | HTMLFieldSetElement} */ (null))
+
+    return { modalRef, gridRef }
   },
   data() {
     return initialState.call(this)
@@ -360,9 +415,7 @@ export default defineComponent({
         )
       }
 
-      const result = this.fuse.search(this.searchQuery)
-      console.log(result)
-      return result.map((_) => _.item)
+      return this.fuse.search(this.searchQuery).map((_) => _.item)
     },
     /** @returns {boolean} Whether there are no search results. */
     empty() {
@@ -414,8 +467,22 @@ export default defineComponent({
     },
   },
   methods: {
-    applyChanges() {
-      return this.$i18n.changeLocale(this.selectedLanguage)
+    /** @param {KeyboardEvent} e Keyboard event */
+    onSearchKeyPress(e) {
+      const anyModifierPressed =
+        e.altKey || e.ctrlKey || e.metaKey || e.shiftKey
+
+      if (e.key === 'Enter' && !anyModifierPressed) {
+        const focusable =
+          /** @type {HTMLInputElement | HTMLDivElement | undefined} */ (
+            this.gridRef?.querySelector('input,div.placeholder')
+          )
+
+        focusable?.focus({ preventScroll: true })
+      }
+    },
+    async applyChanges() {
+      await this.$i18n.changeLocale(this.selectedLanguage)
     },
     /**
      * @param {Language} language Language to check.
@@ -557,6 +624,7 @@ export default defineComponent({
     white-space: pre-line;
     max-width: 400px;
     color: var(--color-overlay-description);
+    margin: 0;
   }
 }
 
diff --git a/i18n/en-US/index.toml b/i18n/en-US/index.toml
index f370e44ee5f..97e42b0ec92 100644
--- a/i18n/en-US/index.toml
+++ b/i18n/en-US/index.toml
@@ -154,6 +154,14 @@ contribution-notice = """Modrinth is translated by volunteers. \
 filler.no-results = "No results"
 action.enable-automatic = "Automatic"
 field.search.placeholder = "Search language..."
+field.search.description = "Submit to focus the first search result."
+announcement.search-results = """\
+{matches, plural,\
+ =0 {No languages match}\
+ one {# language matches}\
+ other {# languages match}\
+} your search."""
+grid.legend = "Select a language"
 
 [component.modal-languages.auto-lockout]
 title = "Using your browser's language"
@@ -165,6 +173,9 @@ action = "Use a different language"
 [component.modal-languages.language]
 browser-preferred = "Browser language"
 currently-used = "Currently used"
+label = "{displayName} ({translatedName})"
+icon-labels.browser-preferred = "(browser language)"
+icon-labels.currently-used = "(currently used)"
 
 [component.modal-report]
 title = "Report {itemType, select, user {user} other {project}}"