Improve Keyboard Shortcuts. Add alt-arrows & alt-shift-arrows.

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/rooms/RoomTile.js

@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
@@ -225,6 +225,16 @@ export default createReactClass({
             case 'feature_custom_status_changed':
                 this.forceUpdate();
                 break;
+
+            case 'view_room':
+                // when the room is selected make sure its tile is visible, for breadcrumbs/keyboard shortcuts
+                if (payload.room_id === this.props.room.roomId && this._roomTile.current) {
+                    this._roomTile.current.scrollIntoView({
+                        block: "nearest",
+                        behavior: "auto",
+                    });
+                }
+                break;
         }
     },
 
@@ -234,6 +244,10 @@ export default createReactClass({
         });
     },
 
+    UNSAFE_componentWillMount: function() {
+        this._roomTile = createRef();
+    },
+
     componentDidMount: function() {
         /* We bind here rather than in the definition because otherwise we wind up with the
            method only being callable once every 500ms across all instances, which would be wrong */
@@ -538,7 +552,7 @@ export default createReactClass({
         }
 
         return <React.Fragment>
-            <RovingTabIndexWrapper>
+            <RovingTabIndexWrapper inputRef={this._roomTile}>
                 {({onFocus, isActive, ref}) =>
                     <AccessibleButton
                         onFocus={onFocus}