From e44f03bc712c52d3af60f9accad1133f4b6de9ba Mon Sep 17 00:00:00 2001
From: Sorin Davidoi <sorin.davidoi@gmail.com>
Date: Mon, 31 Jul 2017 00:18:15 +0200
Subject: [PATCH] Improve accessibility (part 7) (#4457)

* fix(media_modal): Keyboard navigation

* fix(column_back_button): Use native button

* fix(media_gallery): Keyboard navigation

* fix(status_content): Make CW content focusable
---
 .../mastodon/components/column_back_button.js      | 13 +++++++------
 .../mastodon/components/media_gallery.js           |  4 ++--
 .../mastodon/components/status_content.js          |  2 +-
 .../mastodon/features/ui/components/media_modal.js | 14 +++++---------
 app/javascript/mastodon/locales/ar.json            |  2 ++
 app/javascript/mastodon/locales/bg.json            |  2 ++
 app/javascript/mastodon/locales/ca.json            |  2 ++
 app/javascript/mastodon/locales/de.json            |  2 ++
 .../mastodon/locales/defaultMessages.json          |  8 ++++++++
 app/javascript/mastodon/locales/en.json            |  2 ++
 app/javascript/mastodon/locales/eo.json            |  2 ++
 app/javascript/mastodon/locales/es.json            |  2 ++
 app/javascript/mastodon/locales/fa.json            |  2 ++
 app/javascript/mastodon/locales/fi.json            |  2 ++
 app/javascript/mastodon/locales/fr.json            |  2 ++
 app/javascript/mastodon/locales/he.json            |  2 ++
 app/javascript/mastodon/locales/hr.json            |  2 ++
 app/javascript/mastodon/locales/hu.json            |  2 ++
 app/javascript/mastodon/locales/id.json            |  2 ++
 app/javascript/mastodon/locales/io.json            |  2 ++
 app/javascript/mastodon/locales/it.json            |  2 ++
 app/javascript/mastodon/locales/ja.json            |  2 ++
 app/javascript/mastodon/locales/ko.json            |  2 ++
 app/javascript/mastodon/locales/nl.json            |  2 ++
 app/javascript/mastodon/locales/no.json            |  2 ++
 app/javascript/mastodon/locales/oc.json            |  2 ++
 app/javascript/mastodon/locales/pl.json            |  2 ++
 app/javascript/mastodon/locales/pt-BR.json         |  2 ++
 app/javascript/mastodon/locales/pt.json            |  2 ++
 app/javascript/mastodon/locales/ru.json            |  2 ++
 app/javascript/mastodon/locales/th.json            |  2 ++
 app/javascript/mastodon/locales/tr.json            |  2 ++
 app/javascript/mastodon/locales/uk.json            |  2 ++
 app/javascript/mastodon/locales/zh-CN.json         |  2 ++
 app/javascript/mastodon/locales/zh-HK.json         |  2 ++
 app/javascript/mastodon/locales/zh-TW.json         |  2 ++
 app/javascript/styles/components.scss              |  5 +++++
 37 files changed, 90 insertions(+), 18 deletions(-)

diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js
index 5b7a89d5694..8a60c4192a9 100644
--- a/app/javascript/mastodon/components/column_back_button.js
+++ b/app/javascript/mastodon/components/column_back_button.js
@@ -8,19 +8,20 @@ export default class ColumnBackButton extends React.PureComponent {
     router: PropTypes.object,
   };
 
-  handleClick = (e) => {
-    if (!e.key || e.key === 'Enter') {
-      if (window.history && window.history.length === 1) this.context.router.history.push('/');
-      else this.context.router.history.goBack();
+  handleClick = () => {
+    if (window.history && window.history.length === 1) {
+      this.context.router.history.push('/');
+    } else {
+      this.context.router.history.goBack();
     }
   }
 
   render () {
     return (
-      <div role='button' tabIndex='0' onClick={this.handleClick} onKeyDown={this.handleClick} className='column-back-button'>
+      <button onClick={this.handleClick} className='column-back-button'>
         <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
-      </div>
+      </button>
     );
   }
 
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index 92d7d494e10..068220f8f5d 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/app/javascript/mastodon/components/media_gallery.js
@@ -212,10 +212,10 @@ export default class MediaGallery extends React.PureComponent {
       }
 
       children = (
-        <div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
+        <button className='media-spoiler' onClick={this.handleOpen}>
           <span className='media-spoiler__warning'>{warning}</span>
           <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
-        </div>
+        </button>
       );
     } else {
       const size = media.take(4).size;
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index 0071162cbf6..fdf7aa531f2 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -155,7 +155,7 @@ export default class StatusContent extends React.PureComponent {
 
           {mentionsPlaceholder}
 
-          <div className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} />
+          <div tabIndex={!hidden && 0} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} />
         </div>
       );
     } else if (this.props.onClick) {
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js
index dcc9becd35b..828419d5a6b 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.js
+++ b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -10,6 +10,8 @@ import ImageLoader from './image_loader';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
+  next: { id: 'lightbox.next', defaultMessage: 'Next' },
 });
 
 @injectIntl
