diff --git a/libs/components/src/lib/tag/locale.ts b/libs/components/src/lib/tag/locale.ts index 241a25e9a1..979de8f898 100644 --- a/libs/components/src/lib/tag/locale.ts +++ b/libs/components/src/lib/tag/locale.ts @@ -1,3 +1,3 @@ export interface TagLocale { - remove: (label: string) => string; + remove: string; } diff --git a/libs/components/src/lib/tag/tag.template.ts b/libs/components/src/lib/tag/tag.template.ts index d2a72ebf96..1aefaf9ea7 100644 --- a/libs/components/src/lib/tag/tag.template.ts +++ b/libs/components/src/lib/tag/tag.template.ts @@ -33,8 +33,9 @@ function renderDismissButton(iconTag: string) { return html` `; @@ -50,8 +51,12 @@ export const tagTemplate = (context: VividElementDefinitionContext) => { role: 'option', ariaDisabled: (x) => x.disabled, ariaSelected: (x) => x.selected && x.selectable, + ariaLabel: (x) => + x.removable && !x.disabled + ? `${x.label ?? x.ariaLabel}. ${x.locale.tag.remove}` + : x.label ?? x.ariaLabel, })} - tabindex="${(x) => (x.disabled || x.removable ? null : 0)}" + tabindex="${(x) => (x.disabled ? null : 0)}" @keydown="${(x, c) => x.handleKeydown(c.event as KeyboardEvent)}" @click="${(x) => x.handleClick()}" > diff --git a/libs/components/src/locales/de-DE.ts b/libs/components/src/locales/de-DE.ts index dc9b83cb6e..6a4a0f4dc5 100644 --- a/libs/components/src/locales/de-DE.ts +++ b/libs/components/src/locales/de-DE.ts @@ -242,7 +242,7 @@ const deDE: Locale = { `Weiter zu Seite ${index}`, }, tag: { - remove: /* istanbul ignore next */ (label: string) => `Entfernen ${label}`, + remove: 'Drücken Sie zum Entfernen die ENTF- oder RÜCKTASTE.', }, toggletip: { anchorLabel: /* istanbul ignore next */ (ariaLabel?: string) => diff --git a/libs/components/src/locales/en-GB.ts b/libs/components/src/locales/en-GB.ts index beef7f4e28..5036407d9f 100644 --- a/libs/components/src/locales/en-GB.ts +++ b/libs/components/src/locales/en-GB.ts @@ -240,7 +240,7 @@ const enGB: Locale = { `Go to page ${index}`, }, tag: { - remove: /* istanbul ignore next */ (label: string) => `Remove ${label}`, + remove: 'Press DELETE or BACKSPACE to remove.', }, toggletip: { anchorLabel: /* istanbul ignore next */ (ariaLabel?: string) => diff --git a/libs/components/src/locales/en-US.ts b/libs/components/src/locales/en-US.ts index 229d8c55e7..549bfcea70 100644 --- a/libs/components/src/locales/en-US.ts +++ b/libs/components/src/locales/en-US.ts @@ -240,7 +240,7 @@ const enUS: Locale = { `Go to page ${index}`, }, tag: { - remove: /* istanbul ignore next */ (label: string) => `Remove ${label}`, + remove: 'Press DELETE or BACKSPACE to remove.', }, toggletip: { anchorLabel: /* istanbul ignore next */ (ariaLabel?: string) => diff --git a/libs/components/src/locales/ja-JP.ts b/libs/components/src/locales/ja-JP.ts index 4957453511..75b9c79baa 100644 --- a/libs/components/src/locales/ja-JP.ts +++ b/libs/components/src/locales/ja-JP.ts @@ -240,7 +240,7 @@ const jaJP: Locale = { `${index}ページへ`, }, tag: { - remove: /* istanbul ignore next */ (label: string) => `削除する ${label}`, + remove: '削除するには、DELETE キーまたは BACKSPACE キーを押します。', }, toggletip: { anchorLabel: /* istanbul ignore next */ (ariaLabel?: string) => diff --git a/libs/components/src/locales/zh-CN.ts b/libs/components/src/locales/zh-CN.ts index 4ce5538217..8d036d7159 100644 --- a/libs/components/src/locales/zh-CN.ts +++ b/libs/components/src/locales/zh-CN.ts @@ -240,7 +240,7 @@ const zhCN: Locale = { `转至第 ${index} 页`, }, tag: { - remove: /* istanbul ignore next */ (label: string) => `移除 ${label}`, + remove: '按 DELETE 或 BACKSPACE 键删除。', }, toggletip: { anchorLabel: /* istanbul ignore next */ (ariaLabel?: string) =>