From fe2c2ab7afb0dccd149408288073070c6bf64779 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 17 Jul 2025 11:56:41 -0400
Subject: [PATCH] improve accessibility; fixes #1177 (#1190)

---
 .../docs/docs/resources/changelog.md          |  1 +
 .../animated-image/animated-image.css         | 15 +++++++++-
 .../animated-image/animated-image.ts          | 29 ++++++++++++++++---
 packages/webawesome/src/translations/ar.ts    |  2 ++
 packages/webawesome/src/translations/cs.ts    |  2 ++
 packages/webawesome/src/translations/da.ts    |  2 ++
 packages/webawesome/src/translations/de.ts    |  2 ++
 packages/webawesome/src/translations/en.ts    |  2 ++
 packages/webawesome/src/translations/es.ts    |  2 ++
 packages/webawesome/src/translations/fa.ts    |  2 ++
 packages/webawesome/src/translations/fi.ts    |  2 ++
 packages/webawesome/src/translations/fr.ts    |  2 ++
 packages/webawesome/src/translations/he.ts    |  6 ++--
 packages/webawesome/src/translations/hr.ts    |  2 ++
 packages/webawesome/src/translations/hu.ts    |  2 ++
 packages/webawesome/src/translations/id.ts    |  2 ++
 packages/webawesome/src/translations/it.ts    |  2 ++
 packages/webawesome/src/translations/ja.ts    |  2 ++
 packages/webawesome/src/translations/nb.ts    |  2 ++
 packages/webawesome/src/translations/nl.ts    |  2 ++
 packages/webawesome/src/translations/nn.ts    |  2 ++
 packages/webawesome/src/translations/pl.ts    |  2 ++
 packages/webawesome/src/translations/pt.ts    |  2 ++
 packages/webawesome/src/translations/ru.ts    |  2 ++
 packages/webawesome/src/translations/sl.ts    |  2 ++
 packages/webawesome/src/translations/sv.ts    |  2 ++
 packages/webawesome/src/translations/tr.ts    |  2 ++
 packages/webawesome/src/translations/uk.ts    |  2 ++
 packages/webawesome/src/translations/zh-cn.ts |  2 ++
 packages/webawesome/src/translations/zh-tw.ts |  2 ++
 packages/webawesome/src/utilities/localize.ts |  2 ++
 31 files changed, 98 insertions(+), 7 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 987ac9869..600b2012b 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -26,6 +26,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-card>` that caused slotted media to have incorrectly rounded corners [issue:1107]
 - Fixed a bug in `<wa-button-group>` that prevented pill buttons from rendering corners properly [issue:1165]
 - Fixed a bug in `<wa-button-group>` that caused some vertical groups to appear horizontal [issue:1152]
+- Improved accessibility of `<wa-animated-image>` so keyboard users can focus and toggle the animation [issue:1177]
 
 ## 3.0.0-beta.2
 
diff --git a/packages/webawesome/src/components/animated-image/animated-image.css b/packages/webawesome/src/components/animated-image/animated-image.css
index 8e1ab5df2..59f659044 100644
--- a/packages/webawesome/src/components/animated-image/animated-image.css
+++ b/packages/webawesome/src/components/animated-image/animated-image.css
@@ -42,7 +42,7 @@ img[aria-hidden='true'] {
   }
 }
 
-:host([play]:not(:hover)) .control-box {
+:where(:host([play]:not(:hover))) .control-box {
   opacity: 0;
 }
 
@@ -50,3 +50,16 @@ img[aria-hidden='true'] {
 :host(:not([play])) slot[name='pause-icon'] {
   display: none;
 }
+
+/* Show control box on keyboard focus */
+.animated-image {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible .control-box {
+    opacity: 1;
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+}
diff --git a/packages/webawesome/src/components/animated-image/animated-image.ts b/packages/webawesome/src/components/animated-image/animated-image.ts
index b181ca6e0..f12ad4f06 100644
--- a/packages/webawesome/src/components/animated-image/animated-image.ts
+++ b/packages/webawesome/src/components/animated-image/animated-image.ts
@@ -4,6 +4,7 @@ import { WaErrorEvent } from '../../events/error.js';
 import { WaLoadEvent } from '../../events/load.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import styles from './animated-image.css';
 
@@ -30,6 +31,8 @@ import styles from './animated-image.css';
 export default class WaAnimatedImage extends WebAwesomeElement {
   static css = styles;
 
+  private readonly localize = new LocalizeController(this);
+
   @query('.animated') animatedImage: HTMLImageElement;
 
   @state() frozenFrame: string;
@@ -48,6 +51,13 @@ export default class WaAnimatedImage extends WebAwesomeElement {
     this.play = !this.play;
   }
 
+  private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.play = !this.play;
+    }
+  }
+
   private handleLoad() {
     const canvas = document.createElement('canvas');
     const { width, height } = this.animatedImage;
@@ -82,15 +92,26 @@ export default class WaAnimatedImage extends WebAwesomeElement {
   }
 
   render() {
+    const verb = this.localize.term(this.play ? 'pauseAnimation' : 'playAnimation');
+    const label = `${verb} ${this.alt}`;
+
     return html`
