fix(tag): change screen reader announcements of removable tags (VIV-2849)

libs/components/src/lib/tag/locale.ts

@@ -1,3 +1,3 @@
 export interface TagLocale {
-	remove: (label: string) => string;
+	remove: string;
 }

libs/components/src/lib/tag/tag.template.ts

@@ -33,8 +33,9 @@ function renderDismissButton(iconTag: string) {
 	return html<Tag>`
 	<button
 		class="dismiss-button"
-		aria-label="${(x) => x.locale.tag.remove(x.label as string)}"
 		?disabled="${(x) => x.disabled}"
+    aria-hidden="true"
+    tabindex="-1"
 		@click="${(x) => x.remove()}">
 		<${iconTag} name="close-line"></${iconTag}>
 	</button>`;
@@ -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()}"
 	>

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) =>

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) =>

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) =>

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) =>

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) =>