fix tag button

docs/resources/changelog.md

@@ -14,6 +14,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that prevented form submission from working as expected in some cases
 - Fixed a bug that prevented `<sl-split-panel>` from toggling `vertical` properly [#703](https://github.com/shoelace-style/shoelace/issues/703)
 - Fixed a bug that prevented `<sl-color-picker>` from rendering a color initially [#704](https://github.com/shoelace-style/shoelace/issues/704)
+- Improved accessibility in `<sl-tag>` so remove buttons are announced by screen readers
 - Refactored `<sl-radio>` to move selection logic into `<sl-radio-group>`
 - Upgraded the status of `<sl-visually-hidden>` from experimental to stable
 

src/components/tag/tag.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '~/components/icon-button/icon-button';
 import { emit } from '~/internal/event';
+import { LocalizeController } from '~/utilities/localize';
 import styles from './tag.styles';
 
 /**
@@ -23,6 +24,7 @@ import styles from './tag.styles';
 @customElement('sl-tag')
 export default class SlTag extends LitElement {
   static styles = styles;
+  private readonly localize = new LocalizeController(this);
 
   /** The tag's variant. */
   @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
@@ -76,6 +78,7 @@ export default class SlTag extends LitElement {
                 exportparts="base:remove-button__base"
                 name="x"
                 library="system"
+                label=${this.localize.term('remove')}
                 class="tag__remove"
                 @click=${this.handleRemoveClick}
               ></sl-icon-button>

src/translations/da.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Luk',
   copy: 'Kopier',
   progress: 'Status',
+  remove: 'Fjerne',
   resize: 'Tipas størrelse',
   scrollToEnd: 'Scroll til slut',
   scrollToStart: 'Scroll til start',

src/translations/de-ch.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Schliessen',
   copy: 'Kopieren',
   progress: 'Fortschritt',
+  remove: 'Verwijderen',
   resize: 'Größe ändern',
   scrollToEnd: 'Zum Ende scrollen',
   scrollToStart: 'Zum Anfang scrollen',

src/translations/de.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Schließen',
   copy: 'Kopieren',
   progress: 'Fortschritt',
+  remove: 'Verwijderen',
   resize: 'Größe ändern',
   scrollToEnd: 'Zum Ende scrollen',
   scrollToStart: 'Zum Anfang scrollen',

src/translations/en.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Close',
   copy: 'Copy',
   progress: 'Progress',
+  remove: 'Remove',
   resize: 'Resize',
   scrollToEnd: 'Scroll to end',
   scrollToStart: 'Scroll to start',

src/translations/es.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Cerrar',
   copy: 'Copiar',
   progress: 'Progreso',
+  remove: 'Eliminar',
   resize: 'Cambiar el tamaño',
   scrollToEnd: 'Desplazarse hasta el final',
   scrollToStart: 'Desplazarse al inicio',

src/translations/fr.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Fermer',
   copy: 'Copier',
   progress: 'Progrès',
+  remove: 'Retirer',
   resize: 'Redimensionner',
   scrollToEnd: `Faire défiler jusqu'à la fin`,
   scrollToStart: `Faire défiler jusqu'au début`,

src/translations/he.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'סגור',
   copy: 'העתק',
   progress: 'התקדמות',
+  remove: 'לְהַסִיר',
   resize: 'שנה גודל',
   scrollToEnd: 'גלול עד הסוף',
   scrollToStart: 'גלול להתחלה',

src/translations/ja.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: '閉じる',
   copy: 'コピー',
   progress: '進行',
+  remove: '削除',
   resize: 'サイズ変更',
   scrollToEnd: '最後にスクロールする',
   scrollToStart: '最初にスクロールする',

src/translations/nl.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Sluiten',
   copy: 'Kopiëren',
   progress: 'Voortgang',
+  remove: 'Verwijderen',
   resize: 'Formaat wijzigen',
   scrollToEnd: 'Scroll naar einde',
   scrollToStart: 'Scroll naar begin',

src/translations/pl.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Zamknij',
   copy: 'Kopiuj',
   progress: 'Postęp',
+  remove: 'Usunąć',
   resize: 'Zmień rozmiar',
   scrollToEnd: 'Przewiń do końca',
   scrollToStart: 'Przewiń do początku',

src/translations/pt.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Fechar',
   copy: 'Copiar',
   progress: 'Progresso',
+  remove: 'Remover',
   resize: 'Mudar o tamanho',
   scrollToEnd: 'Rolar até o final',
   scrollToStart: 'Rolar até o começo',

src/translations/ru.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Закрыть',
   copy: 'Скопировать',
   progress: 'Прогресс',
+  remove: 'Удалять',
   resize: 'Изменить размер',
   scrollToEnd: 'Пролистать до конца',
   scrollToStart: 'Пролистать к началу',