Tooltip: Use AccessibleButton in reusable elements (#12461)

* Update reusable elements

* Update tests

* Make right as default tooltip placement

* Add tests
This commit is contained in:
Florian Duros 2024-04-29 19:19:05 +02:00 committed by GitHub
parent d5bf1022e9
commit 44e2a6d070
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 160 additions and 30 deletions

View file

@ -45,6 +45,7 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
<div
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
data-state="closed"
role="button"
tabindex="0"
/>

View file

@ -15,7 +15,8 @@ limitations under the License.
*/
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
@ -113,12 +114,14 @@ describe("<LabsUserSettingsTab />", () => {
expect(toggle.getAttribute("aria-checked")).toEqual("true");
// Hover over the toggle to make it show the tooltip
fireEvent.mouseOver(toggle);
await userEvent.hover(toggle);
const tooltip = rendered.getByRole("tooltip");
expect(tooltip).toHaveTextContent(
"Once enabled, Rust cryptography can only be disabled by logging out and in again",
);
await waitFor(() => {
const tooltip = screen.getByRole("tooltip");
expect(tooltip).toHaveTextContent(
"Once enabled, Rust cryptography can only be disabled by logging out and in again",
);
});
});
});
@ -150,12 +153,14 @@ describe("<LabsUserSettingsTab />", () => {
expect(toggle.getAttribute("aria-checked")).toEqual("true");
// Hover over the toggle to make it show the tooltip
fireEvent.mouseOver(toggle);
await userEvent.hover(toggle);
const tooltip = rendered.getByRole("tooltip");
expect(tooltip).toHaveTextContent(
"Rust cryptography cannot be disabled on this deployment of BrandedClient",
);
await waitFor(() => {
const tooltip = rendered.getByRole("tooltip");
expect(tooltip).toHaveTextContent(
"Rust cryptography cannot be disabled on this deployment of BrandedClient",
);
});
});
});
});

View file

@ -289,6 +289,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
aria-disabled="true"
aria-label="Send read receipts"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
data-state="closed"
id="mx_SettingsFlag_GQvdMWe954DV"
role="switch"
tabindex="0"