From 2dec47e1792fc86f83ed950cc8c732c5696d0701 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Oct 2021 17:09:55 -0500
Subject: [PATCH] MaterialStatus: fix focused state

---
 app/soapbox/components/material_status.js | 6 +++---
 app/soapbox/components/status.js          | 9 +++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/material_status.js b/app/soapbox/components/material_status.js
index 25fd24e05..6454497c5 100644
--- a/app/soapbox/components/material_status.js
+++ b/app/soapbox/components/material_status.js
@@ -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>
     );
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 2b4c43bc3..a3efe15b8 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -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')}>