From b3b3956ff53d8c8740de71b17454646ea6e73c1d Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 10 Aug 2022 16:52:39 -0400
Subject: [PATCH] improve spinner a11y

---
 docs/resources/changelog.md       | 1 +
 src/components/spinner/spinner.ts | 5 ++++-
 src/translations/da.ts            | 1 +
 src/translations/de-ch.ts         | 1 +
 src/translations/de.ts            | 1 +
 src/translations/en.ts            | 1 +
 src/translations/es.ts            | 1 +
 src/translations/fa.ts            | 1 +
 src/translations/fr.ts            | 1 +
 src/translations/he.ts            | 1 +
 src/translations/ja.ts            | 1 +
 src/translations/nl.ts            | 1 +
 src/translations/pl.ts            | 1 +
 src/translations/pt.ts            | 1 +
 src/translations/ru.ts            | 1 +
 src/translations/sv.ts            | 1 +
 src/utilities/localize.ts         | 1 +
 17 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index b6ccbc74..5966dcdb 100644
--- a/docs/resources/changelog.md
+++ b/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
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index dc6479be..a65936ce 100644
--- a/src/components/spinner/spinner.ts
+++ b/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>
diff --git a/src/translations/da.ts b/src/translations/da.ts
index 237e4a7d..e319ce8b 100644
--- a/src/translations/da.ts
+++ b/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',
diff --git a/src/translations/de-ch.ts b/src/translations/de-ch.ts
index cc69e5be..5b2cb1c8 100644
--- a/src/translations/de-ch.ts
+++ b/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',
diff --git a/src/translations/de.ts b/src/translations/de.ts
index 078c7b7f..509d21cc 100644
--- a/src/translations/de.ts
+++ b/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',
diff --git a/src/translations/en.ts b/src/translations/en.ts
index 1354d818..52a99423 100644
--- a/src/translations/en.ts
+++ b/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',
diff --git a/src/translations/es.ts b/src/translations/es.ts
index a3a494c1..5a734b2e 100644
--- a/src/translations/es.ts
+++ b/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',
diff --git a/src/translations/fa.ts b/src/translations/fa.ts
index 1382cf15..88f2b3d4 100644
--- a/src/translations/fa.ts
+++ b/src/translations/fa.ts
@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'کپی',
   currentValue: 'مقدار فعلی',
   hidePassword: 'پنهان کردن رمز',
+  loading: 'بارگذاری',
   progress: 'پیشرفت',
   remove: 'حذف',
   resize: 'تغییر اندازه',
diff --git a/src/translations/fr.ts b/src/translations/fr.ts
index 446f66ca..fcb0b505 100644
--- a/src/translations/fr.ts
+++ b/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',
diff --git a/src/translations/he.ts b/src/translations/he.ts
index 8d2a8ddd..7238b336 100644
--- a/src/translations/he.ts
+++ b/src/translations/he.ts
@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'העתק',
   currentValue: 'ערך נוכחי',
   hidePassword: 'הסתר סיסמא',
+  loading: 'טוען',
   progress: 'התקדמות',
   remove: 'לְהַסִיר',
   resize: 'שנה גודל',
diff --git a/src/translations/ja.ts b/src/translations/ja.ts
index d5b646c0..731f453a 100644
--- a/src/translations/ja.ts
+++ b/src/translations/ja.ts
@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'コピー',
   currentValue: '現在の価値',
   hidePassword: 'パスワードを隠す',
+  loading: '読み込み中',
   progress: '進行',
   remove: '削除',
   resize: 'サイズ変更',
diff --git a/src/translations/nl.ts b/src/translations/nl.ts
index 6b6b8dcf..dc020846 100644
--- a/src/translations/nl.ts
+++ b/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',
diff --git a/src/translations/pl.ts b/src/translations/pl.ts
index b190f94e..793024e9 100644
--- a/src/translations/pl.ts
+++ b/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',
diff --git a/src/translations/pt.ts b/src/translations/pt.ts
index 28399459..1b77ef66 100644
--- a/src/translations/pt.ts
+++ b/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',
diff --git a/src/translations/ru.ts b/src/translations/ru.ts
index 232dee94..53ad7f9d 100644
--- a/src/translations/ru.ts
+++ b/src/translations/ru.ts
@@ -11,6 +11,7 @@ const translation: Translation = {
   copy: 'Скопировать',
   currentValue: 'Текущая стоимость',
   hidePassword: 'Скрыть пароль',
+  loading: 'Загрузка',
   progress: 'Прогресс',
   remove: 'Удалять',
   resize: 'Изменить размер',
diff --git a/src/translations/sv.ts b/src/translations/sv.ts
index 05da82bf..0974127c 100644
--- a/src/translations/sv.ts
+++ b/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',
diff --git a/src/utilities/localize.ts b/src/utilities/localize.ts
index c236ec52..f9de14f5 100644
--- a/src/utilities/localize.ts
+++ b/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;