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

* 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>
2025-10-28 09:33:02 +00:00
parent 7e04998a58
commit f6731ec318
78 changed files with 280 additions and 124 deletions
@@ -29,6 +29,7 @@ describe("MessageTimestamp", () => {
    aria-hidden="true"
    aria-live="off"
    class="mx_MessageTimestamp"
+    tabindex="0"
  >
    08:09
  </span>
@@ -97,7 +97,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                </div>
                <div
                  class="mx_EventTile_line"
-                  id="4"
+                  id="1"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
@@ -224,7 +224,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                </div>
                <div
                  class="mx_EventTile_line"
-                  id="5"
+                  id="2"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
@@ -324,6 +324,9 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                data-self="true"
                tabindex="-1"
              >
+                <span
+                  class="mx_MessageTimestamp"
+                />
                <div
                  class="mx_DisambiguatedProfile"
                >
@@ -351,7 +354,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                </div>
                <div
                  class="mx_EventTile_line"
-                  id="6"
+                  id="3"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
@@ -467,6 +467,9 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                        data-self="true"
                        tabindex="-1"
                      >
+                        <span
+                          class="mx_MessageTimestamp"
+                        />
                        <div
                          class="mx_DisambiguatedProfile"
                        >