Allow remove item icon/text to be localized

Author: Xon

src/scripts/defaults.ts

@@ -70,6 +70,8 @@ export const DEFAULT_CONFIG: Options = {
   uniqueItemText: 'Only unique values can be added',
   customAddItemText: 'Only values matching specific conditions can be added',
   addItemText: (value) => `Press Enter to add <b>"${sanitise(value)}"</b>`,
+  removeItemIconText: (value) => `Remove item`,
+  removeItemLabelText: (value) => `Remove item: ${sanitise(value)}`,
   maxItemText: (maxItemCount) => `Only ${maxItemCount} values can be added`,
   valueComparer: (value1, value2) => value1 === value2,
   fuseOptions: {

src/scripts/interfaces/options.ts

@@ -139,6 +139,30 @@ export interface Options {
    */
   addItemText: string | Types.NoticeStringFunction;
 
+  /**
+   * The text/icon for the remove button. To access the item's value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
+   *
+   * **Input types affected:** text
+   *
+   * @default
+   * ```
+   * (value) => `Remove item`;
+   * ```
+   */
+  removeItemIconText: string | Types.NoticeStringFunction;
+
+  /**
+   * The text for the remove button's aria label. To access the item's value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
+   *
+   * **Input types affected:** text
+   *
+   * @default
+   * ```
+   * (value) => `Remove item: ${value}`;
+   * ```
+   */
+  removeItemLabelText: string | Types.NoticeStringFunction;
+
   /**
    * Whether a user can remove items.
    *

src/scripts/templates.ts

@@ -132,16 +132,23 @@ const templates = {
         div.classList.remove(itemSelectable);
       }
       div.dataset.deletable = '';
-      /** @todo This MUST be localizable, not hardcoded! */
-      const REMOVE_ITEM_TEXT = 'Remove item';
+
+      let REMOVE_ITEM_ICON =
+        typeof this.config.removeItemIconText === 'function'
+          ? this.config.removeItemIconText(value)
+          : this.config.removeItemIconText;
+      let REMOVE_ITEM_LABEL =
+        typeof this.config.removeItemLabelText === 'function'
+          ? this.config.removeItemLabelText(value)
+          : this.config.removeItemLabelText;
       const removeButton = Object.assign(document.createElement('button'), {
         type: 'button',
         className: button,
-        [allowHTML ? 'innerHTML' : 'innerText']: REMOVE_ITEM_TEXT,
+        [allowHTML ? 'innerHTML' : 'innerText']: REMOVE_ITEM_ICON,
       });
       removeButton.setAttribute(
         'aria-label',
-        `${REMOVE_ITEM_TEXT}: '${value}'`,
+        `${REMOVE_ITEM_LABEL}: '${value}'`,
       );
       removeButton.dataset.button = '';
       div.appendChild(removeButton);