Skip to content

fix: prevent file upload input from receiving keyboard tab focus - #2138

Open
kristian-zendato wants to merge 1 commit into
mainfrom
fix/file-upload-tab-focus
Open

fix: prevent file upload input from receiving keyboard tab focus#2138
kristian-zendato wants to merge 1 commit into
mainfrom
fix/file-upload-tab-focus

Conversation

@kristian-zendato

@kristian-zendato kristian-zendato commented Jul 27, 2026

Copy link
Copy Markdown

Related issue: nextcloud/server#62248

Summary

This PR updates the file upload input to prevent it from receiving keyboard focus through the Tab key.

Changes

Update the class of the file input fromhidden-visually to hidden.

Reason

Using display: none ensures the element is excluded from the tab order, preventing users from navigating to a non-interactive control while preserving the existing file upload behavior.

🤖 AI (if applicable)

  • The content of this PR was partly or fully generated using AI

@codecov

codecov Bot commented Jul 27, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 36.30%. Comparing base (fa56e3c) to head (6345e56).
⚠️ Report is 8 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2138   +/-   ##
=======================================
  Coverage   36.30%   36.30%           
=======================================
  Files          17       17           
  Lines         774      774           
  Branches      145      145           
=======================================
  Hits          281      281           
  Misses        480      480           
  Partials       13       13           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Comment thread lib/vue/components/UploadPicker.vue Outdated
:accept="accept?.join?.(', ')"
:multiple="multiple"
class="hidden-visually"
class="hidden"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where does this come from? hidden-visually is a server provided public CSS class, but hidden?
Sounds more like the proper fix would be

Suggested change
class="hidden"
class="hidden-visually"
tabindex="-1"
aria-hidden="true"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah its also defined in server, but the specificity is pretty low so testing did not work.
I still think it makes sense to mark this properly as hidden from the accessibility tree and remove tab sequence explicitly.

Signed-off-by: Kristian Zendato <kristian.zendato@nextcloud.com>
@kristian-zendato
kristian-zendato force-pushed the fix/file-upload-tab-focus branch from cb926cf to 6345e56 Compare July 27, 2026 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants