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
This commit is contained in:
Sorin Davidoi 2017-07-31 00:18:15 +02:00 committed by Eugen Rochko
parent 970297a138
commit e44f03bc71
37 changed files with 90 additions and 18 deletions

View file

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

View file

@ -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;

View file

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

View file

@ -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;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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;