Correct tab order in room preview dialog

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
         }

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 }