diff options
author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2017-07-31 00:18:15 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-07-31 00:18:15 +0200 |
commit | e44f03bc712c52d3af60f9accad1133f4b6de9ba (patch) | |
tree | d82c8028e9d0ed82169beff893279aa911546b81 /app/javascript/mastodon/features/ui/components/media_modal.js | |
parent | 970297a13887ff253ce2d65822ccd77a4e56c82e (diff) |
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
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/media_modal.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/media_modal.js | 14 |
1 files changed, 5 insertions, 9 deletions
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js index dcc9becd3..828419d5a 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; |