commit: c71874b84c1616f2a55547e1aa7cf81fc5c30636 parent: 53b2b1b2389c0ea941c50d4a9c726539d808c384 Author: Sorin Davidoi <sorin.davidoi@gmail.com> Date: Sat, 29 Jul 2017 01:58:53 +0200 Improve accessibility (part 6) (#4435) * fix(status_action_bar): Use aria-pressed for reblog and favourite button * fix(column_back_button): Keyboard accessible * fix(status_content): Make focusable and accessible * fix(dropdown_menu): Use aria-expanded instead of aria-pressed * fix(emoji_picker_dropdown): Use aria-expanded instead of aria-hidden * feat(icon_button): Add aria-expanded * fix(privacy_dropdown): Use aria-expanded instead of aria-hiddenDiffstat:
7 files changed, 18 insertions(+), 10 deletions(-)
diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js @@ -8,14 +8,16 @@ export default class ColumnBackButton extends React.PureComponent { router: PropTypes.object, }; - handleClick = () => { - if (window.history && window.history.length === 1) this.context.router.history.push('/'); - else this.context.router.history.goBack(); + 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(); + } } render () { return ( - <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'> + <div role='button' tabIndex='0' onClick={this.handleClick} onKeyDown={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> diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js @@ -134,7 +134,7 @@ export default class DropdownMenu extends React.PureComponent { return ( <Dropdown ref={this.setRef} active={isUserTouching ? false : expanded} onShow={this.handleShow} onHide={this.handleHide}> - <DropdownTrigger className='icon-button' style={iconStyle} role='button' aria-pressed={expanded} onKeyDown={this.handleToggle} tabIndex='0' aria-label={ariaLabel}> + <DropdownTrigger className='icon-button' style={iconStyle} role='button' aria-expanded={expanded} onKeyDown={this.handleToggle} tabIndex='0' aria-label={ariaLabel}> <i className={iconClassname} aria-hidden /> </DropdownTrigger> diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js @@ -13,6 +13,7 @@ export default class IconButton extends React.PureComponent { size: PropTypes.number, active: PropTypes.bool, pressed: PropTypes.bool, + expanded: PropTypes.bool, style: PropTypes.object, activeStyle: PropTypes.object, disabled: PropTypes.bool, @@ -77,6 +78,7 @@ export default class IconButton extends React.PureComponent { <button aria-label={this.props.title} aria-pressed={this.props.pressed} + aria-expanded={this.props.expanded} title={this.props.title} className={classes.join(' ')} onClick={this.handleClick} diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js @@ -151,8 +151,8 @@ export default class StatusActionBar extends ImmutablePureComponent { return ( <div className='status__action-bar'> <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /> - <IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> - <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> + <IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> + <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> {shareButton} <div className='status__action-bar-dropdown'> diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js @@ -146,7 +146,7 @@ export default class StatusContent extends React.PureComponent { } return ( - <div className={classNames} ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> + <div className={classNames} ref={this.setRef} tabIndex='0' aria-label={status.get('search_index')} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}> <span dangerouslySetInnerHTML={spoilerContent} /> {' '} @@ -162,6 +162,8 @@ export default class StatusContent extends React.PureComponent { return ( <div ref={this.setRef} + tabIndex='0' + aria-label={status.get('search_index')} className={classNames} style={directionStyle} onMouseDown={this.handleMouseDown} @@ -172,6 +174,8 @@ export default class StatusContent extends React.PureComponent { } else { return ( <div + tabIndex='0' + aria-label={status.get('search_index')} ref={this.setRef} className='status__content' style={directionStyle} diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js @@ -124,7 +124,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { return ( <Dropdown ref={this.setRef} className='emoji-picker__dropdown' active={active && !loading} onShow={this.onShowDropdown} onHide={this.onHideDropdown}> - <DropdownTrigger className='emoji-button' title={title} aria-label={title} aria-pressed={active} role='button' onKeyDown={this.onToggle} tabIndex={0} > + <DropdownTrigger className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onKeyDown={this.onToggle} tabIndex={0} > <img className={`emojione ${active && loading ? 'pulse-loading' : ''}`} alt='🙂' diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js @@ -109,7 +109,7 @@ export default class PrivacyDropdown extends React.PureComponent { return ( <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> - <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} pressed={open} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div> + <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} expanded={open} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div> <div className='privacy-dropdown__dropdown'> {open && this.options.map(item => <div role='button' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleClick} onClick={this.handleClick} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>