Allow overriding language string for removing an item

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>`;

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);
     };

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',

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.
    *

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(
+      removeButton.setAttribute('aria-label', `${removeItemText}: '${value}'`);
-        'aria-label',
-        `${REMOVE_ITEM_TEXT}: '${value}'`,
-      );
       removeButton.dataset.button = '';
       div.appendChild(removeButton);
     }