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>
This commit is contained in:
Michael Telatynski
committed by
GitHub
GitHub
parent
7e04998a58
commit
f6731ec318
@@ -25,6 +25,8 @@ import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
||||
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||
import { searchPagination, SearchScope } from "../../../../src/Searching";
|
||||
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
|
||||
import SettingsStore from "../../../../src/settings/SettingsStore.ts";
|
||||
import { SettingLevel } from "../../../../src/settings/SettingLevel.ts";
|
||||
|
||||
jest.mock("../../../../src/Searching", () => ({
|
||||
searchPagination: jest.fn(),
|
||||
@@ -438,6 +440,7 @@ describe("<RoomSearchView/>", () => {
|
||||
});
|
||||
|
||||
it("should pass appropriate permalink creator for all rooms search", async () => {
|
||||
await SettingsStore.setValue("alwaysShowTimestamps", null, SettingLevel.DEVICE, true);
|
||||
const room2 = new Room("!room2:server", client, client.getSafeUserId());
|
||||
const room3 = new Room("!room3:server", client, client.getSafeUserId());
|
||||
mocked(client.getRoom).mockImplementation(
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user