bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MaterialStatus: fix focused state

Browse source
This commit is contained in:
Alex Gleason 2021-10-08 17:09:55 -05:00
parent e9b5a9cf2e
commit 2dec47e179
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/soapbox/components/material_status.js
View file

@ -19,9 +19,9 @@ export default class MaterialStatus extends React.Component {
}
return (
<div className='material-status'>
<div className='material-status__status'>
<StatusContainer {...this.props} />
<div className='material-status' tabIndex={-1}>
<div className='material-status__status focusable' tabIndex={0}>
<StatusContainer {...this.props} focusable={false} />
</div>
</div>
);

9
app/soapbox/components/status.js
View file

@ -93,6 +93,11 @@ class Status extends ImmutablePureComponent {
group: ImmutablePropTypes.map,
displayMedia: PropTypes.string,
allowedEmoji: ImmutablePropTypes.list,
focusable: PropTypes.bool,
};
static defaultProps = {
focusable: true,
};
// Avoid checking props that are functions (and whose equality will always
@ -336,7 +341,7 @@ class Status extends ImmutablePureComponent {
return (
<HotKeys handlers={minHandlers}>
<div className='status__wrapper status__wrapper--filtered focusable' tabIndex='0' ref={this.handleRef}>
<div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable: this.props.focusable })} tabIndex={this.props.focusable ? 0 : null} ref={this.handleRef}>
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />
</div>
</HotKeys>
@ -490,7 +495,7 @@ class Status extends ImmutablePureComponent {
return (
<HotKeys handlers={handlers}>
<div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), read: unread === false, focusable: !this.props.muted })} tabIndex={this.props.muted ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef}>
<div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), read: unread === false, focusable: this.props.focusable && !this.props.muted })} tabIndex={this.props.focusable && !this.props.muted ? 0 : null} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef}>
{prepend}
<div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted, read: unread === false })} data-id={status.get('id')}>