Add jump to date functionality to date headers in timeline v2 by MadLittleMods · Pull Request #7339 · matrix-org/matrix-react-sdk

MadLittleMods · 2021-12-11T13:11:25Z

v1 in #7317

Add jump to date functionality to date headers in timeline

Relies on this matrix-js-sdk PR to add MSC3030 /timestamp_to_event support: matrix-org/matrix-js-sdk#2072

Fix element-hq/element-web#7677

Part of MSC3030: matrix-org/matrix-spec-proposals#3030

Experimental Synapse implementation added in matrix-org/synapse#9445

Testing strategy

Update your Synapse homeserver.yaml to enable the msc3030_enabled experimental feature
```
experimental_features:
  msc3030_enabled: true
```
Refresh Element so the Element Labs feature shows up
Enable the Jump to date Labs feature
Check out the timeline for the jump to date headers

Dev notes

Screen recordings:

Quicktime with
https://github.com/keycastr/keycastr

Combining React callback refs and ref-refs,

const attachRef = (input) => {
    this.input = input;

    if (typeof this.props.inputRef === 'function') {
        this.props.inputRef(input);
    } else if(this.props.inputRef) {
        this.props.inputRef.current = input;
    }
}

TODO

Refactor rest of MenuItems, Add jump to date functionality to date headers in timeline v2 #7339 (comment)
Clean up PR
Split out ContextMenu RovingTabIndex refactor to another PR, Refactor ContextMenu to use RovingTabIndex (more consistent keyboard navigation accessibility) #7353
Separate PR: /jumptodate 2021-12-10, Add /jumptodate slash command #7372
Separate PR: Sticky date headers so one is always visible to reference and available to use to jump, Redesign: timeline: make date separator stick to bottom of room header element-hq/element-web#7575

This PR currently has no changelog labels, so will not be included in changelogs.

A reviewer can add one of: T-Deprecation, T-Enhancement, T-Defect, T-Task to indicate what type of change this is, or add Type: [enhancement/defect/task] to the description and I'll add them for you.

Preview: https://61f2350539af3b54bfe30e9a--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

New TooltipTarget & TextWithTooltip were not roving-accessible

…onFocus handler

…xt menu trigger

Copy changes from #7317 on top of RovingTabIndex fixes in #7336

…use useRovingTabIndex

1. Only can tab to the datepicker input and "Go" when the "Jump to date" option is selected 1. Tabbing off the end of the ContextMenu will close it and return your focus back to where it is on the page. Note: nothing special coded for this, just prevented from tabbing off the end of the ContextMenu which was the end of the page. 1. Can navigate up and down the ContextMenu with Arrow keys as expected

src/accessibility/context_menu/MenuItem.tsx

src/components/views/messages/MessageActionBar.tsx

src/components/views/spaces/QuickSettingsButton.tsx

src/components/views/spaces/SpaceCreateMenu.tsx

src/components/views/messages/DateSeparator.tsx

ShadowJonathan · 2021-12-11T15:21:33Z

Separate PR: Stick date headers so one is always visible to reference and available to use to jump, element-hq/element-web#7575

❤️

… t3chguy/a11y2 � Conflicts: � src/components/views/rooms/EventTile.tsx

See #7339 (comment) We also added `:not(.mx_AccessibleButton_hasKind)` to the `res/css/views/context_menus/_IconizedContextMenu.scss` selectors so the style that was overriding this before is no longer interferring.

…k by default See #7339 (comment) and #7339 (comment)

…s-in-timeline-v2 Conflicts: src/i18n/strings/en_EN.json

MadLittleMods · 2022-01-25T08:22:17Z

src/components/views/messages/JumpToDatePicker.tsx

+    onDatePicked?: (dateString: string) => void;
+}
+
+const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {


Thanks for the review pass @turt2live 🙂

turt2live

lgtm minus component naming

Fux #7339 (comment)

…s-in-timeline-v2

…s-in-timeline-v2 Conflicts: src/components/views/rooms/SearchResultTile.tsx

turt2live

thanks :)

MadLittleMods · 2022-01-27T22:32:48Z

Thanks for the review @turt2live 🐇

turt2live · 2022-01-27T22:49:44Z

@MadLittleMods did this still need design review?

MadLittleMods · 2022-01-27T22:55:58Z

@turt2live It's using the standard context menu styles so it's probably pretty good to go. The only thing non-standard is the jump to date calendar form area which we can always iterate in another PR if needed. Plus this is also behind a Labs flag so it doesn't really need to be held up by anything.

t3chguy · 2022-01-31T10:00:37Z

@MadLittleMods this caused all context menus to increase in size so definitely should've had design review

element-hq/element-web#20801

MadLittleMods · 2022-01-31T22:41:05Z

@t3chguy Thanks for cross-linking. It doesn't seem like we need to rely on design to QA that kind of thing (at least as the only defense). It can be spotted by anyone trying out the branch but we just missed it. Easy regression we can fix up on nightly ⏩ #7684

Feature added in - matrix-org/matrix-react-sdk#7339 - matrix-org/matrix-react-sdk#7372 - MSC3030: matrix-org/matrix-spec-proposals#303

Feature added in: - matrix-org/matrix-react-sdk#7339 - matrix-org/matrix-react-sdk#7372 - MSC3030: matrix-org/matrix-spec-proposals#303

Fix element-hq/element-web#20801 Regressed in #7339 Relevant styles were first added in #4858 (context behind why the original styles were added)

Fix element-hq/element-web#20801 Regressed in #7339 Relevant styles were first added in #4858 (context behind why the original styles were added) --- ## Cause Battling CSS specificity between the default and compact styles, https://specificity.keegan.st/ Known good (On `app.element.io` (expected)): ```css // 0 3 0 .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton { padding-top: 12px; padding-bottom: 12px; } // Compact styles override our default rules because they come // after the other styles (source order) and have the same specificity // 0 3 0 .mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList > * { padding: 8px 16px 8px 11px; } ``` Bad (On `develop` (broken)): ```css // Default rules always override because they have higher specificity. // The `:not()` selector doesn't add any extra specificity but the selectors inside the `:not(...)` do. // 0 4 0 .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) { padding-top: 12px; padding-bottom: 12px; } // 0 3 0 .mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList > * { padding: 8px 16px 8px 11px; } ```

Feature added in: - matrix-org/matrix-react-sdk#7339 - matrix-org/matrix-react-sdk#7372 - MSC3030: matrix-org/matrix-spec-proposals#303

t3chguy and others added 12 commits December 10, 2021 15:15

Fix room list roving treeview

7dfbe7a

New TooltipTarget & TextWithTooltip were not roving-accessible

Fix programmatic focus management in roving tab index not triggering …

e6e7885

…onFocus handler

Fix toolbar no longer handling left & right arrows

08b1fdb

Fix roving tab index focus tracking on interactive element like conte…

7c226b9

…xt menu trigger

Fix thread list context menu roving

4ddc97d

add comment

459f155

fix comment

1784b44

Copy Jump to Date PoC changes on top of RovingTabIndex fixes

b061c94

Copy changes from #7317 on top of RovingTabIndex fixes in #7336

RovingTabIndex in ContextMenu

9cc435a

Refactor JumpToDatePicker form out to functional component so we can …

688314b

…use useRovingTabIndex

DatePicker only keyboard navigable when item focused

9ad8868

MadLittleMods requested a review from a team as a code owner December 11, 2021 13:11

MadLittleMods removed the request for review from a team December 11, 2021 13:11

MadLittleMods marked this pull request as draft December 11, 2021 13:11