feat(components): shared Alert Twig component varying by type#99
Merged
Conversation
Adds `templates/components/Alert.html.twig` accepting a `type` prop (success | error | warning | info, default info) and a `class` slot for layout extras like margins. `type` drives the ARIA role: error / warning are assertive (role="alert"), success / info are polite (role="status"). The visual treatment is a single neutral surface today, matching the existing login error block; per-type colour treatments will land once success / warning / error / info colour tokens are added to `app.css` - this PR just gives the call-sites a stable API. Refactors the one duplicated call site on develop: - templates/security/login.html.twig (form-login error) Refs #93. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
martinydeAI
added a commit
that referenced
this pull request
Jun 22, 2026
The admin user-list page hand-rolled the same flash-message box markup that the new `<twig:Alert>` component (from PR #99, now on develop) handles. Swap to the component so the markup and ARIA role live in one place. `type="success"` resolves to `role="status"` inside the component, matching the previous explicit `role="status"`. Visual output unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Links to issues
Closes #93.
Description
The notification box on
templates/security/login.html.twigwashand-rolled with
<div class="...rounded-lg border border-line bg-surface-2..." role="alert">. Extract a sharedAlertTwigcomponent so the same markup powers flash messages and inline
errors across the app.
templates/components/Alert.html.twig—type(success|error|warning|info, defaultinfo),classslot forlayout extras (margins).
typedrives the ARIA role:error/warningare assertive(
role="alert"),success/infoare polite (role="status").existing login error block. Per-type colour treatments will land
once
success/warning/error/infocolour tokens areadded to
assets/styles/app.css— this PR ships the stablecall-site API so adoption can start now.
Refactored the one site on develop:
templates/security/login.html.twig(form-login error)Screenshot of the result
n/a — the refactored login error preserves the exact class string
that was there before (only the wrapper element name changes from
<div>to the rendered Twig component, which emits the same<div>). Visual output is unchanged.Checklist
Verified locally:
task coding-standards-twig-check— green.task test-coverage— 70 tests, 267 assertions, 100% coverage.Additional comments or questions
The four
typevalues are all accepted today but only the ARIArole differs between them. That intentional under-engineering keeps
the design system honest: visual differentiation should follow a
colour-token decision, not be invented inside one component.
Details - AI specificities
templates/components/and is invoked via<twig:Alert ...>(Twig Components bundle), matching theexisting
Heading/Eyebrow/Heroetc. conventions.error/warning→role="alert",success/info→role="status". Matches the issue'sexplicit ask.
unmerged user-management PRs (feat(user): add name and status fields per ADR 006 (#45, #83) #86–feat(registration): anonymous self-signup with email-domain allow-list (#62) #90) introduce
profile/*andregistration/*templates that also duplicate the notificationmarkup; those call sites can adopt the component once their PRs
rebase onto a develop that carries it.