From bf705a186ef61522831f1fa2911806a567726f86 Mon Sep 17 00:00:00 2001
From: wilsonge <georgejameswilson@googlemail.com>
Date: Sat, 9 May 2020 00:58:56 +0100
Subject: [PATCH] Allow overriding language string for removing an item

---
 README.md                 |  1 +
 src/scripts/choices.ts    |  7 ++++++-
 src/scripts/constants.ts  |  1 +
 src/scripts/interfaces.ts |  9 +++++++++
 src/scripts/templates.ts  | 11 ++++-------
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 9721e3e6b..546fb72d3 100644
--- a/README.md
+++ b/README.md
@@ -129,6 +129,7 @@ Or include Choices directly:
     loadingText: 'Loading...',
     noResultsText: 'No results found',
     noChoicesText: 'No choices to choose from',
+    removeItemText: 'Remove item',
     itemSelectText: 'Press to select',
     addItemText: (value) => {
       return `Press Enter to add <b>"${value}"</b>`;
diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts
index 238bef8bd..90543a978 100644
--- a/src/scripts/choices.ts
+++ b/src/scripts/choices.ts
@@ -981,7 +981,12 @@ class Choices {
 
     const addItemToFragment = (item: Item): void => {
       // Create new list element
-      const listItem = this._getTemplate('item', item, removeItemButton);
+      const listItem = this._getTemplate(
+        'item',
+        item,
+        removeItemButton,
+        this.config.removeItemText,
+      );
       // Append it to list
       fragment.appendChild(listItem);
     };
diff --git a/src/scripts/constants.ts b/src/scripts/constants.ts
index e8338077e..741e74a33 100644
--- a/src/scripts/constants.ts
+++ b/src/scripts/constants.ts
@@ -69,6 +69,7 @@ export const DEFAULT_CONFIG: Options = {
   loadingText: 'Loading...',
   noResultsText: 'No results found',
   noChoicesText: 'No choices to choose from',
+  removeItemText: 'Remove item',
   itemSelectText: 'Press to select',
   uniqueItemText: 'Only unique values can be added',
   customAddItemText: 'Only values matching specific conditions can be added',
diff --git a/src/scripts/interfaces.ts b/src/scripts/interfaces.ts
index 9d0236823..1d7578795 100644
--- a/src/scripts/interfaces.ts
+++ b/src/scripts/interfaces.ts
@@ -631,6 +631,15 @@ export interface Options {
    */
   noChoicesText: string | Types.stringFunction;
 
+  /**
+   * The text that is used in the aria-label of the remove button.
+   *
+   * **Input types affected:** select-multiple
+   *
+   * @default 'Remove item'
+   */
+  removeItemText: string | Types.stringFunction;
+
   /**
    * The text that is shown when a user hovers over a selectable choice.
    *
diff --git a/src/scripts/templates.ts b/src/scripts/templates.ts
index cb569210e..e3a746c4b 100644
--- a/src/scripts/templates.ts
+++ b/src/scripts/templates.ts
@@ -94,6 +94,7 @@ const templates = {
       placeholder: isPlaceholder,
     }: Item,
     removeItemButton: boolean,
+    removeItemText: string,
   ): HTMLDivElement {
     const div = Object.assign(document.createElement('div'), {
       className: item,
@@ -126,17 +127,13 @@ const templates = {
         div.classList.remove(itemSelectable);
       }
       div.dataset.deletable = '';
-      /** @todo This MUST be localizable, not hardcoded! */
-      const REMOVE_ITEM_TEXT = 'Remove item';
+
       const removeButton = Object.assign(document.createElement('button'), {
         type: 'button',
         className: button,
-        innerHTML: REMOVE_ITEM_TEXT,
+        innerHTML: removeItemText,
       });
-      removeButton.setAttribute(
-        'aria-label',
-        `${REMOVE_ITEM_TEXT}: '${value}'`,
-      );
+      removeButton.setAttribute('aria-label', `${removeItemText}: '${value}'`);
       removeButton.dataset.button = '';
       div.appendChild(removeButton);
     }