feat: add notification_bell with a11y compliance and validation alerts (Closes #320, #324) - #348
Open
Max-Owolabi wants to merge 2 commits into
Open
Conversation
Implements the navbar alert bell badge as a keyboard-operable (role=button) disclosure with ARIA compliance (Goldii-locks#320): accessible name, aria-haspopup/aria-expanded/aria-controls, aria-live announcement regions, aria-hidden on decorative glyphs, focus-visible rings and design-token contrast. Adds field error indicators and alerts (Goldii-locks#324): validation field configs render role=alert error text that toggles as validation triggers, wired via aria-describedby and counted toward the unread badge. Adds React Testing Library tests covering both requirements. Closes Goldii-locks#320 Closes Goldii-locks#324
|
@Max-Owolabi Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
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
1 participant
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.
Summary
Adds the
notification_bell(navbar alert bell badge) component, addressing two requirements in a single component since both target the same module that did not yet exist:notification_bell.notification_bell.Resolves #320
Resolves #324
Changes
app/components/notification_bell.tsx— new component:<button>(keyboard navigable),aria-labelaccessible name,aria-haspopup/aria-expanded/aria-controlsdisclosure wiring,aria-liveannouncement regions,role="alert"for errors,aria-hiddenon decorative glyphs/badge count (with visually-hidden duplicate count),focus-visiblerings, and design-token colors that meet contrast.errorrender arole="alert"message wired viaaria-describedbyand counted toward the unread badge. Error text toggles as validation triggers (fields without an error render clean/valid).__tests__/notification_bell.test.tsx— 23 RTL tests covering both the a11y requirements and validation-alert toggling.Verification
tsc --noEmitpasses.main(the only failing tests are pre-existing and unrelated to this change).