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

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>
     );
   }
 

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;

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) {

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;
 

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": "تعذر العثور عليه",

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",

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",

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",

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"

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",

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",

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",

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": "پیدا نشد",

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",

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é",

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": "לא נמצא",

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",

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",

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",

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",

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",

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": "見つかりません",

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": "찾을 수 없습니다",

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",

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",

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",

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",

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",

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",

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": "Не найдено",

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",

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ı",

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": "Не знайдено",

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": "找不到内容",

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": "找不到內容",

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": "找不到",

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;