matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-06 10:22:45 +03:00
Code Activity

Improved a11y for Field feedback and Secure Phrase input (#10320)

Browse Source 
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Sebbones
2023-03-08 12:32:50 +01:00
committed by GitHub
parent f60f7a19af
commit 0c1c3f1cde
5 changed files with 78 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
test/components/views/elements/Field-test.tsx
View File

@@ -15,7 +15,7 @@ limitations under the License.
*/
import React from "react";
import { render, screen } from "@testing-library/react";
import { act, fireEvent, render, screen } from "@testing-library/react";
import Field from "../../../../src/components/views/elements/Field";
@@ -51,4 +51,61 @@ describe("Field", () => {
expect(screen.getByRole("textbox")).not.toHaveAttribute("placeholder", "my placeholder");
});
});
describe("Feedback", () => {
it("Should mark the feedback as alert if invalid", async () => {
render(
<Field
value=""
validateOnFocus
onValidate={() => Promise.resolve({ valid: false, feedback: "Invalid" })}
/>,
);
// When invalid
await act(async () => {
fireEvent.focus(screen.getByRole("textbox"));
});
// Expect 'alert' role
expect(screen.queryByRole("alert")).toBeInTheDocument();
});
it("Should mark the feedback as status if valid", async () => {
render(
<Field
value=""
validateOnFocus
onValidate={() => Promise.resolve({ valid: true, feedback: "Valid" })}
/>,
);
// When valid
await act(async () => {
fireEvent.focus(screen.getByRole("textbox"));
});
// Expect 'status' role
expect(screen.queryByRole("status")).toBeInTheDocument();
});
it("Should mark the feedback as tooltip if custom tooltip set", async () => {
render(
<Field
value=""
validateOnFocus
onValidate={() => Promise.resolve({ valid: true, feedback: "Valid" })}
tooltipContent="Tooltip"
/>,
);
// When valid or invalid and 'tooltipContent' set
await act(async () => {
fireEvent.focus(screen.getByRole("textbox"));
});
// Expect 'tooltip' role
expect(screen.queryByRole("tooltip")).toBeInTheDocument();
});
});
});