Question
What should happen to focus when a Clarity dropdown closes via Escape?
Rin Vale
0 reputation · 24 Oct 2020, 13:55 UTC
71.2K views
Loading…
0 reputation · 24 Oct 2020, 13:55 UTC
When a user closes a Clarity <clr-dropdown> panel by pressing the Escape key, the component removes the dropdown from the DOM but does not move focus back to any element.
This leaves keyboard focus on the next focusable item in the page or without a visible focus indicator, which conflicts with WCAG 2.1 Success Criteria 2.1.1 (Keyboard) and 2.4.7 (Focus Visible). The Clarity team has logged an open accessibility discussion about whether focus should return to the dropdown toggle or to the last selected item, and no consensus has been reached in the current stable release.
Given that custom dropdown templates may inadvertently restore focus and that earlier Clarity versions handled focus differently, what is the intended focus‑return behavior for the <clr-dropdown> when closed via Escape, and which element should receive focus to satisfy accessibility guidelines?
33775 reputation · 24 Oct 2020, 20:50 UTC
When a Clarity <clr-dropdown> closes via Escape, focus should be restored to the dropdown toggle button that opened it, with aria-expanded="false" on that toggle. Focus must not be left on a menu item, on document.body, or lost to the next focusable element on the page.
Clarity’s accessible dropdown pattern follows WAI-ARIA menu button practices. Escape closes the popup and returns focus to the trigger. This satisfies WCAG 2.1 Success Criterion 2.1.1 Keyboard and 2.4.7 Focus Visible by keeping a visible, predictable focus location after the dismiss action.
Behavior is version-sensitive. Clarity Angular 1.x and Clarity Web Components 2.x implement the return-focus logic inside the official components. Assumptions may not hold for older, forked or custom-built dropdowns.
If focus is not returned to the toggle in your case, the built-in handling is being bypassed. Common causes are:
Do not manually call blur() on the toggle on close.
claritydocument.activeElement in devtools. It should be the toggle button element.aria-haspopup and aria-expanded toggling to false on close, and confirm no focus trap remains active.Recommendation changes with implementation. Please confirm Clarity version and framework implementation, e.g., Clarity Angular clr-dropdown vs Clarity Web Components vs a custom vanilla build. Refocus logic is built-in in official components but not in custom builds, and current verification is required.
Use comments to ask for clarification. Post a solution as an answer.
33,775 reputation · 24 Oct 2020, 14:08 UTC
When the Escape key closes a <clr-dropdown>, the component currently removes the panel from the DOM before moving focus. If focus is restored after removal, the browser may first shift to the next focusable element in the document, causing a momentary loss of a visible focus indicator. To satisfy WCAG 2.1 SC 2.1.1 and 2.4.7, the focus‑return to the toggle should occur while the dropdown is still in the DOM, ensuring that the toggle receives focus immediately and no intermediate element is focused.
Developers who need to work around the current behavior can listen for the keydown event on the toggle, detect Escape, and call toggle.focus() before allowing the default close action to proceed. This must be done in coordination with Clarity’s internal keyboard listener to avoid double‑focus or focus loops.
Clarity Angular 1.x and Clarity Web Components 2.x both lack the automatic focus‑return logic; the described timing fix applies to those releases. Future versions may incorporate the focus‑set‑before‑remove pattern internally.