Improve accessibility (part 4) (#4408)
* 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-props
This commit is contained in:
Sorin Davidoi
Eugen Rochko
parent
6270f9ce34
commit
b7d47c2aef
9 changed files with 76 additions and 29 deletions
|
|
@ -74,6 +74,18 @@ export default class DropdownMenu extends React.PureComponent {
|
|||
|
||||
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) => {
|
||||
if (item === null) {
|
||||
return <li key={`sep-${i}`} className='dropdown__sep' />;
|
||||
|
|
@ -83,7 +95,7 @@ export default class DropdownMenu extends React.PureComponent {
|
|||
|
||||
return (
|
||||
<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}
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -107,7 +119,7 @@ export default class DropdownMenu extends React.PureComponent {
|
|||
}
|
||||
|
||||
const dropdownItems = expanded && (
|
||||
<ul className='dropdown__content-list'>
|
||||
<ul role='group' className='dropdown__content-list' onClick={this.handleHide}>
|
||||
{items.map(this.renderItem)}
|
||||
</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
|
||||
// don't render anything <Dropdow /> breaks, so we just put an empty div.
|
||||
const dropdownContent = !isUserTouching ? (
|
||||
<DropdownContent className={directionClass}>
|
||||
<DropdownContent className={directionClass} >
|
||||
{dropdownItems}
|
||||
</DropdownContent>
|
||||
) : <div />;
|
||||
|
||||
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 />
|
||||
</DropdownTrigger>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,12 +12,14 @@ export default class IconButton extends React.PureComponent {
|
|||
onClick: PropTypes.func,
|
||||
size: PropTypes.number,
|
||||
active: PropTypes.bool,
|
||||
pressed: PropTypes.bool,
|
||||
style: PropTypes.object,
|
||||
activeStyle: PropTypes.object,
|
||||
disabled: PropTypes.bool,
|
||||
inverted: PropTypes.bool,
|
||||
animate: PropTypes.bool,
|
||||
overlay: PropTypes.bool,
|
||||
tabIndex: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
|
@ -26,6 +28,7 @@ export default class IconButton extends React.PureComponent {
|
|||
disabled: false,
|
||||
animate: false,
|
||||
overlay: false,
|
||||
tabIndex: '0',
|
||||
};
|
||||
|
||||
handleClick = (e) => {
|
||||
|
|
@ -73,10 +76,12 @@ export default class IconButton extends React.PureComponent {
|
|||
{({ rotate }) =>
|
||||
<button
|
||||
aria-label={this.props.title}
|
||||
aria-pressed={this.props.pressed}
|
||||
title={this.props.title}
|
||||
className={classes.join(' ')}
|
||||
onClick={this.handleClick}
|
||||
style={style}
|
||||
tabIndex={this.props.tabIndex}
|
||||
>
|
||||
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,8 @@ export default class Status extends ImmutablePureComponent {
|
|||
autoPlayGif: PropTypes.bool,
|
||||
muted: PropTypes.bool,
|
||||
intersectionObserverWrapper: PropTypes.object,
|
||||
index: PropTypes.oneOf(PropTypes.string, PropTypes.number),
|
||||
listLength: PropTypes.oneOf(PropTypes.string, PropTypes.number),
|
||||
};
|
||||
|
||||
state = {
|
||||
|
|
@ -59,6 +61,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
'boostModal',
|
||||
'autoPlayGif',
|
||||
'muted',
|
||||
'listLength',
|
||||
]
|
||||
|
||||
updateOnStates = ['isExpanded']
|
||||
|
|
@ -67,8 +70,8 @@ export default class Status extends ImmutablePureComponent {
|
|||
if (!nextState.isIntersecting && nextState.isHidden) {
|
||||
// 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
|
||||
// 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) {
|
||||
// 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
|
||||
|
|
@ -169,7 +172,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
|
||||
// Exclude intersectionObserverWrapper from `other` variable
|
||||
// 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;
|
||||
|
||||
if (status === null) {
|
||||
|
|
@ -178,10 +181,10 @@ export default class Status extends ImmutablePureComponent {
|
|||
|
||||
if (!isIntersecting && isHidden) {
|
||||
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.get('content')}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -195,14 +198,14 @@ export default class Status extends ImmutablePureComponent {
|
|||
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
|
||||
|
||||
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-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> }} />
|
||||
</div>
|
||||
|
||||
<Status {...other} wrapped status={status.get('reblog')} account={status.get('account')} />
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -231,7 +234,7 @@ export default class Status extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
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'>
|
||||
<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}
|
||||
|
||||
<StatusActionBar {...this.props} />
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -113,11 +113,11 @@ export default class StatusList extends ImmutablePureComponent {
|
|||
if (isLoading || statusIds.size > 0 || !emptyMessage) {
|
||||
scrollableArea = (
|
||||
<div className='scrollable' ref={this.setRef}>
|
||||
<div className='status-list'>
|
||||
<div role='feed' className='status-list'>
|
||||
{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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue