Add license explanation to close button label (#1398)

* Add license explanation to close button label

* Do not reuse the existing label

src/components/VFilters/VFilterChecklist.vue

@@ -41,7 +41,7 @@
         <template #default="{ close }">
           <div class="relative">
             <VIconButton
-              :aria-label="$t('modal.close')"
+              :aria-label="getLicenseExplanationCloseAria(item.code)"
               class="absolute top-0 end-0 border-none text-dark-charcoal-70"
               size="small"
               :icon-props="{ iconPath: icons.closeSmall }"
@@ -57,6 +57,7 @@
 
 <script>
 import { useSearchStore } from '~/stores/search'
+import { getElements } from '~/utils/license'
 
 import VLicenseExplanation from '~/components/VFilters/VLicenseExplanation.vue'
 import VCheckbox from '~/components/VCheckbox/VCheckbox.vue'
@@ -116,6 +117,16 @@ export default {
         this.disabled
       )
     },
+    getLicenseExplanationCloseAria(license) {
+      const elements = getElements(license).filter((icon) => icon !== 'cc')
+      const descriptions = elements
+        .map((element) => this.$t(`browse-page.license-description.${element}`))
+        .join(' ')
+      const close = this.$t('modal.close-named', {
+        name: this.$t('browse-page.aria.license-explanation'),
+      })
+      return `${descriptions} - ${close}`
+    },
   },
 }
 </script>

src/locales/en.json

@@ -606,7 +606,8 @@
   },
   "interpunct": "•",
   "modal": {
-    "close": "Close"
+    "close": "Close",
+    "close-named": "Close {name}"
   },
   "error-images": {
     "depressed-musician": "A depressed pianist rests their head in their hands.",

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-05-09T13:20:52+00:00\n"
+"POT-Creation-Date: 2022-05-10T15:31:18+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -141,6 +141,12 @@ msgctxt "modal.close"
 msgid "Close"
 msgstr ""
 
+#. Do not translate words between ### ###.
+#: src/components/VFilters/VFilterChecklist.vue:125
+msgctxt "modal.close-named"
+msgid "Close ###name###"
+msgstr ""
+
 #: src/components/VAudioTrack/layouts/VFullLayout.vue:63
 msgctxt "download-button.download"
 msgid "Download"
@@ -920,7 +926,7 @@ msgctxt "filters.license-explanation.more.read-more"
 msgid "Read more"
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:97
+#: src/components/VFilters/VFilterChecklist.vue:98
 msgctxt "filters.search-by.title"
 msgid "Search By"
 msgstr ""