fix: `FileUpload` initial focus order #35889

dougfabris · 2025-04-28T21:07:17Z

Proposed changes (including videos or screenshots)

In order to be a11y full compliant we removed the forced focus on the description input to follow the natural DOM order and it created some bad usability and frustrations to a lot of users.

Forcing the focus is technically compliant, but slightly deviates from the natural tab order starting at the top. Screen reader users will still encounter the elements in the DOM order, but the initial focus will be different. Since this a simple modal, with only two inputs, this will not to be a major issue.

"When a dialog opens, focus moves to an element contained in the dialog. Generally, focus is initially set on the first focusable element. However, the most appropriate focus placement will depend on the nature and size of the content." (https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)

Issue(s)

Steps to test or reproduce

Further comments

CORE-1102

dionisio-bot · 2025-04-28T21:07:21Z

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

changeset-bot · 2025-04-28T21:07:21Z

🦋 Changeset detected

Latest commit: ea8ffbb

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

This PR includes changesets to release 36 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/freeswitch	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/ui-contexts	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/stream-hub-service	Patch
@rocket.chat/license	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/instance-status	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

kody-ai · 2025-04-28T21:07:23Z

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx

github-actions · 2025-04-28T21:17:02Z

PR Preview Action v1.6.1
🚀 View preview at https://RocketChat.github.io/Rocket.Chat/pr-preview/pr-35889/
Built to branch `gh-pages` at 2025-04-29 15:45 UTC. Preview will be ready when the GitHub Pages deployment is complete.

codecov · 2025-04-28T21:18:07Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 61.17%. Comparing base (5832dd9) to head (6dc6c12).
Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #35889      +/-   ##
===========================================
+ Coverage    61.15%   61.17%   +0.02%     
===========================================
  Files         3013     3161     +148     
  Lines        71589    74707    +3118     
  Branches     16397    16679     +282     
===========================================
+ Hits         43779    45704    +1925     
- Misses       24841    25903    +1062     
- Partials      2969     3100     +131

Flag	Coverage Δ
e2e	`57.83% <100.00%> (-0.03%)`	⬇️
unit	`75.10% <ø> (ø)`

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.

kody-ai · 2025-04-28T22:30:34Z

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

dougfabris · 2025-04-29T15:35:51Z

@kody start-review

kody-ai · 2025-04-29T15:40:27Z

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

kody-ai · 2025-04-29T17:30:06Z

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration

Interacting with Kody

Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.
Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration

Review Options

The following review options are enabled or disabled:

Options	Enabled
Security	✅
Code Style	✅
Kody Rules	✅
Refactoring	✅
Error Handling	✅
Maintainability	✅
Potential Issues	✅
Documentation And Comments	✅
Performance And Optimization	✅
Breaking Changes	❌

Access your configuration settings here.

ggazzo added the Invalid PR Title label Apr 28, 2025

dougfabris changed the title ~~wip~~ fix: FileUpload input order Apr 28, 2025

dougfabris added this to the 7.7.0 milestone Apr 28, 2025

ggazzo removed the Invalid PR Title label Apr 28, 2025

kody-ai bot reviewed Apr 28, 2025

View reviewed changes

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx Show resolved Hide resolved

fix: change focus order

49339fc

dougfabris force-pushed the fix/fileUpload-input-order branch from e50f61a to 49339fc Compare April 28, 2025 22:30

dougfabris changed the title ~~fix: FileUpload input order~~ fix: FileUpload initial focus order Apr 28, 2025

test: update e2e test

08c76ea

dougfabris marked this pull request as ready for review April 29, 2025 15:35

dougfabris requested a review from a team as a code owner April 29, 2025 15:35

yash-rajpal previously approved these changes Apr 29, 2025

View reviewed changes

chore: changeset

ea8ffbb

dougfabris dismissed yash-rajpal’s stale review via ea8ffbb April 29, 2025 15:40

yash-rajpal approved these changes Apr 29, 2025

View reviewed changes

yash-rajpal added the stat: QA assured Means it has been tested and approved by a company insider label Apr 29, 2025

dionisio-bot bot added the stat: ready to merge PR tested and approved waiting for merge label Apr 29, 2025

Merge branch 'develop' into fix/fileUpload-input-order

6dc6c12

kodiakhq bot merged commit 5b64566 into develop Apr 29, 2025
48 checks passed

kodiakhq bot deleted the fix/fileUpload-input-order branch April 29, 2025 19:36

rocketchat-github-ci mentioned this pull request May 20, 2025

Release 7.7.0 #36031

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: `FileUpload` initial focus order #35889

fix: `FileUpload` initial focus order #35889

Uh oh!

dougfabris commented Apr 28, 2025 •

edited

Loading

Uh oh!

dionisio-bot bot commented Apr 28, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 28, 2025 •

edited

Loading

Uh oh!

kody-ai bot commented Apr 28, 2025 •

edited

Loading

Uh oh!

Uh oh!

github-actions bot commented Apr 28, 2025 •

edited

Loading

Built to branch `gh-pages` at 2025-04-29 15:45 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

codecov bot commented Apr 28, 2025 •

edited

Loading

Uh oh!

kody-ai bot commented Apr 28, 2025 •

edited

Loading

Uh oh!

dougfabris commented Apr 29, 2025

Uh oh!

kody-ai bot commented Apr 29, 2025 •

edited

Loading

Uh oh!

kody-ai bot commented Apr 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix: FileUpload initial focus order #35889

fix: FileUpload initial focus order #35889

Uh oh!

Conversation

dougfabris commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

Uh oh!

dionisio-bot bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

kody-ai bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Completed! 🔥

Uh oh!

Uh oh!

github-actions bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2025-04-29 15:45 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

codecov bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

kody-ai bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Kody Review Complete

Uh oh!

dougfabris commented Apr 29, 2025

Uh oh!

kody-ai bot commented Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Kody Review Complete

Uh oh!

kody-ai bot commented Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Completed! 🔥

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix: `FileUpload` initial focus order #35889

fix: `FileUpload` initial focus order #35889

dougfabris commented Apr 28, 2025 •

edited

Loading

dionisio-bot bot commented Apr 28, 2025 •

edited

Loading

changeset-bot bot commented Apr 28, 2025 •

edited

Loading

kody-ai bot commented Apr 28, 2025 •

edited

Loading

github-actions bot commented Apr 28, 2025 •

edited

Loading

Built to branch `gh-pages` at 2025-04-29 15:45 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

codecov bot commented Apr 28, 2025 •

edited

Loading

kody-ai bot commented Apr 28, 2025 •

edited

Loading

kody-ai bot commented Apr 29, 2025 •

edited

Loading

kody-ai bot commented Apr 29, 2025 •

edited

Loading