Correct tab order in room preview dialog (#7302)

* tab order * lint fixes Signed-off-by: Kerry Archibald <kerrya@element.io> * test RoomPreviewBar Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright header Signed-off-by: Kerry Archibald <kerrya@element.io> * Update src/components/views/rooms/RoomPreviewBar.tsx Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * fix tabs/spaces lint for reformatted actions Signed-off-by: Kerry Archibald <kerrya@element.io> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
matrix-org · Dec 9, 2021 · d7a6e3e · d7a6e3e
1 parent 0c850b2
commit d7a6e3e
Show file tree

Hide file tree

Showing 5 changed files with 753 additions and 6 deletions.
diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -116,7 +116,7 @@ limitations under the License.
     }
 
     .mx_RoomPreviewBar_actions {
-        flex-direction: column-reverse;
+        flex-direction: column;
         .mx_AccessibleButton {
             padding: 7px 50px; //extra wide
         }

diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx
@@ -593,11 +593,26 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             );
         }
 
+        const isPanel = this.props.canPreview;
+
         const classes = classNames("mx_RoomPreviewBar", "dark-panel", `mx_RoomPreviewBar_${messageCase}`, {
-            "mx_RoomPreviewBar_panel": this.props.canPreview,
-            "mx_RoomPreviewBar_dialog": !this.props.canPreview,
+            "mx_RoomPreviewBar_panel": isPanel,
+            "mx_RoomPreviewBar_dialog": !isPanel,
         });
 
+        // ensure correct tab order for both views
+        const actions = isPanel
+            ? <>
+                { secondaryButton }
+                { extraComponents }
+                { primaryButton }
+            </>
+            : <>
+                { primaryButton }
+                { extraComponents }
+                { secondaryButton }
+            </>;
+
         return (
             <div className={classes}>
                 <div className="mx_RoomPreviewBar_message">
@@ -606,9 +621,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 </div>
                 { reasonElement }
                 <div className="mx_RoomPreviewBar_actions">
-                    { secondaryButton }
-                    { extraComponents }
-                    { primaryButton }
+                    { actions }
                 </div>
                 <div className="mx_RoomPreviewBar_footer">
                     { footer }