fix: improve label association in omnichannel unit fields

[TheRazorbill]

Proposed changes (including videos or screenshots)

• Associate Omnichannel unit-related inputs with their visible labels using aria-labelledby
• Remove the temporary aria-label workaround from AutoCompleteUnit
• Improve screen-reader output for Offline Message Channel and Unit fields

Issue(s)

• N/A

Steps to test or reproduce

1. Open Omnichannel → Departments → Edit Department
2. Inspect Send this department's Livechat offline messages to a channel
   • The select container has aria-labelledby pointing to the label text
3. (Optional) Unit field appears only with Enterprise license, so not visible in OSS

Further comments

• The Email field already uses native htmlFor/id association, so no changes were needed there
• Tested locally with DevTools Accessibility/Elements panel
• No behavior changes, only accessibility improvements

Tests

Summary by CodeRabbit

• Accessibility
  • Improved label associations across the Omnichannel department form for offline messaging and unit selection, enhancing screen-reader clarity.
  • Unit selection and offline message channel controls now expose explicit aria-labelledby attributes so assistive technology can reliably identify and announce linked labels.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 70fc84a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[dionisio-bot]

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

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[coderabbitai]

Walkthrough

Adds an aria-labelledby prop to the unit autocomplete and wires explicit label IDs with aria-labelledby on offline message channel and unit controls in the omnichannel department form to improve accessibility (no behavioral changes).

Changes

Cohort / File(s)	Summary
AutoCompleteUnit Aria Support apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx	Adds a new aria-labelledby prop (aliased as ariaLabelledBy) and forwards it to PaginatedSelectFiltered, replacing the prior aria-label usage and spreading remaining props into the child component.
EditDepartment Form Accessibility apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx	Introduces label ID helpers, assigns ids to FieldLabel elements for offline message channel and unit, and applies aria-labelledby to PaginatedSelectFiltered and AutoCompleteUnit to link controls to their labels.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped through lines both neat and spry,
Tied labels to fields so they no longer sigh.
Now screen readers sing, and inputs reply,
Accessibility carrots—oh my, oh my! 🥕

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: improving label association in omnichannel unit fields through aria-labelledby implementation, which aligns with the primary objective of the changeset.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into develop
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🤖 Fix all issues with AI agents

Verify each finding against the current code and only fix it if needed.


In `@apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx`:
- Line 128: The native TextInput's aria-labelledby (constructed via
emailFieldLabelId) is redundant because FieldLabel already provides htmlFor/id
association; remove the aria-labelledby attribute from TextInput usage (e.g.,
where emailFieldLabelId is created and passed) and keep aria-labelledby only on
custom components that require it (PaginatedSelectFiltered, AutoCompleteUnit).
Update occurrences referenced by symbols FieldLabel, TextInput,
emailFieldLabelId and ensure other native inputs (Name, Description) follow the
same pattern so only non-native/custom controls retain aria-labelledby.

🧹 Nitpick comments (1)

🤖 Fix all nitpicks with AI agents

Verify each finding against the current code and only fix it if needed.


In `@apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx`:
- Line 128: The native TextInput's aria-labelledby (constructed via
emailFieldLabelId) is redundant because FieldLabel already provides htmlFor/id
association; remove the aria-labelledby attribute from TextInput usage (e.g.,
where emailFieldLabelId is created and passed) and keep aria-labelledby only on
custom components that require it (PaginatedSelectFiltered, AutoCompleteUnit).
Update occurrences referenced by symbols FieldLabel, TextInput,
emailFieldLabelId and ensure other native inputs (Name, Description) follow the
same pattern so only non-native/custom controls retain aria-labelledby.

apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx (1)

128-128: Redundant labeling on the native TextInput for Email.

The <FieldLabel htmlFor={emailField}> already creates a native <label> → <input> association via the matching id={emailField} on TextInput. Adding aria-labelledby on top is redundant for native inputs — screen readers will announce the label either way. It's not harmful, but it's inconsistent with the other native inputs in this form (e.g., Name, Description) that rely solely on htmlFor.

Consider keeping aria-labelledby only for the custom select components (PaginatedSelectFiltered, AutoCompleteUnit) where htmlFor may not reach the actual focusable element, and dropping it from the native TextInput.

Also applies to: 199-199, 203-213

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx` at line
128, The native TextInput's aria-labelledby (constructed via emailFieldLabelId)
is redundant because FieldLabel already provides htmlFor/id association; remove
the aria-labelledby attribute from TextInput usage (e.g., where
emailFieldLabelId is created and passed) and keep aria-labelledby only on custom
components that require it (PaginatedSelectFiltered, AutoCompleteUnit). Update
occurrences referenced by symbols FieldLabel, TextInput, emailFieldLabelId and
ensure other native inputs (Name, Description) follow the same pattern so only
non-native/custom controls retain aria-labelledby.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 508b4a1 and 392cbfd.

📒 Files selected for processing (2)

• apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx
• apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx
• apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx

🧠 Learnings (2)

📓 Common learnings

Learnt from: aleksandernsilva
Repo: RocketChat/Rocket.Chat PR: 36974
File: apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx:124-129
Timestamp: 2025-09-18T17:32:33.969Z
Learning: The ARIA mismatch issue in MessageForm's template field (where FieldError id used templateId instead of messageFormId) was addressed in PR `#36972` through refactoring the template field into a separate TemplateField component, which uses consistent templateFieldId for both aria-describedby and FieldError id.

📚 Learning: 2025-09-18T17:32:33.969Z

Learnt from: aleksandernsilva
Repo: RocketChat/Rocket.Chat PR: 36974
File: apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx:124-129
Timestamp: 2025-09-18T17:32:33.969Z
Learning: The ARIA mismatch issue in MessageForm's template field (where FieldError id used templateId instead of messageFormId) was addressed in PR `#36972` through refactoring the template field into a separate TemplateField component, which uses consistent templateFieldId for both aria-describedby and FieldError id.

Applied to files:

• apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx
• apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: cubic · AI code reviewer
• GitHub Check: Agent

🔇 Additional comments (3)

apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx (1)

29-29: Clean prop forwarding for aria-labelledby.

The destructuring alias and forwarding to PaginatedSelectFiltered are correct. The prop is already covered by the ComponentProps<typeof PaginatedSelectFiltered> base type, so no additional type declaration is needed.

Also applies to: 47-47

apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx (2)

229-231: Good use of aria-labelledby for the custom select component.

PaginatedSelectFiltered likely renders a non-native select where htmlFor alone won't create a proper label association. The explicit aria-labelledby linkage is the right approach here.

Also applies to: 237-248

---

352-352: Correct aria-labelledby linkage for AutoCompleteUnit.

The label ID is properly generated, assigned to the FieldLabel, and passed through to the AutoCompleteUnit which forwards it to the underlying PaginatedSelectFiltered. This completes the accessibility chain for the unit field.

Also applies to: 361-367

[Copilot]

Pull request overview

Improves accessibility of Omnichannel department edit fields by explicitly associating composite inputs with their visible labels via aria-labelledby, removing the previous aria-label workaround on the Unit autocomplete.

Changes:

• Add label element IDs and wire Email / Offline Message Channel / Unit inputs with aria-labelledby in the Edit Department form
• Remove the temporary aria-label from AutoCompleteUnit and support passing aria-labelledby through

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx	Adds label IDs and connects related inputs to their labels via aria-labelledby.
apps/meteor/client/views/omnichannel/additionalForms/AutoCompleteUnit.tsx	Switches from hardcoded aria-label to using aria-labelledby passed in from the parent.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cubic-dev-ai]

No issues found across 2 files

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.