103 lines
6.3 KiB
Gherkin
103 lines
6.3 KiB
Gherkin
Feature: Log-in card sizing, alert placement and focus behavior match the Auth board
|
|
|
|
As the maintainer of RenewCMS
|
|
I want AuthShell's card padding, control heights, "Forgot password?" styling, field-error
|
|
presentation, theme select and h1 focus timing built exactly to the AuthCard board
|
|
(docs/design/source/AuthCard.dc.html) instead of Nuxt UI's untouched defaults
|
|
So that /login (and every other AuthShell-based public screen) matches the design board pixel
|
|
for pixel, at desktop and mobile, in light and dark
|
|
|
|
This complements features/auth_shell_login_conformance.feature, which covers AppLogo, the
|
|
UPageCard title/description wiring, the muted-background breakpoint and the neutral/error input
|
|
edge. This feature covers what that one doesn't: exact card/control measurements, the "Forgot
|
|
password?" link's own styling, the field-error icon and halo behavior, the theme select's
|
|
chevron, where the alert sits relative to the card, and when the h1 receives focus.
|
|
|
|
Background:
|
|
Given AuthShell is the layout for every public route, per docs/design/routes.md
|
|
And the card's padding, control heights and title size come from
|
|
docs/design/source/AuthCard.dc.html's renderVals(): pad "40px" and control height "40px"
|
|
from the sm breakpoint up; pad "8px 20px 0" (with a separate footer padding of
|
|
"0 20px 24px") and control height "44px" below sm; the title is always "font:600 20px/28px"
|
|
And the Password UFormField's "Forgot password?" link is styled color var(--ui-text-toned)
|
|
(muted), text-decoration underline, underline-offset 3px, per AuthCard.dc.html's f.link span
|
|
And a field error renders with the i-lucide-circle-alert icon in var(--ui-error), and the
|
|
field's edge/shadow is computed error-first, so an errored field that is also focused shows
|
|
only the single error-colored inset ring, never a focus ring stacked under or around it
|
|
And AuthShell's notice slot (the alert) renders inside the card's own layout, after the
|
|
title/description block and before the form — not as a sibling element above the card
|
|
And the footer's UColorModeSelect renders with no chevron/dropdown-arrow icon, as the last
|
|
(right-hand) child of the footer's space-between row, per AuthCard.dc.html's theme span
|
|
And on first paint, AuthShell's h1 (tabindex="-1") does not receive focus; focus moves to it
|
|
only when the title changes while AuthShell stays mounted (an in-app navigation between
|
|
public screens, e.g. /login to /register/reset/request), per components.md's AuthShell a11y
|
|
line ("On route change, focus moves to the h1")
|
|
And the h1 never shows a visible focus outline, since it is only ever focused programmatically
|
|
and is not part of the visible keyboard-tab order
|
|
|
|
Scenario: Card padding and control heights at sm and up
|
|
Given the user is on /login at a viewport of sm or wider
|
|
When AuthShell and the login form render
|
|
Then the card's own padding is 40px on every side
|
|
And the Username input, the Password input and the submit button are each 40px tall
|
|
And input text renders at 14px
|
|
|
|
Scenario: Card padding and control heights below sm
|
|
Given the user is on /login at a viewport below sm
|
|
When AuthShell and the login form render
|
|
Then the card's own padding is 8px top, 20px left and right, 0 bottom
|
|
And the footer (outside the card) has its own padding of 0 top, 20px left and right, 24px bottom
|
|
And the Username input, the Password input and the submit button are each 44px tall
|
|
And input text renders at 16px
|
|
|
|
Scenario: "Forgot password?" is underlined and muted
|
|
Given the user is on /login
|
|
When the Password field renders
|
|
Then the "Forgot password?" link uses the muted text color (--ui-text-toned)
|
|
And the link is underlined with a 3px underline offset
|
|
And the link carries no other emphasis (not bold, not the primary color)
|
|
|
|
Scenario: A field error shows the circle-alert icon with no extra focus halo
|
|
Given the user is on /login
|
|
When the user submits with Username "ma" and Password empty (the Validation errors state)
|
|
Then the Username field's error message is preceded by the i-lucide-circle-alert icon in the
|
|
error color
|
|
And the Password field's error message is preceded by the same icon in the same color
|
|
When the user tabs into the still-errored Username field so it is both errored and focused
|
|
Then the field shows exactly one inset ring, in the error color
|
|
And no second, differently colored focus ring is layered under or around it
|
|
|
|
Scenario: The theme select is right-aligned in the footer with no chevron
|
|
Given the user is on /login
|
|
When AuthShell's footer renders
|
|
Then the UColorModeSelect is the last (right-most) element in the footer's row
|
|
And it renders only its mode icon and label ("System", "Light" or "Dark")
|
|
And it renders no trailing chevron or dropdown-arrow icon
|
|
|
|
Scenario Outline: The alert renders inside the card, under the description
|
|
Given the user is redirected to <path>
|
|
When /login renders with its <state> alert
|
|
Then the alert is a child of the same card element that contains the title and description,
|
|
not a sibling positioned above the card
|
|
And the alert sits after the title/description block and before the Username field
|
|
And the alert's background uses UAlert's soft variant, which is dark-tinted automatically in
|
|
dark mode
|
|
|
|
Examples:
|
|
| path | state |
|
|
| /login?redirect=/article/12/edit&reason=expired | Session expired |
|
|
| /login?reason=password-changed | Password changed |
|
|
|
|
Scenario: The h1 is not focused on first load
|
|
Given the user navigates directly to /login (a fresh page load)
|
|
When AuthShell mounts and the h1 renders
|
|
Then the h1 does not receive focus
|
|
And focus remains on the document body (or wherever the browser places it on load)
|
|
|
|
Scenario: Focus moves to the h1 only on an in-app navigation between public screens
|
|
Given the user is on /login with AuthShell already mounted
|
|
When the user follows the "Forgot password?" link to /register/reset/request without a full
|
|
page reload
|
|
Then AuthShell's h1 receives focus once ResetRequestPage's title renders
|
|
And the h1 shows no visible outline when it receives this focus
|