-      <div class="animated-image">
+      <div
+        class="animated-image"
+        tabindex="0"
+        role="button"
+        aria-pressed=${this.play ? 'true' : 'false'}
+        aria-label=${label}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
         <img
           class="animated"
           src=${this.src}
           alt=${this.alt}
           crossorigin="anonymous"
           aria-hidden=${this.play ? 'false' : 'true'}
-          @click=${this.handleClick}
+          role="presentation"
           @load=${this.handleLoad}
           @error=${this.handleError}
         />
@@ -102,10 +123,10 @@ export default class WaAnimatedImage extends WebAwesomeElement {
                 src=${this.frozenFrame}
                 alt=${this.alt}
                 aria-hidden=${this.play ? 'true' : 'false'}
-                @click=${this.handleClick}
+                role="presentation"
               />
 
-              <div part="control-box" class="control-box">
+              <div part="control-box" class="control-box" aria-hidden="true">
                 <slot name="play-icon">
                   <wa-icon
                     name="play"
diff --git a/packages/webawesome/src/translations/ar.ts b/packages/webawesome/src/translations/ar.ts
index 6adc2a0be..92cfe3f2a 100644
--- a/packages/webawesome/src/translations/ar.ts
+++ b/packages/webawesome/src/translations/ar.ts
@@ -24,6 +24,8 @@ const translation: Translation = {
     if (num > 2 && num < 11) return `تم تحديد ${num} خيارات`;
     return `تم تحديد ${num} خيار`;
   },
+  pauseAnimation: 'إيقاف الرسوم المتحركة مؤقتًا',
+  playAnimation: 'تشغيل الرسوم المتحركة',
   previousSlide: 'الشريحة السابقة',
   progress: 'مقدار التقدم',
   remove: 'حذف',
diff --git a/packages/webawesome/src/translations/cs.ts b/packages/webawesome/src/translations/cs.ts
index d8214e363..6d3498e7f 100644
--- a/packages/webawesome/src/translations/cs.ts
+++ b/packages/webawesome/src/translations/cs.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Je vybrána jedna možnost';
     return `Počet vybraných možností: ${num}`;
   },
+  pauseAnimation: 'Pozastavit animaci',
+  playAnimation: 'Přehrát animaci',
   previousSlide: 'Předchozí slide',
   progress: 'Průběh',
   remove: 'Odstranit',
diff --git a/packages/webawesome/src/translations/da.ts b/packages/webawesome/src/translations/da.ts
index b3a2e9d86..58274d0c2 100644
--- a/packages/webawesome/src/translations/da.ts
+++ b/packages/webawesome/src/translations/da.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 valgt';
     return `${num} valgt`;
   },
