Skip to content

fix(design-system): OcSwitch keeps its focus, OcMobileDrop takes it when opened - #3627

Merged
AlexAndBear merged 1 commit into
mainfrom
fix/ds-switch-mobile-drop-focus
Oct 12, 2026
Merged

AlexAndBear merged 1 commit into
mainfrom
fix/ds-switch-mobile-drop-focus

Conversation

@AlexAndBear

@AlexAndBear AlexAndBear commented Oct 9, 2026 •

Copy link
Copy Markdown
Member

Description

Two focus bugs in the design system, found while testing PDF Studio (web-extensions):

  • OcSwitch: the root element was keyed by the checked state, so every toggle rendered a new button and the focus fell to the body. Keyboard users lost their place, a second Space did nothing and Escape no longer reached a surrounding drop. The key is gone, the styles only depend on aria-checked, so the switch looks the same.
    • Where the key came from: feat: improve switch UI and a11y owncloud/owncloud-design-system#1421 (commit e15954d6, 2021, "move switch label to the left"), no reason given in the PR or commit. Back then the switch had CSS transitions, which the key actually suppressed by re-creating the element; today there are no transitions.
    • All users (admin settings announcement and user edit panel, create folder/space modals, view options, text editor search panel) bind checked/update:checked only, none relies on the re-creation. Content in the label slot (e.g. a contextual helper) is no longer re-created on toggle either, so an open helper stays open.
  • OcMobileDrop: opening the bottom drawer left the focus on the toggle. Escape therefore went to the page behind the drawer first, e.g. AppWrapper, which closed the whole app (with unsaved changes it asked about them instead). The drawer now focuses itself when opened, like OcDrop does on larger screens.

Related Issue

How Has This Been Tested?

  • both bugs reproduced with Playwright (Chromium, Firefox, WebKit) in PDF Studio on a local dev server: the switch loses the focus on toggle; at 390px the focus stays on the toggle after opening a drawer (also after 2 s) and Escape closes the app
  • unit tests added for both, they fail without the fix
  • unit tests of all OcSwitch users (admin settings, files modals, view options, editor) and of OcDrop/OcBottomDrawer pass (49 files, 738 tests)
  • not yet checked in a running web build with this branch

Types of changes

  • Bugfix
  • Enhancement (a change that doesn't break existing code or deployments)
  • Breaking change (a modification that affects current functionality)
  • Technical debt (addressing code that needs refactoring or improvements)
  • Tests (adding or improving tests)

…rop takes the focus

OcSwitch was keyed by its state, so every toggle rendered a new button and
the focus was lost (keyboard users, a second Space did nothing). The mobile
drop now focuses its drawer when opened, like the drop on larger screens,
so Escape closes the drawer instead of reaching the page behind it (e.g.
AppWrapper, which closed the app).
@AlexAndBear
AlexAndBear marked this pull request as ready for review October 9, 2026 12:38
@AlexAndBear
AlexAndBear merged commit f7bd078 into main Oct 12, 2026
32 checks passed
@AlexAndBear
AlexAndBear deleted the fix/ds-switch-mobile-drop-focus branch October 12, 2026 08:30
openclouders pushed a commit that referenced this pull request Oct 12, 2026
…rop takes the focus (#3627)

OcSwitch was keyed by its state, so every toggle rendered a new button and
the focus was lost (keyboard users, a second Space did nothing). The mobile
drop now focuses its drawer when opened, like the drop on larger screens,
so Escape closes the drawer instead of reaching the page behind it (e.g.
AppWrapper, which closed the app).
@openclouders openclouders mentioned this pull request Oct 12, 2026
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants