Add jump to date functionality to date headers in timeline v2

res/css/_components.scss

@@ -180,6 +180,7 @@
 @import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
+@import "./views/messages/_JumpToDatePicker.scss";
 @import "./views/messages/_EventTileBubble.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -50,21 +50,21 @@ limitations under the License.
         }
 
         // round the top corners of the top button for the hover effect to be bounded
-        &:first-child .mx_AccessibleButton:first-child {
+        &:first-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child {
             border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
         }
 
         // round the bottom corners of the bottom button for the hover effect to be bounded
-        &:last-child .mx_AccessibleButton:last-child {
+        &:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):last-child {
             border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
         }
 
         // round all corners of the only button for the hover effect to be bounded
-        &:first-child:last-child .mx_AccessibleButton:first-child:last-child {
+        &:first-child:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child:last-child {
             border-radius: 8px; // radius matches .mx_ContextualMenu
         }
 
-        .mx_AccessibleButton {
+        .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             // pad the inside of the button so that the hover background is padded too
             padding-top: 12px;
             padding-bottom: 12px;
@@ -130,7 +130,7 @@ limitations under the License.
     }
 
     .mx_IconizedContextMenu_optionList_red {
-        .mx_AccessibleButton {
+        .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             color: $alert !important;
         }
 
@@ -148,7 +148,7 @@ limitations under the License.
     }
 
     .mx_IconizedContextMenu_active {
-        &.mx_AccessibleButton, .mx_AccessibleButton {
+        &.mx_AccessibleButton:not(.mx_AccessibleButton_hasKind), .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             color: $accent !important;
         }
 

res/css/views/elements/_Field.scss

@@ -127,6 +127,7 @@ limitations under the License.
         transform 0.25s ease-out 0s,
         background-color 0.25s ease-out 0s;
     font-size: $font-10px;
+    line-height: normal;
     transform: translateY(-13px);
     padding: 0 2px;
     background-color: $background;

res/css/views/messages/_DateSeparator.scss

@@ -33,3 +33,18 @@ limitations under the License.
     margin: 0 25px;
     flex: 0 0 auto;
 }
+
+.mx_DateSeparator_jumpToDateMenu {
+    display: flex;
+}
+
+.mx_DateSeparator_chevron {
+    align-self: center;
+    width: 16px;
+    height: 16px;
+    mask-position: center;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+    background-color: $tertiary-content;
+}

res/css/views/messages/_JumpToDatePicker.scss

@@ -0,0 +1,18 @@
+
+.mx_JumpToDatePicker_form {
+  display: flex;
+  align-items: center;
+}
+
+.mx_JumpToDatePicker_label {
+  font-size: $font-15px;
+}
+
+.mx_JumpToDatePicker_datePicker {
+  margin: 0;
+  margin-left: 8px;
+}
+
+.mx_JumpToDatePicker_submitButton {
+  margin-left: 8px;
+}

src/accessibility/RovingTabIndex.tsx

@@ -131,6 +131,7 @@ export const reducer = (state: IState, action: IAction) => {
         }
 
         case Type.SetFocus: {
+            if (state.activeRef === action.payload.ref) return state;
             // update active ref
             state.activeRef = action.payload.ref;
             return { ...state };
@@ -193,7 +194,9 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
             }
         }
 
+        console.log('onKeyDownHandler', context.state.refs.length)
         let handled = false;
+        let focusRef: RefObject<HTMLElement>;
         // Don't interfere with input default keydown behaviour
         if (ev.target.tagName !== "INPUT" && ev.target.tagName !== "TEXTAREA") {
             // check if we actually have any items
@@ -202,15 +205,15 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
                     if (handleHomeEnd) {
                         handled = true;
                         // move focus to first (visible) item
-                        findSiblingElement(context.state.refs, 0)?.current?.focus();
+                        focusRef = findSiblingElement(context.state.refs, 0);
                     }
                     break;
 
                 case Key.END:
                     if (handleHomeEnd) {
                         handled = true;
                         // move focus to last (visible) item
-                        findSiblingElement(context.state.refs, context.state.refs.length - 1, true)?.current?.focus();
+                        focusRef = findSiblingElement(context.state.refs, context.state.refs.length - 1, true);
                     }
                     break;
 
@@ -220,7 +223,8 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
                         handled = true;
                         if (context.state.refs.length > 0) {
                             const idx = context.state.refs.indexOf(context.state.activeRef);
-                            findSiblingElement(context.state.refs, idx - 1)?.current?.focus();
+                            focusRef = findSiblingElement(context.state.refs, idx + 1);
+                            console.log('up', focusRef, idx + 1)
                         }
                     }
                     break;
@@ -231,7 +235,8 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
                         handled = true;
                         if (context.state.refs.length > 0) {
                             const idx = context.state.refs.indexOf(context.state.activeRef);
-                            findSiblingElement(context.state.refs, idx + 1, true)?.current?.focus();
+                            focusRef = findSiblingElement(context.state.refs, idx - 1, true);
+                            console.log('down', focusRef, idx - 1)
                         }
                     }
                     break;
@@ -242,7 +247,18 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({
             ev.preventDefault();
             ev.stopPropagation();
         }
-    }, [context.state, onKeyDown, handleHomeEnd, handleUpDown, handleLeftRight]);
+
+        if (focusRef) {
+            focusRef.current?.focus();
+            // programmatic focus doesn't fire the onFocus handler, so we must do the do ourselves
+            dispatch({
+                type: Type.SetFocus,
+                payload: {
+                    ref: focusRef,
+                },
+            });
+        }
+    }, [context, onKeyDown, handleHomeEnd, handleUpDown, handleLeftRight]);
 
     return <RovingTabIndexContext.Provider value={context}>
         { children({ onKeyDownHandler }) }
@@ -283,7 +299,7 @@ export const useRovingTabIndex = (inputRef?: Ref): [FocusHandler, boolean, Ref]
             type: Type.SetFocus,
             payload: { ref },
         });
-    }, [ref, context]);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const isActive = context.state.activeRef === ref;
     return [onFocus, isActive, ref];

src/accessibility/Toolbar.tsx

@@ -52,7 +52,7 @@ const Toolbar: React.FC<IProps> = ({ children, ...props }) => {
         }
     };
 
-    return <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
+    return <RovingTabIndexProvider handleHomeEnd handleLeftRight onKeyDown={onKeyDown}>
         { ({ onKeyDownHandler }) => <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
             { children }
         </div> }

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -26,7 +26,8 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
     isExpanded: boolean;
 }
 
-// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
+// Semantic component for representing the AccessibleButton which
+// launches a <ContextMenu />
 export const ContextMenuButton: React.FC<IProps> = ({
     label,
     isExpanded,

src/accessibility/context_menu/MenuItem.tsx

@@ -18,10 +18,9 @@ limitations under the License.
 
 import React from "react";
 
-import AccessibleButton from "../../components/views/elements/AccessibleButton";
-import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+import { RovingAccessibleButton, RovingAccessibleTooltipButton } from "../RovingTabIndex";
 
-interface IProps extends React.ComponentProps<typeof AccessibleButton> {
+interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> {
     label?: string;
     tooltip?: string;
 }
@@ -31,15 +30,15 @@ export const MenuItem: React.FC<IProps> = ({ children, label, tooltip, ...props
     const ariaLabel = props["aria-label"] || label;
 
     if (tooltip) {
-        return <AccessibleTooltipButton {...props} role="menuitem" tabIndex={-1} aria-label={ariaLabel} title={tooltip}>
+        return <RovingAccessibleTooltipButton {...props} role="menuitem" aria-label={ariaLabel} title={tooltip}>
             { children }
-        </AccessibleTooltipButton>;
+        </RovingAccessibleTooltipButton>;
     }
 
     return (
-        <AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={ariaLabel}>
+        <RovingAccessibleButton {...props} role="menuitem" aria-label={ariaLabel}>
             { children }
-        </AccessibleButton>
+        </RovingAccessibleButton>
     );
 };