[6.x] Announces the password reset error message in via the live region#19303
Draft
gcamacho079 wants to merge 4 commits into
Draft
[6.x] Announces the password reset error message in via the live region#19303gcamacho079 wants to merge 4 commits into
gcamacho079 wants to merge 4 commits into
Conversation
Contributor
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility of authentication error handling by switching login/reset-password error announcements to a shared global live region, ensuring screen readers reliably announce messages (ACC-221). It also includes a small CSS cleanup and adds initial a11y documentation for craft-button.
Changes:
- Route login and reset-password error messages through the shared
useAnnouncer()mechanism (instead of updating a shadow-DOM live region). - Replace
LiveRegionwithGlobalLiveRegionand render it unconditionally in relevant layouts. - Fix a CSS double-semicolon and add
craft-buttona11y requirements documentation.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| resources/js/modules/auth/components/login/login-reset-password.ts | Announces reset-password errors via useAnnouncer() and centralizes error setting. |
| resources/js/modules/auth/components/login/login-form.ts | Announces login errors via useAnnouncer() rather than a local shadow live region. |
| resources/js/common/layouts/AuthBase.vue | Adds the global live region to auth pages; fixes a minor CSS typo. |
| resources/js/common/layouts/AppLayout.vue | Replaces legacy LiveRegion usage with GlobalLiveRegion. |
| resources/js/common/components/LiveRegion.vue | Removes the old conditional live region component. |
| resources/js/common/components/GlobalLiveRegion.vue | Adds an always-present global live region tied to useAnnouncer(). |
| packages/craftcms-ui/src/components/button/button.a11y.md | Adds initial accessibility requirements documentation for craft-button. |
Comments suppressed due to low confidence (2)
resources/js/modules/auth/components/login/login-reset-password.ts:42
#setError()trims the error for display but announces the untrimmed message. This can cause the announced text to differ from what’s shown (and can announce pure whitespace). Announce the trimmed value and skip announcing if it becomes empty.
#setError(message: string) {
this._error = message.trim();
useAnnouncer().announce(message);
}
resources/js/modules/auth/components/login/login-form.ts:212
#setError()trims the error for display but announces the untrimmed message. Announce the trimmed value (and avoid announcing an empty/whitespace-only message) so the screen reader output matches what’s visible.
#setError(message: string) {
const { announce } = useAnnouncer();
this._error = message.trim();
announce(message);
}
| import './login-challenge.js'; | ||
| import './login-reset-password.js'; | ||
|
|
||
| import { useAnnouncer } from '@/common/composables/useAnnouncer'; |
| import {property, query, state} from 'lit/decorators.js'; | ||
| import {actionClient, t} from '@craftcms/ui'; | ||
| import componentStyles from './login-form.styles.js'; | ||
| import { useAnnouncer} from '@/common/composables/useAnnouncer'; |
📚 Storybook previews@craftcms/ui — open Storybook Changed components: resources/js — open Storybook No changed components detected in this Storybook. |
gcamacho079
marked this pull request as draft
July 24, 2026 18:18
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
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.
Description
Also:
LiveRegiontoGlobalLiveRegionfor clarity; remove conditional render to ensure announcement is read.Related issues
Resolves ACC-221