diff --git a/README.md b/README.md index 9721e3e..546fb72 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 "${value}"`; diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts index 238bef8..90543a9 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 e833807..741e74a 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 9d02368..1d75787 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 cb56921..e3a746c 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); }