Improve accessibility (part 5) (#4417)
* fix(status): Add tabIndex=0 * fix(status_list): Make keyboard navigablelolsob-rspec
parent
16075fc5ef
commit
fd6c6cf717
|
@ -181,7 +181,7 @@ export default class Status extends ImmutablePureComponent {
|
||||||
|
|
||||||
if (!isIntersecting && isHidden) {
|
if (!isIntersecting && isHidden) {
|
||||||
return (
|
return (
|
||||||
<article ref={this.handleRef} data-id={status.get('id')} aria-posinset={index} aria-setsize={listLength} style={{ height: `${this.height}px`, opacity: 0, overflow: 'hidden' }}>
|
<article ref={this.handleRef} data-id={status.get('id')} aria-posinset={index} aria-setsize={listLength} tabIndex='0' 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')}
|
||||||
</article>
|
</article>
|
||||||
|
@ -198,7 +198,7 @@ export default class Status extends ImmutablePureComponent {
|
||||||
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
|
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<article className='status__wrapper' ref={this.handleRef} data-id={status.get('id')} aria-posinset={index} aria-setsize={listLength}>
|
<article className='status__wrapper' ref={this.handleRef} data-id={status.get('id')} aria-posinset={index} aria-setsize={listLength} tabIndex='0'>
|
||||||
<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> }} />
|
||||||
|
@ -234,7 +234,7 @@ export default class Status extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<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}>
|
<article aria-posinset={index} aria-setsize={listLength} className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')}`} data-id={status.get('id')} tabIndex='0' 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>
|
||||||
|
|
||||||
|
|
|
@ -104,6 +104,32 @@ export default class StatusList extends ImmutablePureComponent {
|
||||||
this.props.onScrollToBottom();
|
this.props.onScrollToBottom();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleKeyDown = (e) => {
|
||||||
|
if (['PageDown', 'PageUp', 'End', 'Home'].includes(e.key)) {
|
||||||
|
const article = (() => {
|
||||||
|
switch (e.key) {
|
||||||
|
case 'PageDown':
|
||||||
|
return e.nativeEvent.path[0].nodeName === 'ARTICLE' && e.nativeEvent.path[0].nextElementSibling;
|
||||||
|
case 'PageUp':
|
||||||
|
return e.nativeEvent.path[0].nodeName === 'ARTICLE' && e.nativeEvent.path[0].previousElementSibling;
|
||||||
|
case 'End':
|
||||||
|
return this.node.querySelector('[role="feed"] > article:last-of-type');
|
||||||
|
case 'Home':
|
||||||
|
return this.node.querySelector('[role="feed"] > article:first-of-type');
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
if (article) {
|
||||||
|
e.preventDefault();
|
||||||
|
article.focus();
|
||||||
|
article.scrollIntoView();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { statusIds, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
|
const { statusIds, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
|
||||||
|
|
||||||
|
@ -113,7 +139,7 @@ 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 role='feed' className='status-list'>
|
<div role='feed' className='status-list' onKeyDown={this.handleKeyDown}>
|
||||||
{prepend}
|
{prepend}
|
||||||
|
|
||||||
{statusIds.map((statusId, index) => {
|
{statusIds.map((statusId, index) => {
|
||||||
|
|
Loading…
Reference in New Issue