Use more accessible remove filter button label

WordPress · Oct 15, 2021 · 352fa6b · 352fa6b
1 parent 107526c
commit 352fa6b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 35 deletions.
diff --git a/src/components/Filters/FilterTag.vue b/src/components/Filters/FilterTag.vue
@@ -1,18 +1,12 @@
 <template>
-  <div
+  <button
     class="button tiny tag"
-    :aria-label="$t('filters.filter-tag-aria', { filterLabel: filterLabel })"
+    :aria-label="$t('filters.aria.remove-filter', { label: filterLabel })"
+    @click="onClick"
   >
     <span>{{ filterLabel }}</span>
-    <span
-      role="button"
-      class="close ml-2 p-2"
-      tabindex="0"
-      @click="onClick"
-      @keyup.enter="onClick"
-      ><i class="icon cross"
-    /></span>
-  </div>
+    <span class="close ml-2 p-2"><i class="icon cross" /></span>
+  </button>
 </template>
 <script>
 export default {

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -305,7 +305,6 @@
   "filters": {
     "title": "Filters",
     "filter-by": "Filter By",
-    "filter-tag-aria": "{filterLabel} filter",
     "licenses": {
       "title": "License or Public Domain",
       "cc0": "CC0",
@@ -386,6 +385,9 @@
       "tool": "Read more about the tool {link}",
       "license": "Read more about the license {link}",
       "link": "here"
+    },
+    "aria": {
+      "remove-filter": "Remove {label} filter"
     }
   },
   "filter-list": {

diff --git 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: 2021-10-06T12:05:17+00:00\n"
+"POT-Creation-Date: 2021-10-15T17:04:28+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -954,7 +954,7 @@ msgid "Couldn't find image with id ###id###"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/audio/_id.vue:96
+#: src/pages/audio/_id.vue:79
 msgctxt "error.media-not-found"
 msgid "Couldn't find ###mediaType### with id ###id###"
 msgstr ""
@@ -993,12 +993,6 @@ msgctxt "filters.filter-by"
 msgid "Filter By"
 msgstr ""
 
-#. Do not translate words between ### ###.
-#: src/components/Filters/FilterTag.vue:4
-msgctxt "filters.filter-tag-aria"
-msgid "###filterLabel### filter"
-msgstr ""
-
 #: src/components/HeroSection.vue:6
 msgctxt "hero.title"
 msgid "License or Public Domain"
@@ -1206,7 +1200,7 @@ msgid "Creator"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/Filters/LicenseExplanationTooltip.vue:8
+#: src/components/Filters/LicenseExplanationTooltip.vue:12
 msgctxt "filters.license-explanation.tool"
 msgid "Read more about the tool ###link###"
 msgstr ""
@@ -1222,6 +1216,12 @@ msgctxt "hero.caption.link"
 msgid "here"
 msgstr ""
 
+#. Do not translate words between ### ###.
+#: src/components/Filters/FilterTag.vue:4
+msgctxt "filters.aria.remove-filter"
+msgid "Remove ###label### filter"
+msgstr ""
+
 #: src/components/Filters/FilterDisplay.vue:4
 msgctxt "filters.filter-by"
 msgid "Filter results by"
@@ -1447,7 +1447,8 @@ msgctxt "browse-page.search-rating.no"
 msgid "relevant result? answer: no"
 msgstr ""
 
-msgctxt "browse-page.aria.remove-filter"
+#: src/components/Filters/FilterTag.vue:4
+msgctxt "filters.aria.remove-filter"
 msgid "remove filter"
 msgstr ""
 
@@ -1580,7 +1581,7 @@ msgctxt "feedback.loading"
 msgid "Loading..."
 msgstr ""
 
-#: src/components/AudioDetails/Related.vue:51
+#: src/components/AudioDetails/Related.vue:18
 msgctxt "media-details.related-error"
 msgid "Error fetching related media"
 msgstr ""
@@ -1665,7 +1666,7 @@ msgctxt "photo-details.legal-disclaimer"
 msgid "Openverse aggregates data from publicly available repositories of open content. Openverse does not host the content and does not verify that the content is properly CC-licensed or that the attribution information is accurate or complete. Please follow the link to the source of the content to independently verify before reuse."
 msgstr ""
 
-#: src/components/RelatedImages.vue:7
+#: src/components/ImageDetails/RelatedImages.vue:7
 msgctxt "photo-details.related-images"
 msgid "Related Images"
 msgstr ""
@@ -1772,7 +1773,7 @@ msgctxt "meta-search-page.license"
 msgid "read more about the license"
 msgstr ""
 
-#: src/components/Filters/LicenseExplanationTooltip.vue:8
+#: src/components/Filters/LicenseExplanationTooltip.vue:12
 msgctxt "filters.license-explanation.tool"
 msgid "read more about the tool"
 msgstr ""

diff --git a/test/unit/specs/components/__snapshots__/filter-display.spec.js.snap b/test/unit/specs/components/__snapshots__/filter-display.spec.js.snap
@@ -13,8 +13,8 @@ exports[`FilterDisplay should render correct contents 1`] = `
   
   </span>
    
-  <div
-    aria-label="filters.filter-tag-aria"
+  <button
+    aria-label="filters.aria.remove-filter"
     class="button tiny tag mx-1 mb-2 ml-2"
   >
     <span>
@@ -23,13 +23,11 @@ exports[`FilterDisplay should render correct contents 1`] = `
      
     <span
       class="close ml-2 p-2"
-      role="button"
-      tabindex="0"
     >
       <i
         class="icon cross"
       />
     </span>
-  </div>
+  </button>
 </div>
 `;
diff --git a/test/unit/specs/components/__snapshots__/filter-tag.spec.js.snap b/test/unit/specs/components/__snapshots__/filter-tag.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FilterTag should render correct contents 1`] = `
-<div
-  aria-label="filters.filter-tag-aria"
+<button
+  aria-label="filters.aria.remove-filter"
   class="button tiny tag"
 >
   <span>
@@ -11,12 +11,10 @@ exports[`FilterTag should render correct contents 1`] = `
    
   <span
     class="close ml-2 p-2"
-    role="button"
-    tabindex="0"
   >
     <i
       class="icon cross"
     />
   </span>
-</div>
+</button>
 `;