Show hover elements when keyboard focus is within an event tile (#31078)

Browse Source

* Show timestamps when keyboard focus is within an event tile

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

* Ensure toolbar navigation pattern works in MessageActionBar

This requires all buttons within to be roving by using the ref callback given by useRovingTabIndex

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

* Use PureComponent in EventTile to avoid mass re-rendering due to transitive onFocus/onBlur calls

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

* Remove unused timestamp event tile prop

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

* Use MessageTimestamp to generate the wrapping anchor so that focusing it brings up the tooltip

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

* Tweak MessageTimestamp

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

* Switch back to Component as we specify a shouldComponentUpdate already

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

* Update jest tests

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

* Update playwright timestamp masks

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

* Revert snapshot

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

* Update snapshot

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

* Fix IRC layout

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

* Use PureComponent in EventTile to avoid mass re-rendering due to transitive onFocus/onBlur calls

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

* Remove unused timestamp event tile prop

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

* Use MessageTimestamp to generate the wrapping anchor so that focusing it brings up the tooltip

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

* Tweak MessageTimestamp

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

* Switch back to Component as we specify a shouldComponentUpdate already

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

* Update jest tests

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

* Update playwright timestamp masks

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

* Revert snapshot

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

* Update snapshot

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

* Fix IRC layout

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

* Lint styles

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

* Fix layout picker

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

* Update snapshots

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

* Update screenshots

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

* Fix pcss comment

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

* Iterate Playwright

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

* Iterate

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

* Iterate Playwright

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

---------

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

...

This commit is contained in:

Michael Telatynski

2025-10-28 09:33:02 +00:00

committed by GitHub

parent 7e04998a58

commit f6731ec318

78 changed files with 280 additions and 124 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 54 KiB After Width:  |  Height:  |  Size: 54 KiB

playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 8.0 KiB After Width:  |  Height:  |  Size: 8.0 KiB

playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 4.1 KiB After Width:  |  Height:  |  Size: 4.1 KiB

playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 4.2 KiB After Width:  |  Height:  |  Size: 4.2 KiB

playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 4.0 KiB After Width:  |  Height:  |  Size: 4.0 KiB

playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 4.2 KiB After Width:  |  Height:  |  Size: 4.2 KiB

playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.3 KiB After Width:  |  Height:  |  Size: 5.3 KiB

playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.5 KiB After Width:  |  Height:  |  Size: 5.5 KiB

playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.2 KiB After Width:  |  Height:  |  Size: 5.2 KiB

playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.3 KiB After Width:  |  Height:  |  Size: 5.3 KiB

playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 7.8 KiB After Width:  |  Height:  |  Size: 7.7 KiB

playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 7.9 KiB After Width:  |  Height:  |  Size: 7.9 KiB

playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 6.1 KiB After Width:  |  Height:  |  Size: 6.1 KiB

playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 6.2 KiB After Width:  |  Height:  |  Size: 6.2 KiB

playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.6 KiB After Width:  |  Height:  |  Size: 5.6 KiB

playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 4.6 KiB After Width:  |  Height:  |  Size: 4.6 KiB

playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.7 KiB After Width:  |  Height:  |  Size: 5.7 KiB

playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.9 KiB After Width:  |  Height:  |  Size: 5.9 KiB

playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 4.5 KiB After Width:  |  Height:  |  Size: 4.5 KiB

playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 68 KiB After Width:  |  Height:  |  Size: 68 KiB

playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 16 KiB After Width:  |  Height:  |  Size: 16 KiB

playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 24 KiB After Width:  |  Height:  |  Size: 24 KiB

playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 24 KiB After Width:  |  Height:  |  Size: 24 KiB

playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 33 KiB After Width:  |  Height:  |  Size: 33 KiB

playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 28 KiB After Width:  |  Height:  |  Size: 28 KiB

playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 28 KiB After Width:  |  Height:  |  Size: 28 KiB

playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 33 KiB After Width:  |  Height:  |  Size: 33 KiB

playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 33 KiB After Width:  |  Height:  |  Size: 33 KiB

playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 30 KiB After Width:  |  Height:  |  Size: 30 KiB

playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 29 KiB After Width:  |  Height:  |  Size: 29 KiB

playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 4.6 KiB After Width:  |  Height:  |  Size: 4.6 KiB

playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 54 KiB After Width:  |  Height:  |  Size: 54 KiB

playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 7.0 KiB After Width:  |  Height:  |  Size: 6.9 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 7.6 KiB After Width:  |  Height:  |  Size: 7.5 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 7.9 KiB After Width:  |  Height:  |  Size: 7.9 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 8.9 KiB After Width:  |  Height:  |  Size: 8.8 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 8.0 KiB After Width:  |  Height:  |  Size: 8.1 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 45 KiB After Width:  |  Height:  |  Size: 45 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 57 KiB After Width:  |  Height:  |  Size: 57 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 64 KiB After Width:  |  Height:  |  Size: 64 KiB

playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 45 KiB After Width:  |  Height:  |  Size: 45 KiB

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 67 KiB After Width:  |  Height:  |  Size: 67 KiB

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 61 KiB After Width:  |  Height:  |  Size: 61 KiB

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 70 KiB After Width:  |  Height:  |  Size: 70 KiB

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 66 KiB After Width:  |  Height:  |  Size: 66 KiB

playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 57 KiB After Width:  |  Height:  |  Size: 57 KiB

playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 57 KiB After Width:  |  Height:  |  Size: 57 KiB

playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 37 KiB After Width:  |  Height:  |  Size: 37 KiB

playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 149 KiB After Width:  |  Height:  |  Size: 149 KiB

playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 150 KiB After Width:  |  Height:  |  Size: 150 KiB

playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 165 KiB After Width:  |  Height:  |  Size: 165 KiB

playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 10 KiB After Width:  |  Height:  |  Size: 10 KiB