From 3c7422e5b7ff42939022dbdd43b1fb01202d6ed8 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 30 Apr 2026 23:42:44 -0300 Subject: [PATCH] fix(EditRoomInfo): align system-messages MultiSelect with new fuselage a11y The MultiSelect anchor in @rocket.chat/fuselage now exposes role="combobox" and uses aria-label/aria-labelledby for its accessible name (the placeholder is rendered as inert children). The recently added EditRoomInfo.spec.tsx was written against the previous fuselage where the anchor was a plain button named by its placeholder, so getByRole('button', { name: /Select messages to hide/i }) no longer matches and CI's Unit Tests fail on develop. - Pass aria-label to the MultiSelect so the combobox has an accessible name. - Update the spec helper to query by the combobox role. --- .changeset/edit-room-info-multiselect-aria-label.md | 5 +++++ .../contextualBar/Info/EditRoomInfo/EditRoomInfo.spec.tsx | 2 +- .../room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/edit-room-info-multiselect-aria-label.md diff --git a/.changeset/edit-room-info-multiselect-aria-label.md b/.changeset/edit-room-info-multiselect-aria-label.md new file mode 100644 index 0000000000000..0c5b39192087d --- /dev/null +++ b/.changeset/edit-room-info-multiselect-aria-label.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Adds an accessible label to the system-messages multi-select in the channel edit panel so screen readers announce its purpose. diff --git a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.spec.tsx b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.spec.tsx index c1104b47caece..77e86dd509435 100644 --- a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.spec.tsx +++ b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.spec.tsx @@ -64,7 +64,7 @@ const removeSystemMessageChip = async (translationKey: string) => { }; const selectSystemMessageOption = async (translationKey: string) => { - const trigger = screen.getByRole('button', { name: /Select messages to hide/i }); + const trigger = screen.getByRole('combobox', { name: /Select messages to hide/i }); await userEvent.click(trigger); const listboxes = await screen.findAllByRole('listbox', { hidden: true }); diff --git a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx index ffa26af663e1d..da0a254d8a838 100644 --- a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx +++ b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx @@ -483,6 +483,7 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) => options={sysMesOptions} disabled={!hideSysMes || isFederated} placeholder={t('Select_messages_to_hide')} + aria-label={t('Select_messages_to_hide')} /> )} />