+  pauseAnimation: 'Pause animation',
+  playAnimation: 'Afspil animation',
   previousSlide: 'Forrige dias',
   progress: 'Status',
   remove: 'Fjern',
diff --git a/packages/webawesome/src/translations/de.ts b/packages/webawesome/src/translations/de.ts
index c876db206..eec4e1056 100644
--- a/packages/webawesome/src/translations/de.ts
+++ b/packages/webawesome/src/translations/de.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 Option ausgewählt';
     return `${num} Optionen ausgewählt`;
   },
+  pauseAnimation: 'Animation pausieren',
+  playAnimation: 'Animation abspielen',
   previousSlide: 'Vorherige Folie',
   progress: 'Fortschritt',
   remove: 'Entfernen',
diff --git a/packages/webawesome/src/translations/en.ts b/packages/webawesome/src/translations/en.ts
index 5c5601faa..90b5b6e3a 100644
--- a/packages/webawesome/src/translations/en.ts
+++ b/packages/webawesome/src/translations/en.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 option selected';
     return `${num} options selected`;
   },
+  pauseAnimation: 'Pause animation',
+  playAnimation: 'Play animation',
   previousSlide: 'Previous slide',
   progress: 'Progress',
   remove: 'Remove',
diff --git a/packages/webawesome/src/translations/es.ts b/packages/webawesome/src/translations/es.ts
index fa740c1ce..a4f2347fb 100644
--- a/packages/webawesome/src/translations/es.ts
+++ b/packages/webawesome/src/translations/es.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opción seleccionada';
     return `${num} opción seleccionada`;
   },
+  pauseAnimation: 'Pausar animación',
+  playAnimation: 'Reproducir animación',
   previousSlide: 'Diapositiva anterior',
   progress: 'Progreso',
   remove: 'Eliminar',
diff --git a/packages/webawesome/src/translations/fa.ts b/packages/webawesome/src/translations/fa.ts
index aa3ab9fdd..5f94c1317 100644
--- a/packages/webawesome/src/translations/fa.ts
+++ b/packages/webawesome/src/translations/fa.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 گزینه انتخاب شده است';
     return `${num} گزینه انتخاب شده است`;
   },
+  pauseAnimation: 'مکث انیمیشن',
+  playAnimation: 'پخش انیمیشن',
   previousSlide: 'اسلاید قبلی',
   progress: 'پیشرفت',
   remove: 'حذف',
diff --git a/packages/webawesome/src/translations/fi.ts b/packages/webawesome/src/translations/fi.ts
index 14210828f..fda5c9648 100644
--- a/packages/webawesome/src/translations/fi.ts
+++ b/packages/webawesome/src/translations/fi.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Yksi vaihtoehto valittu';
     return `${num} vaihtoehtoa valittu`;
   },
+  pauseAnimation: 'Keskeytä animaatio',
+  playAnimation: 'Toista animaatio',
   previousSlide: 'Edellinen dia',
   progress: 'Edistyminen',
   remove: 'Poista',
diff --git a/packages/webawesome/src/translations/fr.ts b/packages/webawesome/src/translations/fr.ts
index a6d9bb12c..a64b68ed9 100644
--- a/packages/webawesome/src/translations/fr.ts
+++ b/packages/webawesome/src/translations/fr.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 option sélectionnée';
     return `${num} options sélectionnées`;
   },
+  pauseAnimation: "Suspendre l'animation",
+  playAnimation: "Lire l'animation",
   previousSlide: 'Diapositive précédente',
   progress: 'Progrès',
   remove: 'Retirer',
