improve spinner a11y

docs/resources/changelog.md

@@ -15,6 +15,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where auto-size wasn't being applied to `<sl-dropdown>` and `<sl-select>`
 - Fixed a bug in `<sl-popup>` that caused auto-size to kick in before flip
 - Fixed a bug in `<sl-popup>` that prevented the `arrow-padding` attribute from working as expected
+- Improved accessibility of `<sl-spinner>` so screen readers no longer skip over it
 - Removed the default hover effect in `<sl-tree-items>` to make selections more obvious
 
 ## 2.0.0-beta.80

src/components/spinner/spinner.ts

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { LocalizeController } from '../../utilities/localize';
 import styles from './spinner.styles';
 import type { CSSResultGroup } from 'lit';
 
@@ -18,9 +19,11 @@ import type { CSSResultGroup } from 'lit';
 export default class SlSpinner extends LitElement {
   static styles: CSSResultGroup = styles;
 
+  private readonly localize = new LocalizeController(this);
+
   render() {
     return html`
-      <svg part="base" class="spinner" role="status">
+      <svg part="base" class="spinner" role="progressbar" aria-valuetext=${this.localize.term('loading')}>
         <circle class="spinner__track"></circle>
         <circle class="spinner__indicator"></circle>
       </svg>

src/translations/da.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Kopier',
   currentValue: 'Nuværende regerer',
   hidePassword: 'Skjul adgangskode',
+  loading: 'Indlæser',
   progress: 'Status',
   remove: 'Fjerne',
   resize: 'Tipas størrelse',

src/translations/de-ch.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Kopieren',
   currentValue: 'Aktueller Wert',
   hidePassword: 'Passwort verbergen',
+  loading: 'Wird geladen',
   progress: 'Fortschritt',
   remove: 'Entfernen',
   resize: 'Grösse ändern',

src/translations/de.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Kopieren',
   currentValue: 'Aktueller Wert',
   hidePassword: 'Passwort verbergen',
+  loading: 'Wird geladen',
   progress: 'Fortschritt',
   remove: 'Entfernen',
   resize: 'Größe ändern',

src/translations/en.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Copy',
   currentValue: 'Current value',
   hidePassword: 'Hide password',
+  loading: 'Loading',
   progress: 'Progress',
   remove: 'Remove',
   resize: 'Resize',

src/translations/es.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Copiar',
   currentValue: 'Valor actual',
   hidePassword: 'Ocultar contraseña',
+  loading: 'Cargando',
   progress: 'Progreso',
   remove: 'Eliminar',
   resize: 'Cambiar el tamaño',

src/translations/fa.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'کپی',
   currentValue: 'مقدار فعلی',
   hidePassword: 'پنهان کردن رمز',
+  loading: 'بارگذاری',
   progress: 'پیشرفت',
   remove: 'حذف',
   resize: 'تغییر اندازه',

src/translations/fr.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Copier',
   currentValue: 'Valeur actuelle',
   hidePassword: 'Masquer le mot de passe',
+  loading: 'Chargement',
   progress: 'Progrès',
   remove: 'Retirer',
   resize: 'Redimensionner',

src/translations/he.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'העתק',
   currentValue: 'ערך נוכחי',
   hidePassword: 'הסתר סיסמא',
+  loading: 'טוען',
   progress: 'התקדמות',
   remove: 'לְהַסִיר',
   resize: 'שנה גודל',

src/translations/ja.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'コピー',
   currentValue: '現在の価値',
   hidePassword: 'パスワードを隠す',
+  loading: '読み込み中',
   progress: '進行',
   remove: '削除',
   resize: 'サイズ変更',

src/translations/nl.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Kopiëren',
   currentValue: 'Huidige waarde',
   hidePassword: 'Verberg wachtwoord',
+  loading: 'Bezig met laden',
   progress: 'Voortgang',
   remove: 'Verwijderen',
   resize: 'Formaat wijzigen',

src/translations/pl.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Kopiuj',
   currentValue: 'Aktualna wartość',
   hidePassword: 'Ukryj hasło',
+  loading: 'Ładowanie',
   progress: 'Postęp',
   remove: 'Usunąć',
   resize: 'Zmień rozmiar',

src/translations/pt.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Copiar',
   currentValue: 'Valor atual',
   hidePassword: 'Esconder a senha',
+  loading: 'Carregando',
   progress: 'Progresso',
   remove: 'Remover',
   resize: 'Mudar o tamanho',

src/translations/ru.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Скопировать',
   currentValue: 'Текущая стоимость',
   hidePassword: 'Скрыть пароль',
+  loading: 'Загрузка',
   progress: 'Прогресс',
   remove: 'Удалять',
   resize: 'Изменить размер',

src/translations/sv.ts

@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Kopiera',
   currentValue: 'Nuvarande värde',
   hidePassword: 'Dölj lösenord',
+  loading: 'Läser in',
   progress: 'Framsteg',
   remove: 'Ta bort',
   resize: 'Ändra storlek',

src/utilities/localize.ts

@@ -18,6 +18,7 @@ export interface Translation extends DefaultTranslation {
   copy: string;
   currentValue: string;
   hidePassword: string;
+  loading: string;
   progress: string;
   remove: string;
   resize: string;