fix(VChip): add close button aria-label (#12384)

vuetifyjs · Nov 10, 2020 · 9cd505d · 9cd505d
1 parent 8c5ee02
commit 9cd505d
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 1 deletion.
diff --git a/packages/api-generator/.gitignore b/packages/api-generator/.gitignore
@@ -1,3 +1,3 @@
 /dist/
 /src/locale/*
-!/src/en
+!/src/locale/en
diff --git a/packages/api-generator/src/locale/en/v-chip.json b/packages/api-generator/src/locale/en/v-chip.json
@@ -3,6 +3,7 @@
     "active": "Determines whether the chip is visible or not.",
     "close": "Adds remove button",
     "closeIcon": "Change the default icon used for **close** chips",
+    "closeLabel": "Text used for *aria-label* on the close button in **close** chips. Can also be customized globally in [Internationalization](/customization/internationalization).",
     "disabled": "Disables the chip, making it un-selectable",
     "draggable": "Makes the chip draggable",
     "filter": "Displays a selection icon when selected",

diff --git a/packages/vuetify/src/components/VChip/VChip.ts b/packages/vuetify/src/components/VChip/VChip.ts
@@ -52,6 +52,10 @@ export default mixins(
       type: String,
       default: '$delete',
     },
+    closeLabel: {
+      type: String,
+      default: '$vuetify.close',
+    },
     disabled: Boolean,
     draggable: Boolean,
     filter: Boolean,
@@ -146,6 +150,9 @@ export default mixins(
           right: true,
           size: 18,
         },
+        attrs: {
+          'aria-label': this.$vuetify.lang.t(this.closeLabel),
+        },
         on: {
           click: (e: Event) => {
             e.stopPropagation()

diff --git a/packages/vuetify/src/components/VChip/__tests__/VChip.spec.ts b/packages/vuetify/src/components/VChip/__tests__/VChip.spec.ts
@@ -30,6 +30,13 @@ describe('VChip.ts', () => {
         sync: false,
         localVue,
         router,
+        mocks: {
+          $vuetify: {
+            lang: {
+              t: (val: string) => val,
+            },
+          },
+        },
         ...options,
       })
     }

diff --git a/packages/vuetify/src/components/VChip/__tests__/__snapshots__/VChip.spec.ts.snap b/packages/vuetify/src/components/VChip/__tests__/__snapshots__/VChip.spec.ts.snap
@@ -4,6 +4,7 @@ exports[`VChip.ts should be removable 1`] = `
 <span class="v-chip v-chip--no-color v-chip--removable theme--light v-size--default">
   <span class="v-chip__content">
     <button type="button"
+            aria-label="$vuetify.close"
             class="v-icon notranslate v-chip__close v-icon--link v-icon--right material-icons theme--light"
             style="font-size: 18px;"
     >