Skip to content

test: align system-messages MultiSelect with new fuselage a11y#40357

Merged
ggazzo merged 1 commit intodevelopfrom
fix/edit-room-info-spec-fuselage-multiselect
May 1, 2026
Merged

test: align system-messages MultiSelect with new fuselage a11y#40357
ggazzo merged 1 commit intodevelopfrom
fix/edit-room-info-spec-fuselage-multiselect

Conversation

@ggazzo
Copy link
Copy Markdown
Member

@ggazzo ggazzo commented May 1, 2026

Summary

The Unit Tests CI job is currently red on develop (and on every PR against it). The failure is in EditRoomInfo.spec.tsx, added by #40295:

TestingLibraryElementError: Unable to find an accessible element
with the role "button" and name `/Select messages to hide/i`

@rocket.chat/fuselage MultiSelect was upgraded by #40328 and the anchor now exposes role="combobox" and uses aria-label/aria-labelledby for the accessible name (the placeholder is rendered as inert children, which ARIA does not consult for combobox names). The spec was written against the previous behavior, where the anchor was a plain <button> named by its placeholder text — so the broken selector matched then but does not match now.

Why CI didn't catch this earlier

The two changes that conflict travelled on different branches and never met until the back-merge from the release line.

Date (UTC) Event Branch Has spec? Has new fuselage?
Apr 24 18:00 #40295 (regression that adds the spec) master (release-8.4.0) yes no
Apr 29 22:36 #40328 (upgrade fuselage packages) develop no yes
Apr 30 16:26 #38225 (sidebar drafts) develop no yes
Apr 30 19:18 #40268 (refactor frontend) develop no yes
Apr 30 21:24 Release 8.4.0 cut master yes no
Apr 30 21:31 Merge master into develop (aed3c5d85d) develop yes yes → red

957625f064 is not an ancestor of 981af327a9git merge-base between them lands on 6cd73b0fe9 from Apr 22. #40295 was labelled regression:, so it went into the release branch (master), not into develop.

What each CI run actually saw:

This is a textbook merge-skew between the release branch and mainline: each side green in isolation, conflict only visible at the back-merge. The 6-day gap between #40295 landing on master (Apr 24) and master flowing back into develop (Apr 30) is what kept the regression hidden.

Changes

  • EditRoomInfo.tsx — pass aria-label={t('Select_messages_to_hide')} to the MultiSelect so the combobox has a real accessible name (a11y improvement, not just a test fix).
  • EditRoomInfo.spec.tsx — query the trigger via getByRole('combobox', …) to match the new fuselage semantics.

Test plan

  • yarn jest client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.spec.tsx — all 5 tests pass locally.
  • Unit Tests CI green.
  • Manual smoke: edit a channel → Advanced settings → toggle "Hide system messages" → the multi-select is announced as "Select messages to hide" by screen readers.

Task: ARCH-2123

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced screen reader compatibility in the channel edit panel by adding accessible labels to the "Select messages to hide" multi-select control.

…e 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.
@dionisio-bot
Copy link
Copy Markdown
Contributor

dionisio-bot Bot commented May 1, 2026

Looks like this PR is not ready to merge, because of the following issues:

  • This PR is missing the 'stat: QA assured' label

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 1, 2026

🦋 Changeset detected

Latest commit: 3c7422e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 42 packages
Name Type
@rocket.chat/meteor Patch
@rocket.chat/core-typings Patch
@rocket.chat/rest-typings Patch
@rocket.chat/uikit-playground Patch
@rocket.chat/api-client Patch
@rocket.chat/apps Patch
@rocket.chat/core-services Patch
@rocket.chat/cron Patch
@rocket.chat/ddp-client Patch
@rocket.chat/fuselage-ui-kit Patch
@rocket.chat/gazzodown Patch
@rocket.chat/http-router Patch
@rocket.chat/livechat Patch
@rocket.chat/model-typings Patch
@rocket.chat/models Patch
@rocket.chat/ui-avatar Patch
@rocket.chat/ui-client Patch
@rocket.chat/ui-contexts Patch
@rocket.chat/ui-voip Patch
@rocket.chat/web-ui-registration Patch
@rocket.chat/account-service Patch
@rocket.chat/authorization-service Patch
@rocket.chat/ddp-streamer Patch
@rocket.chat/omnichannel-transcript Patch
@rocket.chat/presence-service Patch
@rocket.chat/queue-worker Patch
@rocket.chat/abac Patch
@rocket.chat/federation-matrix Patch
@rocket.chat/license Patch
@rocket.chat/media-calls Patch
@rocket.chat/omnichannel-services Patch
@rocket.chat/pdf-worker Patch
@rocket.chat/presence Patch
rocketchat-services Patch
@rocket.chat/network-broker Patch
@rocket.chat/omni-core-ee Patch
@rocket.chat/mock-providers Patch
@rocket.chat/instance-status Patch
@rocket.chat/omni-core Patch
@rocket.chat/server-fetch Patch
@rocket.chat/ui-video-conf Patch
@rocket.chat/ui-composer Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 1, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fe746642-1129-4e25-a8d8-d20088452dd7

📥 Commits

Reviewing files that changed from the base of the PR and between aed3c5d and 3c7422e.

📒 Files selected for processing (3)
  • .changeset/edit-room-info-multiselect-aria-label.md
  • apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.spec.tsx
  • apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx

Walkthrough

Adds an accessible aria-label to the system-messages multi-select in the channel edit panel. Changes include a changeset entry, test adjustment for role-based element selection, and aria-label implementation.

Changes

Cohort / File(s) Summary
Accessibility Enhancement for Room Edit Panel
.changeset/edit-room-info-multiselect-aria-label.md, apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx, apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.spec.tsx
Adds aria-label to MultiSelect component for improved screen reader accessibility. Updates test to locate combobox by role instead of button. Includes changeset documentation.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

type: chore


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link
Copy Markdown

codecov Bot commented May 1, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 69.99%. Comparing base (aed3c5d) to head (3c7422e).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #40357      +/-   ##
===========================================
+ Coverage    69.81%   69.99%   +0.18%     
===========================================
  Files         3300     3301       +1     
  Lines       119423   120443    +1020     
  Branches     21532    21585      +53     
===========================================
+ Hits         83378    84308     +930     
- Misses       32737    32844     +107     
+ Partials      3308     3291      -17     
Flag Coverage Δ
e2e 59.59% <ø> (-0.03%) ⬇️
e2e-api 46.22% <ø> (-0.89%) ⬇️
unit 70.87% <100.00%> (+0.25%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ggazzo ggazzo added this to the 8.5.0 milestone May 1, 2026
@ggazzo
Copy link
Copy Markdown
Member Author

ggazzo commented May 1, 2026

/jira ARCH-2083

@ggazzo ggazzo changed the title fix(EditRoomInfo): align system-messages MultiSelect with new fuselage a11y test: align system-messages MultiSelect with new fuselage a11y May 1, 2026
@ggazzo ggazzo marked this pull request as ready for review May 1, 2026 02:58
@ggazzo ggazzo requested a review from a team as a code owner May 1, 2026 02:58
@ggazzo ggazzo merged commit d33009a into develop May 1, 2026
25 of 26 checks passed
@ggazzo ggazzo deleted the fix/edit-room-info-spec-fuselage-multiselect branch May 1, 2026 03:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant