* fix(dropdown_menu): Keyboard navigation * fix(icon_button): Add aria-pressed attribute * fix(privacy_dropdown): Make accessible * fix(emoji_picker_dropdown): Make accessible * fix(icon_button): Support tabIndex * fix(actions_modal): Remove icon from tab order * fix(dropdown_menu): Add role=group * fix(setting_toggle): Toggle via space key * fix(dropdown_menu): Remove redundant handling of Space key * fix(emoji_picker_dropdown): Remove redundant Space key handling * fix(privacy_dropdown): Remove redundant Space key handling * fix(status): Switch to article and add aria-posinset, aria-setsize * fix(status_list): Use role=feed and pass more ARIA props to Status * chore(eslint): jsx-a11y/role-supports-aria-propsmaster
@@ -121,6 +121,6 @@ rules: | |||||
jsx-a11y/onclick-has-focus: warn | jsx-a11y/onclick-has-focus: warn | ||||
jsx-a11y/onclick-has-role: warn | jsx-a11y/onclick-has-role: warn | ||||
jsx-a11y/role-has-required-aria-props: warn | jsx-a11y/role-has-required-aria-props: warn | ||||
jsx-a11y/role-supports-aria-props: warn | |||||
jsx-a11y/role-supports-aria-props: off | |||||
jsx-a11y/scope: warn | jsx-a11y/scope: warn | ||||
jsx-a11y/tabindex-no-positive: warn | jsx-a11y/tabindex-no-positive: warn |
@@ -74,6 +74,18 @@ export default class DropdownMenu extends React.PureComponent { | |||||
handleHide = () => this.setState({ expanded: false }) | handleHide = () => this.setState({ expanded: false }) | ||||
handleToggle = (e) => { | |||||
if (e.key === 'Enter') { | |||||
if (this.props.isUserTouching()) { | |||||
this.handleShow(); | |||||
} else { | |||||
this.setState({ expanded: !this.state.expanded }); | |||||
} | |||||
} else if (e.key === 'Escape') { | |||||
this.setState({ expanded: false }); | |||||
} | |||||
} | |||||
renderItem = (item, i) => { | renderItem = (item, i) => { | ||||
if (item === null) { | if (item === null) { | ||||
return <li key={`sep-${i}`} className='dropdown__sep' />; | return <li key={`sep-${i}`} className='dropdown__sep' />; | ||||
@@ -83,7 +95,7 @@ export default class DropdownMenu extends React.PureComponent { | |||||
return ( | return ( | ||||
<li className='dropdown__content-list-item' key={`${text}-${i}`}> | <li className='dropdown__content-list-item' key={`${text}-${i}`}> | ||||
<a href={href} target='_blank' rel='noopener' onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'> | |||||
<a href={href} target='_blank' rel='noopener' role='button' tabIndex='0' autoFocus={i === 0} onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'> | |||||
{text} | {text} | ||||
</a> | </a> | ||||
</li> | </li> | ||||
@@ -107,7 +119,7 @@ export default class DropdownMenu extends React.PureComponent { | |||||
} | } | ||||
const dropdownItems = expanded && ( | const dropdownItems = expanded && ( | ||||
<ul className='dropdown__content-list'> | |||||
<ul role='group' className='dropdown__content-list' onClick={this.handleHide}> | |||||
{items.map(this.renderItem)} | {items.map(this.renderItem)} | ||||
</ul> | </ul> | ||||
); | ); | ||||
@@ -115,14 +127,14 @@ export default class DropdownMenu extends React.PureComponent { | |||||
// No need to render the actual dropdown if we use the modal. If we | // No need to render the actual dropdown if we use the modal. If we | ||||
// don't render anything <Dropdow /> breaks, so we just put an empty div. | // don't render anything <Dropdow /> breaks, so we just put an empty div. | ||||
const dropdownContent = !isUserTouching ? ( | const dropdownContent = !isUserTouching ? ( | ||||
<DropdownContent className={directionClass}> | |||||
<DropdownContent className={directionClass} > | |||||
{dropdownItems} | {dropdownItems} | ||||
</DropdownContent> | </DropdownContent> | ||||
) : <div />; | ) : <div />; | ||||
return ( | return ( | ||||
<Dropdown ref={this.setRef} active={isUserTouching ? false : undefined} onShow={this.handleShow} onHide={this.handleHide}> | |||||
<DropdownTrigger className='icon-button' style={iconStyle} aria-label={ariaLabel}> | |||||
<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}> | |||||
<i className={iconClassname} aria-hidden /> | <i className={iconClassname} aria-hidden /> | ||||
</DropdownTrigger> | </DropdownTrigger> | ||||
@@ -12,12 +12,14 @@ export default class IconButton extends React.PureComponent { | |||||
onClick: PropTypes.func, | onClick: PropTypes.func, | ||||
size: PropTypes.number, | size: PropTypes.number, | ||||
active: PropTypes.bool, | active: PropTypes.bool, | ||||
pressed: PropTypes.bool, | |||||
style: PropTypes.object, | style: PropTypes.object, | ||||
activeStyle: PropTypes.object, | activeStyle: PropTypes.object, | ||||
disabled: PropTypes.bool, | disabled: PropTypes.bool, | ||||
inverted: PropTypes.bool, | inverted: PropTypes.bool, | ||||
animate: PropTypes.bool, | animate: PropTypes.bool, | ||||
overlay: PropTypes.bool, | overlay: PropTypes.bool, | ||||
tabIndex: PropTypes.string, | |||||
}; | }; | ||||
static defaultProps = { | static defaultProps = { | ||||
@@ -26,6 +28,7 @@ export default class IconButton extends React.PureComponent { | |||||
disabled: false, | disabled: false, | ||||
animate: false, | animate: false, | ||||
overlay: false, | overlay: false, | ||||
tabIndex: '0', | |||||
}; | }; | ||||
handleClick = (e) => { | handleClick = (e) => { | ||||
@@ -73,10 +76,12 @@ export default class IconButton extends React.PureComponent { | |||||
{({ rotate }) => | {({ rotate }) => | ||||
<button | <button | ||||
aria-label={this.props.title} | aria-label={this.props.title} | ||||
aria-pressed={this.props.pressed} | |||||
title={this.props.title} | title={this.props.title} | ||||
className={classes.join(' ')} | className={classes.join(' ')} | ||||
onClick={this.handleClick} | onClick={this.handleClick} | ||||
style={style} | style={style} | ||||
tabIndex={this.props.tabIndex} | |||||
> | > | ||||
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' /> | <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' /> | ||||
</button> | </button> | ||||
@@ -41,6 +41,8 @@ export default class Status extends ImmutablePureComponent { | |||||
autoPlayGif: PropTypes.bool, | autoPlayGif: PropTypes.bool, | ||||
muted: PropTypes.bool, | muted: PropTypes.bool, | ||||
intersectionObserverWrapper: PropTypes.object, | intersectionObserverWrapper: PropTypes.object, | ||||
index: PropTypes.oneOf(PropTypes.string, PropTypes.number), | |||||
listLength: PropTypes.oneOf(PropTypes.string, PropTypes.number), | |||||
}; | }; | ||||
state = { | state = { | ||||
@@ -59,6 +61,7 @@ export default class Status extends ImmutablePureComponent { | |||||
'boostModal', | 'boostModal', | ||||
'autoPlayGif', | 'autoPlayGif', | ||||
'muted', | 'muted', | ||||
'listLength', | |||||
] | ] | ||||
updateOnStates = ['isExpanded'] | updateOnStates = ['isExpanded'] | ||||
@@ -67,8 +70,8 @@ export default class Status extends ImmutablePureComponent { | |||||
if (!nextState.isIntersecting && nextState.isHidden) { | if (!nextState.isIntersecting && nextState.isHidden) { | ||||
// It's only if we're not intersecting (i.e. offscreen) and isHidden is true | // It's only if we're not intersecting (i.e. offscreen) and isHidden is true | ||||
// that either "isIntersecting" or "isHidden" matter, and then they're | // that either "isIntersecting" or "isHidden" matter, and then they're | ||||
// the only things that matter. | |||||
return this.state.isIntersecting || !this.state.isHidden; | |||||
// the only things that matter (and updated ARIA attributes). | |||||
return this.state.isIntersecting || !this.state.isHidden || nextProps.listLength !== this.props.listLength; | |||||
} else if (nextState.isIntersecting && !this.state.isIntersecting) { | } else if (nextState.isIntersecting && !this.state.isIntersecting) { | ||||
// If we're going from a non-intersecting state to an intersecting state, | // If we're going from a non-intersecting state to an intersecting state, | ||||
// (i.e. offscreen to onscreen), then we definitely need to re-render | // (i.e. offscreen to onscreen), then we definitely need to re-render | ||||
@@ -169,7 +172,7 @@ export default class Status extends ImmutablePureComponent { | |||||
// Exclude intersectionObserverWrapper from `other` variable | // Exclude intersectionObserverWrapper from `other` variable | ||||
// because intersection is managed in here. | // because intersection is managed in here. | ||||
const { status, account, intersectionObserverWrapper, ...other } = this.props; | |||||
const { status, account, intersectionObserverWrapper, index, listLength, ...other } = this.props; | |||||
const { isExpanded, isIntersecting, isHidden } = this.state; | const { isExpanded, isIntersecting, isHidden } = this.state; | ||||
if (status === null) { | if (status === null) { | ||||
@@ -178,10 +181,10 @@ export default class Status extends ImmutablePureComponent { | |||||
if (!isIntersecting && isHidden) { | if (!isIntersecting && isHidden) { | ||||
return ( | return ( | ||||
<div ref={this.handleRef} data-id={status.get('id')} style={{ height: `${this.height}px`, opacity: 0, overflow: 'hidden' }}> | |||||
<article ref={this.handleRef} data-id={status.get('id')} aria-posinset={index} aria-setsize={listLength} style={{ height: `${this.height}px`, opacity: 0, overflow: 'hidden' }}> | |||||
{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])} | {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])} | ||||
{status.get('content')} | {status.get('content')} | ||||
</div> | |||||
</article> | |||||
); | ); | ||||
} | } | ||||
@@ -195,14 +198,14 @@ export default class Status extends ImmutablePureComponent { | |||||
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; | const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; | ||||
return ( | return ( | ||||
<div className='status__wrapper' ref={this.handleRef} data-id={status.get('id')} > | |||||
<article className='status__wrapper' ref={this.handleRef} data-id={status.get('id')} aria-posinset={index} aria-setsize={listLength}> | |||||
<div className='status__prepend'> | <div className='status__prepend'> | ||||
<div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div> | <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div> | ||||
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} /> | <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} /> | ||||
</div> | </div> | ||||
<Status {...other} wrapped status={status.get('reblog')} account={status.get('account')} /> | <Status {...other} wrapped status={status.get('reblog')} account={status.get('account')} /> | ||||
</div> | |||||
</article> | |||||
); | ); | ||||
} | } | ||||
@@ -231,7 +234,7 @@ export default class Status extends ImmutablePureComponent { | |||||
} | } | ||||
return ( | return ( | ||||
<div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')}`} data-id={status.get('id')} ref={this.handleRef}> | |||||
<article aria-posinset={index} aria-setsize={listLength} className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')}`} data-id={status.get('id')} ref={this.handleRef}> | |||||
<div className='status__info'> | <div className='status__info'> | ||||
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> | <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> | ||||
@@ -249,7 +252,7 @@ export default class Status extends ImmutablePureComponent { | |||||
{media} | {media} | ||||
<StatusActionBar {...this.props} /> | <StatusActionBar {...this.props} /> | ||||
</div> | |||||
</article> | |||||
); | ); | ||||
} | } | ||||
@@ -113,11 +113,11 @@ export default class StatusList extends ImmutablePureComponent { | |||||
if (isLoading || statusIds.size > 0 || !emptyMessage) { | if (isLoading || statusIds.size > 0 || !emptyMessage) { | ||||
scrollableArea = ( | scrollableArea = ( | ||||
<div className='scrollable' ref={this.setRef}> | <div className='scrollable' ref={this.setRef}> | ||||
<div className='status-list'> | |||||
<div role='feed' className='status-list'> | |||||
{prepend} | {prepend} | ||||
{statusIds.map((statusId) => { | |||||
return <StatusContainer key={statusId} id={statusId} intersectionObserverWrapper={this.intersectionObserverWrapper} />; | |||||
{statusIds.map((statusId, index) => { | |||||
return <StatusContainer key={statusId} id={statusId} index={index} listLength={statusIds.size} intersectionObserverWrapper={this.intersectionObserverWrapper} />; | |||||
})} | })} | ||||
{loadMore} | {loadMore} | ||||
@@ -65,6 +65,22 @@ export default class EmojiPickerDropdown extends React.PureComponent { | |||||
this.setState({ active: false }); | this.setState({ active: false }); | ||||
} | } | ||||
onToggle = (e) => { | |||||
if (!this.state.loading && (!e.key || e.key === 'Enter')) { | |||||
if (this.state.active) { | |||||
this.onHideDropdown(); | |||||
} else { | |||||
this.onShowDropdown(); | |||||
} | |||||
} | |||||
} | |||||
onEmojiPickerKeyDown = (e) => { | |||||
if (e.key === 'Escape') { | |||||
this.onHideDropdown(); | |||||
} | |||||
} | |||||
render () { | render () { | ||||
const { intl } = this.props; | const { intl } = this.props; | ||||
@@ -104,10 +120,11 @@ export default class EmojiPickerDropdown extends React.PureComponent { | |||||
}; | }; | ||||
const { active, loading } = this.state; | const { active, loading } = this.state; | ||||
const title = intl.formatMessage(messages.emoji); | |||||
return ( | return ( | ||||
<Dropdown ref={this.setRef} className='emoji-picker__dropdown' onShow={this.onShowDropdown} onHide={this.onHideDropdown}> | |||||
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)}> | |||||
<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} > | |||||
<img | <img | ||||
className={`emojione ${active && loading ? 'pulse-loading' : ''}`} | className={`emojione ${active && loading ? 'pulse-loading' : ''}`} | ||||
alt='🙂' | alt='🙂' | ||||
@@ -118,7 +135,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { | |||||
<DropdownContent className='dropdown__left'> | <DropdownContent className='dropdown__left'> | ||||
{ | { | ||||
this.state.active && !this.state.loading && | this.state.active && !this.state.loading && | ||||
(<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search />) | |||||
(<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} onKeyDown={this.onEmojiPickerKeyDown} categories={categories} search />) | |||||
} | } | ||||
</DropdownContent> | </DropdownContent> | ||||
</Dropdown> | </Dropdown> | ||||
@@ -60,10 +60,14 @@ export default class PrivacyDropdown extends React.PureComponent { | |||||
} | } | ||||
handleClick = (e) => { | handleClick = (e) => { | ||||
const value = e.currentTarget.getAttribute('data-index'); | |||||
e.preventDefault(); | |||||
this.setState({ open: false }); | |||||
this.props.onChange(value); | |||||
if (e.key === 'Escape') { | |||||
this.setState({ open: false }); | |||||
} else if (!e.key || e.key === 'Enter') { | |||||
const value = e.currentTarget.getAttribute('data-index'); | |||||
e.preventDefault(); | |||||
this.setState({ open: false }); | |||||
this.props.onChange(value); | |||||
} | |||||
} | } | ||||
onGlobalClick = (e) => { | onGlobalClick = (e) => { | ||||
@@ -105,10 +109,10 @@ export default class PrivacyDropdown extends React.PureComponent { | |||||
return ( | return ( | ||||
<div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> | <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} 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} pressed={open} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div> | |||||
<div className='privacy-dropdown__dropdown'> | <div className='privacy-dropdown__dropdown'> | ||||
{open && this.options.map(item => | {open && this.options.map(item => | ||||
<div role='button' tabIndex='0' key={item.value} data-index={item.value} onClick={this.handleClick} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> | |||||
<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' : ''}`}> | |||||
<div className='privacy-dropdown__option__icon'><i className={`fa fa-fw fa-${item.icon}`} /></div> | <div className='privacy-dropdown__option__icon'><i className={`fa fa-fw fa-${item.icon}`} /></div> | ||||
<div className='privacy-dropdown__option__content'> | <div className='privacy-dropdown__option__content'> | ||||
<strong>{item.text}</strong> | <strong>{item.text}</strong> | ||||
@@ -18,13 +18,19 @@ export default class SettingToggle extends React.PureComponent { | |||||
this.props.onChange(this.props.settingKey, target.checked); | this.props.onChange(this.props.settingKey, target.checked); | ||||
} | } | ||||
onKeyDown = e => { | |||||
if (e.key === ' ') { | |||||
this.props.onChange(this.props.settingKey, !e.target.checked); | |||||
} | |||||
} | |||||
render () { | render () { | ||||
const { prefix, settings, settingKey, label, meta } = this.props; | const { prefix, settings, settingKey, label, meta } = this.props; | ||||
const id = ['setting-toggle', prefix, ...settingKey].filter(Boolean).join('-'); | const id = ['setting-toggle', prefix, ...settingKey].filter(Boolean).join('-'); | ||||
return ( | return ( | ||||
<div className='setting-toggle'> | <div className='setting-toggle'> | ||||
<Toggle id={id} checked={settings.getIn(settingKey)} onChange={this.onChange} /> | |||||
<Toggle id={id} checked={settings.getIn(settingKey)} onChange={this.onChange} onKeyDown={this.onKeyDown} /> | |||||
<label htmlFor={id} className='setting-toggle__label'>{label}</label> | <label htmlFor={id} className='setting-toggle__label'>{label}</label> | ||||
{meta && <span className='setting-meta__label'>{meta}</span>} | {meta && <span className='setting-meta__label'>{meta}</span>} | ||||
</div> | </div> | ||||
@@ -24,7 +24,7 @@ export default class ActionsModal extends ImmutablePureComponent { | |||||
return ( | return ( | ||||
<li key={`${text}-${i}`}> | <li key={`${text}-${i}`}> | ||||
<a href={href} target='_blank' rel='noopener' onClick={this.props.onClick} data-index={i} className={active && 'active'}> | <a href={href} target='_blank' rel='noopener' onClick={this.props.onClick} data-index={i} className={active && 'active'}> | ||||
{icon && <IconButton title={text} icon={icon} />} | |||||
{icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' />} | |||||
<div> | <div> | ||||
<div>{text}</div> | <div>{text}</div> | ||||
<div>{meta}</div> | <div>{meta}</div> | ||||