From 16538680793c65d000c7861421fb523858929044 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Mon, 9 May 2022 13:51:00 +0100
Subject: [PATCH 1/2] Add license explanation to close button label

---
 src/components/VFilters/VFilterChecklist.vue | 13 ++++++++++++-
 src/locales/en.json                          |  2 +-
 src/locales/po-files/openverse.pot           |  7 ++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/VFilters/VFilterChecklist.vue b/src/components/VFilters/VFilterChecklist.vue
index 5153580ef6..792ae47851 100644
--- a/src/components/VFilters/VFilterChecklist.vue
+++ b/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', {
+        name: this.$t('browse-page.aria.license-explanation'),
+      })
+      return `${descriptions} - ${close}`
+    },
   },
 }
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index c5c04c7038..1f85f83264 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -606,7 +606,7 @@
   },
   "interpunct": "•",
   "modal": {
-    "close": "Close"
+    "close": "Close {name}"
   },
   "error-images": {
     "depressed-musician": "A depressed pianist rests their head in their hands.",
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 802abefffb..a00c973252 100644
--- a/src/locales/po-files/openverse.pot
+++ b/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-09T15:17:18+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -136,9 +136,10 @@ msgctxt "error-images.waiting-for-a-bite"
 msgid "Three boys sit on a broken log while two of them fish."
 msgstr ""
 
+#. Do not translate words between ### ###.
 #: src/components/VContentReport/VContentReportPopover.vue:18
 msgctxt "modal.close"
-msgid "Close"
+msgid "Close ###name###"
 msgstr ""
 
 #: src/components/VAudioTrack/layouts/VFullLayout.vue:63
@@ -920,7 +921,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 ""

From 31755427795052614ea19b253dc92202997e9981 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Tue, 10 May 2022 16:31:18 +0100
Subject: [PATCH 2/2] Do not reuse the existing label

---
 src/components/VFilters/VFilterChecklist.vue | 2 +-
 src/locales/en.json                          | 3 ++-
 src/locales/po-files/openverse.pot           | 9 +++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/VFilters/VFilterChecklist.vue b/src/components/VFilters/VFilterChecklist.vue
index 792ae47851..7c233cd922 100644
--- a/src/components/VFilters/VFilterChecklist.vue
+++ b/src/components/VFilters/VFilterChecklist.vue
@@ -122,7 +122,7 @@ export default {
       const descriptions = elements
         .map((element) => this.$t(`browse-page.license-description.${element}`))
         .join(' ')
-      const close = this.$t('modal.close', {
+      const close = this.$t('modal.close-named', {
         name: this.$t('browse-page.aria.license-explanation'),
       })
       return `${descriptions} - ${close}`
diff --git a/src/locales/en.json b/src/locales/en.json
index 1f85f83264..756f0deb5f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -606,7 +606,8 @@
   },
   "interpunct": "•",
   "modal": {
-    "close": "Close {name}"
+    "close": "Close",
+    "close-named": "Close {name}"
   },
   "error-images": {
     "depressed-musician": "A depressed pianist rests their head in their hands.",
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index a00c973252..19c68b0ec1 100644
--- a/src/locales/po-files/openverse.pot
+++ b/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-09T15:17:18+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"
@@ -136,9 +136,14 @@ msgctxt "error-images.waiting-for-a-bite"
 msgid "Three boys sit on a broken log while two of them fish."
 msgstr ""
 
-#. Do not translate words between ### ###.
 #: src/components/VContentReport/VContentReportPopover.vue:18
 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 ""