[Bug] Accessibility (a11y): Missing ARIA tags on "Download file" button in E2EE Message Export Tab
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- accessibility, frontend
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.
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
- Log into a Rocket.Chat instance with End-to-End Encryption enabled.
- Navigate to or create an E2EE room (e.g., an encrypted Direct Message or Channel).
- Open the right-side contextual bar and navigate to the Export Messages tab.
- Observe the "Download file" button/method when it is visually disabled.
- 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
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 132
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from RocketChat/Rocket.Chat
-
type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
RocketChat/Rocket.Chat#42271 ·
-
type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
RocketChat/Rocket.Chat#42256 ·
-
type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
RocketChat/Rocket.Chat#42248 ·
-
todo type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
RocketChat/Rocket.Chat#42241 ·
-
todo type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
RocketChat/Rocket.Chat#42237 ·
All issues in RocketChat/Rocket.Chat
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
bug clawsweeper:linked-pr-open clawsweeper:needs-live-repro clawsweeper:no-new-fix-pr impact:message-loss issue-rating: 🐚 platinum hermit P2 regression
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
fullcalendar/fullcalendar#8106 ·