@@ -66,16 +68,10 @@ export default class MediaModal extends ImmutablePureComponent {
 
     const index = this.getIndex();
 
-    let leftNav, rightNav, content;
+    const leftNav  = media.size > 1 && <button tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><i className='fa fa-fw fa-chevron-left' /></button>;
+    const rightNav = media.size > 1 && <button tabIndex='0' className='modal-container__nav  modal-container__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><i className='fa fa-fw fa-chevron-right' /></button>;
 
-    leftNav = rightNav = content = '';
-
-    if (media.size > 1) {
-      leftNav  = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
-      rightNav = <div role='button' tabIndex='0' className='modal-container__nav  modal-container__nav--right' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
-    }
-
-    content = media.map((image) => {
+    const content = media.map((image) => {
       const width  = image.getIn(['meta', 'original', 'width']) || null;
       const height = image.getIn(['meta', 'original', 'height']) || null;
 
diff --git a/app/javascript/mastodon/locales/ar.json b/app/javascript/mastodon/locales/ar.json
index 089cc32454d..f5cf77f9221 100644
--- a/app/javascript/mastodon/locales/ar.json
+++ b/app/javascript/mastodon/locales/ar.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "عرض الردود",
   "home.settings": "إعدادات العمود",
   "lightbox.close": "إغلاق",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "تحميل ...",
   "media_gallery.toggle_visible": "عرض / إخفاء",
   "missing_indicator.label": "تعذر العثور عليه",
diff --git a/app/javascript/mastodon/locales/bg.json b/app/javascript/mastodon/locales/bg.json
index ba19de1b5a2..e6788f9eb50 100644
--- a/app/javascript/mastodon/locales/bg.json
+++ b/app/javascript/mastodon/locales/bg.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Show replies",
   "home.settings": "Column settings",
   "lightbox.close": "Затвори",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Зареждане...",
   "media_gallery.toggle_visible": "Toggle visibility",
   "missing_indicator.label": "Not found",
diff --git a/app/javascript/mastodon/locales/ca.json b/app/javascript/mastodon/locales/ca.json
index 3d2620be5e1..95b3c60bfc8 100644
--- a/app/javascript/mastodon/locales/ca.json
+++ b/app/javascript/mastodon/locales/ca.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Mostrar respostes",
   "home.settings": "Ajustos de columna",
   "lightbox.close": "Tancar",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Carregant...",
   "media_gallery.toggle_visible": "Alternar visibilitat",
   "missing_indicator.label": "No trobat",
diff --git a/app/javascript/mastodon/locales/de.json b/app/javascript/mastodon/locales/de.json
index cf74ce081b1..67a99b76512 100644
--- a/app/javascript/mastodon/locales/de.json
+++ b/app/javascript/mastodon/locales/de.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Antworten anzeigen",
   "home.settings": "Spalteneinstellungen",
   "lightbox.close": "Schließen",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Lade…",
   "media_gallery.toggle_visible": "Sichtbarkeit einstellen",
   "missing_indicator.label": "Nicht gefunden",
diff --git a/app/javascript/mastodon/locales/defaultMessages.json b/app/javascript/mastodon/locales/defaultMessages.json
index bc1c7b8b73c..ef76f6e5bcd 100644
--- a/app/javascript/mastodon/locales/defaultMessages.json
+++ b/app/javascript/mastodon/locales/defaultMessages.json
@@ -1113,6 +1113,14 @@
       {
         "defaultMessage": "Close",
         "id": "lightbox.close"
+      },
+      {
+        "defaultMessage": "Previous",
+        "id": "lightbox.previous"
+      },
+      {
+        "defaultMessage": "Next",
+        "id": "lightbox.next"
       }
     ],
     "path": "app/javascript/mastodon/features/ui/components/media_modal.json"
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 70c95d0279d..2ea2062d395 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Show replies",
   "home.settings": "Column settings",
   "lightbox.close": "Close",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Loading...",
   "media_gallery.toggle_visible": "Toggle visibility",
   "missing_indicator.label": "Not found",
diff --git a/app/javascript/mastodon/locales/eo.json b/app/javascript/mastodon/locales/eo.json
index e7e52106055..960d747ec98 100644
--- a/app/javascript/mastodon/locales/eo.json
+++ b/app/javascript/mastodon/locales/eo.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Show replies",
   "home.settings": "Column settings",
   "lightbox.close": "Fermi",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Ŝarĝanta...",
   "media_gallery.toggle_visible": "Toggle visibility",
   "missing_indicator.label": "Not found",
diff --git a/app/javascript/mastodon/locales/es.json b/app/javascript/mastodon/locales/es.json
index 3d27bd0fc9b..212d16639b5 100644
--- a/app/javascript/mastodon/locales/es.json
+++ b/app/javascript/mastodon/locales/es.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Show replies",
   "home.settings": "Column settings",
   "lightbox.close": "Cerrar",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Cargando...",
   "media_gallery.toggle_visible": "Toggle visibility",
   "missing_indicator.label": "Not found",
diff --git a/app/javascript/mastodon/locales/fa.json b/app/javascript/mastodon/locales/fa.json
index 1b533114a61..8c21fe22abb 100644
--- a/app/javascript/mastodon/locales/fa.json
+++ b/app/javascript/mastodon/locales/fa.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "نمایش پاسخ‌ها",
   "home.settings": "تنظیمات ستون",
   "lightbox.close": "بستن",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "بارگیری...",
   "media_gallery.toggle_visible": "تغییر پیدایی",
   "missing_indicator.label": "پیدا نشد",
diff --git a/app/javascript/mastodon/locales/fi.json b/app/javascript/mastodon/locales/fi.json
index 0c95f5fd234..cb9e9c2a699 100644
--- a/app/javascript/mastodon/locales/fi.json
+++ b/app/javascript/mastodon/locales/fi.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Show replies",
   "home.settings": "Column settings",
   "lightbox.close": "Sulje",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Ladataan...",
   "media_gallery.toggle_visible": "Toggle visibility",
   "missing_indicator.label": "Not found",
diff --git a/app/javascript/mastodon/locales/fr.json b/app/javascript/mastodon/locales/fr.json
index 5d7896c8c9f..ad9060d25bc 100644
--- a/app/javascript/mastodon/locales/fr.json
+++ b/app/javascript/mastodon/locales/fr.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Afficher les réponses",
   "home.settings": "Paramètres de la colonne",
   "lightbox.close": "Fermer",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Chargement…",
   "media_gallery.toggle_visible": "Modifier la visibilité",
   "missing_indicator.label": "Non trouvé",
diff --git a/app/javascript/mastodon/locales/he.json b/app/javascript/mastodon/locales/he.json
index 724a18cde7a..34266d8e104 100644
--- a/app/javascript/mastodon/locales/he.json
+++ b/app/javascript/mastodon/locales/he.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "הצגת תגובות",
   "home.settings": "הגדרות טור",
   "lightbox.close": "סגירה",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "טוען...",
   "media_gallery.toggle_visible": "נראה\\בלתי נראה",
   "missing_indicator.label": "לא נמצא",
diff --git a/app/javascript/mastodon/locales/hr.json b/app/javascript/mastodon/locales/hr.json
index b4625c1d4d0..f69b096d46d 100644
--- a/app/javascript/mastodon/locales/hr.json
+++ b/app/javascript/mastodon/locales/hr.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Pokaži odgovore",
   "home.settings": "Postavke Stupca",
   "lightbox.close": "Zatvori",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Učitavam...",
   "media_gallery.toggle_visible": "Preklopi vidljivost",
   "missing_indicator.label": "Nije nađen",
diff --git a/app/javascript/mastodon/locales/hu.json b/app/javascript/mastodon/locales/hu.json
index 8a50889f3fe..4d2a509630a 100644
--- a/app/javascript/mastodon/locales/hu.json
+++ b/app/javascript/mastodon/locales/hu.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Show replies",
   "home.settings": "Column settings",
   "lightbox.close": "Bezárás",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Betöltés...",
   "media_gallery.toggle_visible": "Toggle visibility",
   "missing_indicator.label": "Not found",
diff --git a/app/javascript/mastodon/locales/id.json b/app/javascript/mastodon/locales/id.json
index 8c775d7650d..532739e3ccd 100644
--- a/app/javascript/mastodon/locales/id.json
+++ b/app/javascript/mastodon/locales/id.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Tampilkan balasan",
   "home.settings": "Pengaturan kolom",
   "lightbox.close": "Tutup",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Tunggu sebentar...",
   "media_gallery.toggle_visible": "Tampil/Sembunyikan",
   "missing_indicator.label": "Tidak ditemukan",
diff --git a/app/javascript/mastodon/locales/io.json b/app/javascript/mastodon/locales/io.json
index dc29dc8ab98..a5e363e409e 100644
--- a/app/javascript/mastodon/locales/io.json
+++ b/app/javascript/mastodon/locales/io.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Montrar respondi",
   "home.settings": "Aranji di la kolumno",
   "lightbox.close": "Klozar",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Kargante...",
   "media_gallery.toggle_visible": "Chanjar videbleso",
   "missing_indicator.label": "Ne trovita",
diff --git a/app/javascript/mastodon/locales/it.json b/app/javascript/mastodon/locales/it.json
index ceeaae843d6..329eb82cad5 100644
--- a/app/javascript/mastodon/locales/it.json
+++ b/app/javascript/mastodon/locales/it.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Mostra risposte",
   "home.settings": "Impostazioni colonna",
   "lightbox.close": "Chiudi",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Carico...",
   "media_gallery.toggle_visible": "Imposta visibilità",
   "missing_indicator.label": "Non trovato",
diff --git a/app/javascript/mastodon/locales/ja.json b/app/javascript/mastodon/locales/ja.json
index 3cf001548ae..4c98086bbaa 100644
--- a/app/javascript/mastodon/locales/ja.json
+++ b/app/javascript/mastodon/locales/ja.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "返信表示",
   "home.settings": "カラム設定",
   "lightbox.close": "閉じる",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "読み込み中...",
   "media_gallery.toggle_visible": "表示切り替え",
   "missing_indicator.label": "見つかりません",
diff --git a/app/javascript/mastodon/locales/ko.json b/app/javascript/mastodon/locales/ko.json
index e06ac583c9e..47d0d4087a5 100644
--- a/app/javascript/mastodon/locales/ko.json
+++ b/app/javascript/mastodon/locales/ko.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "답글 표시",
   "home.settings": "컬럼 설정",
   "lightbox.close": "닫기",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "불러오는 중...",
   "media_gallery.toggle_visible": "표시 전환",
   "missing_indicator.label": "찾을 수 없습니다",
diff --git a/app/javascript/mastodon/locales/nl.json b/app/javascript/mastodon/locales/nl.json
index 36ba8be2a55..dda0daf7ce4 100644
--- a/app/javascript/mastodon/locales/nl.json
+++ b/app/javascript/mastodon/locales/nl.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Reacties tonen",
   "home.settings": "Kolom-instellingen",
   "lightbox.close": "Sluiten",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Laden…",
   "media_gallery.toggle_visible": "Media wel/niet tonen",
   "missing_indicator.label": "Niet gevonden",
diff --git a/app/javascript/mastodon/locales/no.json b/app/javascript/mastodon/locales/no.json
index 2589d3fee32..9453e65ff64 100644
--- a/app/javascript/mastodon/locales/no.json
+++ b/app/javascript/mastodon/locales/no.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Vis svar",
   "home.settings": "Kolonneinnstillinger",
   "lightbox.close": "Lukk",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Laster...",
   "media_gallery.toggle_visible": "Veksle synlighet",
   "missing_indicator.label": "Ikke funnet",
diff --git a/app/javascript/mastodon/locales/oc.json b/app/javascript/mastodon/locales/oc.json
index 11f2a50e7e4..5cf6d52c5ed 100644
--- a/app/javascript/mastodon/locales/oc.json
+++ b/app/javascript/mastodon/locales/oc.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Mostrar las responsas",
   "home.settings": "Paramètres de la colomna",
   "lightbox.close": "Tampar",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Cargament…",
   "media_gallery.toggle_visible": "Modificar la visibilitat",
   "missing_indicator.label": "Pas trobat",
diff --git a/app/javascript/mastodon/locales/pl.json b/app/javascript/mastodon/locales/pl.json
index e41b076eb57..b850ea6ea49 100644
--- a/app/javascript/mastodon/locales/pl.json
+++ b/app/javascript/mastodon/locales/pl.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Pokazuj odpowiedzi",
   "home.settings": "Ustawienia kolumny",
   "lightbox.close": "Zamknij",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Ładowanie...",
   "media_gallery.toggle_visible": "Przełącz widoczność",
   "missing_indicator.label": "Nie znaleziono",
diff --git a/app/javascript/mastodon/locales/pt-BR.json b/app/javascript/mastodon/locales/pt-BR.json
index fce3aaaa04e..55d2f05de26 100644
--- a/app/javascript/mastodon/locales/pt-BR.json
+++ b/app/javascript/mastodon/locales/pt-BR.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Mostrar as respostas",
   "home.settings": "Parâmetros da listagem",
   "lightbox.close": "Fechar",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Carregando...",
   "media_gallery.toggle_visible": "Esconder/Mostrar",
   "missing_indicator.label": "Não encontrado",
diff --git a/app/javascript/mastodon/locales/pt.json b/app/javascript/mastodon/locales/pt.json
index fce3aaaa04e..55d2f05de26 100644
--- a/app/javascript/mastodon/locales/pt.json
+++ b/app/javascript/mastodon/locales/pt.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Mostrar as respostas",
   "home.settings": "Parâmetros da listagem",
   "lightbox.close": "Fechar",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Carregando...",
   "media_gallery.toggle_visible": "Esconder/Mostrar",
   "missing_indicator.label": "Não encontrado",
diff --git a/app/javascript/mastodon/locales/ru.json b/app/javascript/mastodon/locales/ru.json
index 90ab15de076..1abfb43701a 100644
--- a/app/javascript/mastodon/locales/ru.json
+++ b/app/javascript/mastodon/locales/ru.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Показывать ответы",
   "home.settings": "Настройки колонки",
   "lightbox.close": "Закрыть",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Загрузка...",
   "media_gallery.toggle_visible": "Показать/скрыть",
   "missing_indicator.label": "Не найдено",
diff --git a/app/javascript/mastodon/locales/th.json b/app/javascript/mastodon/locales/th.json
index e0b680b064a..aa0929f8216 100644
--- a/app/javascript/mastodon/locales/th.json
+++ b/app/javascript/mastodon/locales/th.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Show replies",
   "home.settings": "Column settings",
   "lightbox.close": "Close",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Loading...",
   "media_gallery.toggle_visible": "Toggle visibility",
   "missing_indicator.label": "Not found",
diff --git a/app/javascript/mastodon/locales/tr.json b/app/javascript/mastodon/locales/tr.json
index 4c728c57a72..37ce8597e4d 100644
--- a/app/javascript/mastodon/locales/tr.json
+++ b/app/javascript/mastodon/locales/tr.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Cevapları göster",
   "home.settings": "Kolon ayarları",
   "lightbox.close": "Kapat",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Yükleniyor...",
   "media_gallery.toggle_visible": "Görünürlüğü değiştir",
   "missing_indicator.label": "Bulunamadı",
diff --git a/app/javascript/mastodon/locales/uk.json b/app/javascript/mastodon/locales/uk.json
index e8ea1101ae9..fea7bd94e6c 100644
--- a/app/javascript/mastodon/locales/uk.json
+++ b/app/javascript/mastodon/locales/uk.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "Показувати відповіді",
   "home.settings": "Налаштування колонок",
   "lightbox.close": "Закрити",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "Завантаження...",
   "media_gallery.toggle_visible": "Показати/приховати",
   "missing_indicator.label": "Не знайдено",
diff --git a/app/javascript/mastodon/locales/zh-CN.json b/app/javascript/mastodon/locales/zh-CN.json
index 98e963bee46..d0c4b3d1bc7 100644
--- a/app/javascript/mastodon/locales/zh-CN.json
+++ b/app/javascript/mastodon/locales/zh-CN.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "显示回应嘟文",
   "home.settings": "字段设置",
   "lightbox.close": "关闭",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "加载中……",
   "media_gallery.toggle_visible": "打开或关上",
   "missing_indicator.label": "找不到内容",
diff --git a/app/javascript/mastodon/locales/zh-HK.json b/app/javascript/mastodon/locales/zh-HK.json
index b92a88f3bc2..7312aae82a9 100644
--- a/app/javascript/mastodon/locales/zh-HK.json
+++ b/app/javascript/mastodon/locales/zh-HK.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "顯示回應文章",
   "home.settings": "欄位設定",
   "lightbox.close": "關閉",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "載入中...",
   "media_gallery.toggle_visible": "打開或關上",
   "missing_indicator.label": "找不到內容",
diff --git a/app/javascript/mastodon/locales/zh-TW.json b/app/javascript/mastodon/locales/zh-TW.json
index f45be6c5e36..1c2e3527293 100644
--- a/app/javascript/mastodon/locales/zh-TW.json
+++ b/app/javascript/mastodon/locales/zh-TW.json
@@ -94,6 +94,8 @@
   "home.column_settings.show_replies": "顯示回應",
   "home.settings": "欄位設定",
   "lightbox.close": "關閉",
+  "lightbox.next": "Next",
+  "lightbox.previous": "Previous",
   "loading_indicator.label": "讀取中...",
   "media_gallery.toggle_visible": "切換可見性",
   "missing_indicator.label": "找不到",
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 3778a2e46b1..15026925005 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1595,6 +1595,8 @@
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 16px;
+  border: 0;
+  text-align: start;
   padding: 15px;
   z-index: 3;
 
@@ -2325,6 +2327,8 @@ button.icon-button.active i.fa-retweet {
   cursor: pointer;
   display: flex;
   flex-direction: column;
+  border: 0;
+  width: 100%;
   height: 100%;
   justify-content: center;
   position: relative;
@@ -2398,6 +2402,7 @@ button.icon-button.active i.fa-retweet {
   align-items: center;
   background: rgba($base-overlay-background, 0.5);
   box-sizing: border-box;
+  border: 0;
   color: $primary-text-color;
   cursor: pointer;
   display: flex;