RocketChat / RocketChat/Rocket.Chat

[Bug] Accessibility (a11y): Missing ARIA tags on "Download file" button in E2EE Message Export Tab

Open Beginner friendly
#39,809 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

📝 Description

The "Download file" button within the End-to-End Encrypted (E2EE) room's "Export Messages" tab has an accessibility flaw. When the button is intended to be in a disabled state, it only receives a CSS styling class (.disabled) instead of using native accessibility attributes.
Because it lacks the standard HTML disabled attribute or the aria-disabled="true" ARIA tag, screen readers will mistakenly announce the button as active and clickable to visually impaired users, resulting in a confusing user experience.
This issue is actively documented in the E2EE tests via a FIXME comment, but has not yet been resolved in the component itself.

🌎 Environment
  • Rocket.Chat App Version: (Insert your current version, e.g., 6.x.x)
  • NodeJS Version: (Insert version if running locally)
  • Operating System: Windows/macOS/Linux
  • Browser: All browsers
  • Deployment Type: Browser / Web App
🚶 Steps to Reproduce
  1. Log into a Rocket.Chat instance with End-to-End Encryption enabled.
  2. Navigate to or create an E2EE room (e.g., an encrypted Direct Message or Channel).
  3. Open the right-side contextual bar and navigate to the Export Messages tab.
  4. Observe the "Download file" button/method when it is visually disabled.
  5. Inspect the DOM element for that button or use a Screen Reader.
🎯 Expected Behavior

The button element should utilize native HTML accessibility attributes when disabled. Specifically, it should use the disabled property or aria-disabled="true" so assistive technologies can appropriately announce its unavailable state.

🛑 Actual Behavior

The button element only has a cosmetic .disabled CSS class appended to it. Screen readers (like VoiceOver or NVDA) will announce it as completely active and clickable.

🛠 Possible Fix

Open the ExportMessagesTab component (or the shared underlying disabled button component it inherits from) and ensure that when the .disabled class is applied, an aria-disabled="true" attribute (or the native HTML disabled property) is rendered simultaneously to the DOM.
Relevant Code Reference/Comments:
In apps/meteor/tests/e2e/e2e-encryption/e2ee-pdf-export.spec.ts (Line 55), there is an existing FIXME explicitly flagging this:

// Initial state check in e2ee-pdf-export.spec.ts
await expect(exportMessagesTab.method).toContainClass('disabled'); // FIXME: looks like the component have an a11y issue

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with apps/meteor/tests/e2e/e2e-encryption/e2ee-pdf-export.spec.ts around line 55 and follow the ExportMessagesTab reference to the component or shared button implementation. Confirm the disabled Download file state in the DOM, then ensure it exposes a native disabled attribute or aria-disabled="true". Done means the E2EE export test still passes and assistive technologies receive the unavailable state.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.