Repository navigation
Fix - Dropdowns show no focus border on form templates (themegrill/user-registration-pro#1896) - #1550
Conversation
…er-registration-pro#1896) Every form template sets a grey border on select at a higher specificity than the generic select:focus rule, so a focused dropdown looked unfocused. Restate the focus colour per template at that specificity, without !important so the Style Customizer's per-form rules still take precedence. Replace the two tests that asserted the old outline behaviour on text fields and add one covering a dropdown and a textarea on every form template.
QA suite — passed ✅All 10 checks passed. 9 passed · 0 failed · 1 skipped · 1 flaky · 260s
|
| Test | Spec | Retries |
|---|---|---|
| login submits over XHR when Ajax Login is enabled @fresh @login-forms | tests/e2e/specs/ajax-login.spec.ts:62 |
1 |
See it for yourself
Download the full report (qa-suite-user-registration-1550.zip). Unzip it and open qa-report.html in any browser — it shows each failure with screenshots of the page at the moment it broke, and what the run did and did not check.
Replaying a failure step by step (developers)
The archive also carries a Playwright trace — every click, the page at each step, network and console. From the unzipped folder:
npx playwright show-report playwright-report
It needs that command rather than opening the file directly: a trace viewer cannot start from a file:// page.
Automated check — no AI involved. It runs the tests in this branch.
There was a problem hiding this comment.
🟡 Changes recommended
Critical compiled stylesheet updates and moderate Flat-template and fixture issues remain unresolved.
2 open findings
What changed in this PR
This PR restores visible dropdown focus indicators across form templates and updates focus regression tests.
Changes:
- Adds template-specific dropdown focus styling.
- Updates login focus assertions.
- Adds cross-template dropdown and textarea coverage.
| File | Summary |
|---|---|
tests/e2e/specs/login-forms.spec.ts |
Revises login focus behavior assertions. |
tests/e2e/specs/form-focus-indicator.spec.ts |
Adds template coverage; fixture setup may fail on fresh sites without an initialized form (moderate, 2 votes). |
assets/css/user-registration.scss |
Adds dropdown focus rules, but Flat’s border remains absent (moderate, 1 vote); compiled CSS and RTL outputs are missing, so the fix will not reach production (critical, 1 vote). |
🧠 Review effort: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| body.user-registration-page .user-registration { | ||
| @each $template in $ur-select-focus-templates { | ||
| &.ur-frontend-form--#{$template}:not(.login) form .ur-form-row .ur-form-grid select:not([type="radio"]):focus { | ||
| border-color: var(--ur-primary-color, $primary_color); | ||
| } |
| const existingForm = wpCli([ | ||
| "post", | ||
| "list", | ||
| "--post_type=user_registration", | ||
| "--post_status=publish", | ||
| "--posts_per_page=1", | ||
| "--field=post_content" | ||
| ]); | ||
| expect( | ||
| existingForm, | ||
| "a registration form must already exist to copy the fixture from" | ||
| ).not.toBe(""); |
All Submissions:
Changes proposed in this Pull Request:
QA rejected #1548 because a focused field still looked thicker than the others. That was the focus ring from #1535 sitting on top of the border, and it is already gone on
v5.3.0(6ae9d12 drops the ring on text fields, so the border alone shows focus, like before #1535).Checking every template turned up a second problem that was there before #1535 too: on a form that uses the Bordered, Flat, Rounded or Default template, a focused dropdown changes nothing at all. Each template sets a grey border on
selectat a higher specificity than the genericselect:focusrule, so the focus colour never applies and keyboard users cannot see where they are (WCAG 2.4.7).This adds one block that restates the focus colour for dropdowns per template, at the specificity of the template's own rule. It deliberately avoids
!important, so the Style Customizer's per-form rules (#user-registration-form-<id> select:focus) still win. Text inputs, textareas, buttons, checkboxes and radios are untouched.Tests: the two tests that asserted the old behaviour on text fields (outline
solid,outline-offset: 0px) are replaced by "border changes, no second ring" and "button keeps its outline and gap". A new spec checks a dropdown and a textarea on all five templates using an isolated form.The compiled
user-registration.cssand its RTL copy carry only the new rule (a real Sass compile of old vs new SCSS differs by exactly these four selectors), because the QA suite loads the tracked CSS without running Sass.Closes themegrill/user-registration-pro#1896
How to test the changes in this Pull Request:
Setup: Create a registration form with a Country field and a Select field. Under Form Settings, set Form Style to Bordered (repeat for Flat and Rounded). Put the form on a page.
Reproduce on
v5.3.0(before this PR): Open the page and press Tab until the dropdown is focused. Its border stays grey and nothing else changes, so there is no sign it has focus.Verify on this branch: Same steps. The dropdown border turns the primary colour. Check the text and textarea fields as well. They look exactly as they did before.
Regression checks: The login form username field shows one thin border on focus and no second ring. Checkboxes, radios and submit buttons still show their outline. With Pro and the Style Customizer, a custom "border color on focus" still applies to dropdowns.
Types of changes:
Other information:
Verified locally in Chromium on a Local site: the new and rewritten e2e tests pass on this branch, and the new dropdown test fails on
v5.3.0's CSS while the login field test fails on #1548's CSS. A 206-field check across all templates changed exactly the 20 dropdown cases and nothing else. Also compared against the CSS from before #1535 (no control lost a focus indicator, nothing changed at rest), with Pro and the Style Customizer active, and with the RTL stylesheet. Not checked: browsers other than Chromium.Known and unchanged: a form whose Style Customizer border type is "none", or whose border colour equals its focus colour, shows no focus indicator. That was already true before #1535.
Changelog entry