diff options
| -rw-r--r-- | app/javascript/mastodon/components/status.js | 6 | ||||
| -rw-r--r-- | app/javascript/mastodon/components/status_list.js | 28 |
2 files changed, 30 insertions, 4 deletions
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index f0f42eaa8..5471c52f7 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -181,7 +181,7 @@ export default class Status extends ImmutablePureComponent { if (!isIntersecting && isHidden) { 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.get('content')} </article> @@ -198,7 +198,7 @@ export default class Status extends ImmutablePureComponent { const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; 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-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> }} /> @@ -234,7 +234,7 @@ export default class Status extends ImmutablePureComponent { } 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'> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index 9406b5fb9..d87fe3ea1 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -104,6 +104,32 @@ export default class StatusList extends ImmutablePureComponent { 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 () { 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) { scrollableArea = ( <div className='scrollable' ref={this.setRef}> - <div role='feed' className='status-list'> + <div role='feed' className='status-list' onKeyDown={this.handleKeyDown}> {prepend} {statusIds.map((statusId, index) => { |