diff --git a/packages/webawesome/src/translations/he.ts b/packages/webawesome/src/translations/he.ts
index ea564ba2a..597ea955e 100644
--- a/packages/webawesome/src/translations/he.ts
+++ b/packages/webawesome/src/translations/he.ts
@@ -16,13 +16,15 @@ const translation: Translation = {
   goToSlide: (slide, count) => `עבור לשקופית ${slide} של ${count}`,
   hidePassword: 'הסתר סיסמא',
   loading: 'טוען',
-  nextSlide: 'Next slide',
+  nextSlide: 'השקף הבא',
   numOptionsSelected: num => {
     if (num === 0) return 'לא נבחרו אפשרויות';
     if (num === 1) return 'נבחרה אפשרות אחת';
     return `נבחרו ${num} אפשרויות`;
   },
-  previousSlide: 'Previous slide',
+  pauseAnimation: 'השהה אנימציה',
+  playAnimation: 'נגן אנימציה',
+  previousSlide: 'שקופית קודמת',
   progress: 'התקדמות',
   remove: 'לְהַסִיר',
   resize: 'שנה גודל',
diff --git a/packages/webawesome/src/translations/hr.ts b/packages/webawesome/src/translations/hr.ts
index 6f2dcc4d6..f75e9dc10 100644
--- a/packages/webawesome/src/translations/hr.ts
+++ b/packages/webawesome/src/translations/hr.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opcija je odabrana';
     return `${num} odabranih opcija`;
   },
+  pauseAnimation: 'Pauziraj animaciju',
+  playAnimation: 'Reproduciraj animaciju',
   previousSlide: 'Prethodni slajd',
   progress: 'Napredak',
   remove: 'Makni',
diff --git a/packages/webawesome/src/translations/hu.ts b/packages/webawesome/src/translations/hu.ts
index 01d21071a..ee4e6ebd6 100644
--- a/packages/webawesome/src/translations/hu.ts
+++ b/packages/webawesome/src/translations/hu.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 lehetőség kiválasztva';
     return `${num} lehetőség kiválasztva`;
   },
+  pauseAnimation: 'Animáció szüneteltetése',
+  playAnimation: 'Animáció lejátszása',
   previousSlide: 'Előző dia',
   progress: 'Folyamat',
   remove: 'Eltávolítás',
diff --git a/packages/webawesome/src/translations/id.ts b/packages/webawesome/src/translations/id.ts
index 020bb3098..dae489b95 100644
--- a/packages/webawesome/src/translations/id.ts
+++ b/packages/webawesome/src/translations/id.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opsi yang dipilih';
     return `${num} opsi yang dipilih`;
   },
+  pauseAnimation: 'Jeda animasi',
+  playAnimation: 'Putar animasi',
   previousSlide: 'Slide sebelumnya',
   progress: 'Kemajuan',
   remove: 'Hapus',
diff --git a/packages/webawesome/src/translations/it.ts b/packages/webawesome/src/translations/it.ts
index 890099265..8439bf1ec 100644
--- a/packages/webawesome/src/translations/it.ts
+++ b/packages/webawesome/src/translations/it.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opzione selezionata';
     return `${num} opzioni selezionate`;
   },
+  pauseAnimation: 'Metti in pausa animazione',
+  playAnimation: 'Riproduci animazione',
   previousSlide: 'Diapositiva precedente',
   progress: 'Avanzamento',
   remove: 'Rimuovi',
diff --git a/packages/webawesome/src/translations/ja.ts b/packages/webawesome/src/translations/ja.ts
index 582fd91da..dd906820c 100644
--- a/packages/webawesome/src/translations/ja.ts
+++ b/packages/webawesome/src/translations/ja.ts
@@ -21,6 +21,8 @@ const translation: Translation = {
     if (num === 0) return '項目が選択されていません';
     return `${num} 個の項目が選択されました`;
   },
+  pauseAnimation: 'アニメーションを一時停止',
+  playAnimation: 'アニメーションを再生',
   previousSlide: '前のスライド',
   progress: '進行',
   remove: '削除',
diff --git a/packages/webawesome/src/translations/nb.ts b/packages/webawesome/src/translations/nb.ts
index edd48f4c2..473b0f4c1 100644
--- a/packages/webawesome/src/translations/nb.ts
+++ b/packages/webawesome/src/translations/nb.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Ett alternativ valgt';
     return `${num} alternativer valgt`;
   },
+  pauseAnimation: 'Sett animasjon på pause',
+  playAnimation: 'Spill av animasjon',
   previousSlide: 'Forrige visning',
   progress: 'Fremdrift',
   remove: 'Fjern',
diff --git a/packages/webawesome/src/translations/nl.ts b/packages/webawesome/src/translations/nl.ts
index 7a0c07ca6..53326b1c3 100644
--- a/packages/webawesome/src/translations/nl.ts
+++ b/packages/webawesome/src/translations/nl.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 optie geselecteerd';
     return `${num} opties geselecteerd`;
   },
+  pauseAnimation: 'Animatie pauzeren',
+  playAnimation: 'Animatie afspelen',
   previousSlide: 'Vorige dia',
   progress: 'Voortgang',
   remove: 'Verwijderen',
diff --git a/packages/webawesome/src/translations/nn.ts b/packages/webawesome/src/translations/nn.ts
index cf48c6b28..d0cd23db5 100644
--- a/packages/webawesome/src/translations/nn.ts
+++ b/packages/webawesome/src/translations/nn.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Eitt alternativ valt';
     return `${num} alternativ valt`;
   },
+  pauseAnimation: 'Set animasjon på pause',
+  playAnimation: 'Spel av animasjon',
   previousSlide: 'Førre visning',
   progress: 'Framdrift',
   remove: 'Fjern',
diff --git a/packages/webawesome/src/translations/pl.ts b/packages/webawesome/src/translations/pl.ts
index 602d09296..b34b1cbcf 100644
--- a/packages/webawesome/src/translations/pl.ts
+++ b/packages/webawesome/src/translations/pl.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Wybrano 1 opcję';
     return `Wybrano ${num} opcje`;
   },
+  pauseAnimation: 'Wstrzymaj animację',
+  playAnimation: 'Odtwórz animację',
   previousSlide: 'Poprzedni slajd',
   progress: 'Postęp',
   remove: 'Usunąć',
diff --git a/packages/webawesome/src/translations/pt.ts b/packages/webawesome/src/translations/pt.ts
index 6261d060e..81a8fbd35 100644
--- a/packages/webawesome/src/translations/pt.ts
+++ b/packages/webawesome/src/translations/pt.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 opção selecionada';
     return `${num} opções selecionadas`;
   },
+  pauseAnimation: 'Pausar animação',
+  playAnimation: 'Reproduzir animação',
   previousSlide: 'Slide anterior',
   progress: 'Progresso',
   remove: 'Remover',
diff --git a/packages/webawesome/src/translations/ru.ts b/packages/webawesome/src/translations/ru.ts
index 57a31f5e0..fba131470 100644
--- a/packages/webawesome/src/translations/ru.ts
+++ b/packages/webawesome/src/translations/ru.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return 'Выбран 1 вариант';
     return `выбрано ${num} варианта`;
   },
+  pauseAnimation: 'Приостановить анимацию',
+  playAnimation: 'Воспроизвести анимацию',
   previousSlide: 'Предыдущий слайд',
   progress: 'Прогресс',
   remove: 'Удалить',
diff --git a/packages/webawesome/src/translations/sl.ts b/packages/webawesome/src/translations/sl.ts
index e68eddfde..94f9b7057 100644
--- a/packages/webawesome/src/translations/sl.ts
+++ b/packages/webawesome/src/translations/sl.ts
@@ -24,6 +24,8 @@ const translation: Translation = {
     if (num === 3 || num === 4) return `${num} možnosti izbrane`;
     return `${num} možnosti izbranih`;
   },
+  pauseAnimation: 'Zaustavi animacijo',
+  playAnimation: 'Predvajaj animacijo',
   previousSlide: 'Prejšnji diapozitiv',
   progress: 'Napredek',
   remove: 'Odstrani',
diff --git a/packages/webawesome/src/translations/sv.ts b/packages/webawesome/src/translations/sv.ts
index 38a4e6ff5..010c12cb5 100644
--- a/packages/webawesome/src/translations/sv.ts
+++ b/packages/webawesome/src/translations/sv.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 alternativ valt';
     return `${num} alternativ valda`;
   },
+  pauseAnimation: 'Pausa animation',
+  playAnimation: 'Spela upp animation',
   previousSlide: 'Föregående bild',
   progress: 'Framsteg',
   remove: 'Ta bort',
diff --git a/packages/webawesome/src/translations/tr.ts b/packages/webawesome/src/translations/tr.ts
index a850580a7..fb8caef04 100644
--- a/packages/webawesome/src/translations/tr.ts
+++ b/packages/webawesome/src/translations/tr.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '1 seçenek seçildi';
     return `${num} seçenek seçildi`;
   },
+  pauseAnimation: 'Animasyonu duraklat',
+  playAnimation: 'Animasyonu oynat',
   previousSlide: 'Bir onceki slayt',
   progress: 'İlerleme',
   remove: 'Kaldır',
diff --git a/packages/webawesome/src/translations/uk.ts b/packages/webawesome/src/translations/uk.ts
index ce10a29ba..e79a5576e 100644
--- a/packages/webawesome/src/translations/uk.ts
+++ b/packages/webawesome/src/translations/uk.ts
@@ -24,6 +24,8 @@ const translation: Translation = {
     if (n === 2 || n === 3 || n === 4) return `вибрано ${num} варіанти`;
     return `вибрано ${num} варіантів`;
   },
+  pauseAnimation: 'Призупинити анімацію',
+  playAnimation: 'Відтворити анімацію',
   previousSlide: 'Попередній слайд',
   progress: 'Поступ',
   remove: 'Видалити',
diff --git a/packages/webawesome/src/translations/zh-cn.ts b/packages/webawesome/src/translations/zh-cn.ts
index 7f741545f..24c05e23b 100644
--- a/packages/webawesome/src/translations/zh-cn.ts
+++ b/packages/webawesome/src/translations/zh-cn.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '已选择 1 个项目';
     return `${num} 选择项目`;
   },
+  pauseAnimation: '暂停动画',
+  playAnimation: '播放动画',
   previousSlide: '上一张幻灯片',
   progress: '进度',
   remove: '删除',
diff --git a/packages/webawesome/src/translations/zh-tw.ts b/packages/webawesome/src/translations/zh-tw.ts
index 2c481d96a..b9cbed3cf 100644
--- a/packages/webawesome/src/translations/zh-tw.ts
+++ b/packages/webawesome/src/translations/zh-tw.ts
@@ -22,6 +22,8 @@ const translation: Translation = {
     if (num === 1) return '已選擇 1 個項目';
     return `${num} 選擇項目`;
   },
+  pauseAnimation: '暫停動畫',
+  playAnimation: '播放動畫',
   previousSlide: '上一張幻燈片',
   progress: '進度',
   remove: '移除',
diff --git a/packages/webawesome/src/utilities/localize.ts b/packages/webawesome/src/utilities/localize.ts
index 35346a19f..6ed8cfe2c 100644
--- a/packages/webawesome/src/utilities/localize.ts
+++ b/packages/webawesome/src/utilities/localize.ts
@@ -33,6 +33,8 @@ export interface Translation extends DefaultTranslation {
   loading: string;
   nextSlide: string;
   numOptionsSelected: (num: number) => string;
+  pauseAnimation: string;
+  playAnimation: string;
   previousSlide: string;
   progress: string;
   remove: string;