ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-06 06:28:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

A11y: improve accessibility of pinned messages (#30558)

Browse Source 
* fix: improve aria role and label on pinned message banner

* fix: change pinned message badge background for contrast

* fix: link pinned message button to content

* test: update tests

* fix: add aria-describedby on pinned message badge

* feat: use `aria-describedby` instead of `aria-description`

* test: update room view snapshot

* test: update snapshot

* fix: put id only textual body upper div

* fix: use lodash uniqueId

* test: update snapshots
This commit is contained in:
Florian Duros
2025-09-02 15:03:01 +02:00
committed by GitHub
parent 1925132a3c
commit eb086bd795
17 changed files with 205 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/unit-tests/components/views/rooms/PinnedMessageBanner-test.tsx
+21 -4
View File
@@ -139,7 +139,12 @@ describe("<PinnedMessageBanner />", () => {
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
const { asFragment, rerender } = renderBanner();
await userEvent.click(screen.getByRole("button", { name: "View the pinned message in the timeline." }));
await expect(screen.findByText("Second pinned message")).resolves.toBeVisible();
await userEvent.click(
screen.getByRole("button", {
name: "View the pinned message in the timeline and the newest pinned message here",
}),
);
expect(screen.getByText("First pinned message")).toBeVisible();
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([
@@ -162,7 +167,11 @@ describe("<PinnedMessageBanner />", () => {
renderBanner();
await expect(screen.findByText("Second pinned message")).resolves.toBeVisible();
await userEvent.click(screen.getByRole("button", { name: "View the pinned message in the timeline." }));
await userEvent.click(
screen.getByRole("button", {
name: "View the pinned message in the timeline and the newest pinned message here",
}),
);
expect(screen.getByText("First pinned message")).toBeVisible();
expect(screen.getByTestId("banner-counter")).toHaveTextContent("1 of 2 Pinned messages");
expect(dis.dispatch).toHaveBeenCalledWith({
@@ -173,7 +182,11 @@ describe("<PinnedMessageBanner />", () => {
metricsTrigger: undefined, // room doesn't change
});
await userEvent.click(screen.getByRole("button", { name: "View the pinned message in the timeline." }));
await userEvent.click(
screen.getByRole("button", {
name: "View the pinned message in the timeline and the next oldest pinned message here",
}),
);
expect(screen.getByText("Second pinned message")).toBeVisible();
expect(screen.getByTestId("banner-counter")).toHaveTextContent("2 of 2 Pinned messages");
expect(dis.dispatch).toHaveBeenCalledWith({
@@ -224,7 +237,11 @@ describe("<PinnedMessageBanner />", () => {
// The banner is displayed, so we need to resize the timeline
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);
await userEvent.click(screen.getByRole("button", { name: "View the pinned message in the timeline." }));
await userEvent.click(
screen.getByRole("button", {
name: "View the pinned message in the timeline and the newest pinned message here",
}),
);
await expect(screen.findByText("First pinned message")).resolves.toBeVisible();
// The banner is already displayed, so we don't need to resize the timeline
expect(resizeNotifier.notifyTimelineHeightChanged).toHaveBeenCalledTimes(1);