commit: e44f03bc712c52d3af60f9accad1133f4b6de9ba parent: 970297a13887ff253ce2d65822ccd77a4e56c82e Author: Sorin Davidoi <sorin.davidoi@gmail.com> Date: Mon, 31 Jul 2017 00:18:15 +0200 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 focusableDiffstat:
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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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;