Skip to content

fix(a11y): don't auto-open dropdown on focus, hide decorative chevron#73

Open
pringelmann wants to merge 1 commit intomainfrom
feat/a11y-ncselect-props
Open

fix(a11y): don't auto-open dropdown on focus, hide decorative chevron#73
pringelmann wants to merge 1 commit intomainfrom
feat/a11y-ncselect-props

Conversation

@pringelmann
Copy link
Copy Markdown

Summary

Fixes two WCAG findings on the combobox reported against the use management "New Account" dialog (nextcloud-gmbh/customer-feature-requests#1587).

  • WCAG 3.2.1 - tabbing into the search input used to auto-open the dropdown, which jumps the screen reader into the listbox and announces an option before the field label. Users never hear which field they're in. Dropped the focus side-effect; Space/enter/down arrow still open the dropdown, clicks still work.
  • WCAG 4.1.2 - the chevron button exposed a useless "options list" accessible name via aria-labelledby. It's tabindex="-1" and the combobox input already exposes the open state, so it's purely decorative. Marked it aria-hidden="true" and dropped remaining aria tags. Mouse users still get the click target.

Behavior changes

Worth a minor bump, not a patch:

  • Code relying on "focus opens the dropdown" as a side-effect needs to open it explicitly or use a keyboard/click gesture.
  • Tests querying aria-labelledby/aria-controls/aria-expanded on the button will break.

No props, events, or methods changed.

Follow-ups

Once released:

  1. nextcloud-vue: migrate NcSelect on main from upstream vue-select back to @nextcloud/vue-select, bump to this version
  2. server: bump @nextcloud/vue

Tabbing into the search input used to auto-open the dropdown, jumping
the screen reader into the listbox before the field name is announced
(WCAG 3.2.1). The chevron also exposed a useless "Options list" name
via aria-labelledby (WCAG 4.1.2). Mark it aria-hidden and drop the
focus side-effect. Space/Enter/ArrowDown still open the dropdown.

Refs: nextcloud-gmbh/customer-feature-requests#1587
-e
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
@pringelmann pringelmann self-assigned this Apr 14, 2026
@pringelmann pringelmann added the 3. to review 3️⃣ Waiting for reviews label Apr 14, 2026
@pringelmann pringelmann added this to the 4.1.0 milestone Apr 14, 2026
@pringelmann pringelmann requested review from Altahrim, artonge and susnux and removed request for Altahrim April 14, 2026 19:23
@codecov
Copy link
Copy Markdown

codecov bot commented Apr 14, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.29%. Comparing base (4ca0c0b) to head (74d22e6).

Additional details and impacted files
@@            Coverage Diff             @@
##             main      #73      +/-   ##
==========================================
- Coverage   91.31%   91.29%   -0.02%     
==========================================
  Files          10       10              
  Lines         449      448       -1     
  Branches      145      146       +1     
==========================================
- Hits          410      409       -1     
  Misses         33       33              
  Partials        6        6              

☔ View full report in Codecov by Sentry.
📢 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.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@pringelmann pringelmann requested a review from skjnldsv April 14, 2026 19:24
@pringelmann pringelmann added the type: bug 🐛 Something isn't working label Apr 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review 3️⃣ Waiting for reviews type: bug 🐛 Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants