Skip to content

fix(a11y): name NotificationPanel drawer and announce new items - #8

Closed
ajirthan wants to merge 7 commits into
mainfrom
fix/a11y-notification-panel-560
Closed

ajirthan wants to merge 7 commits into
mainfrom
fix/a11y-notification-panel-560

Conversation

@ajirthan

@ajirthan ajirthan commented Jul 23, 2026 •

Copy link
Copy Markdown
Owner

Summary

  • Name the NotificationPanel drawer with default aria-label="Notifications" (overridable; empty/whitespace falls back)
  • Announce list growth while open via a polite live region; support consumer liveAnnouncement
  • Add regression tests, LiveAnnouncements Storybook story, and accessibility docs updates

Addresses wso2/oxygen-ui#560 (parent epic #557).

Commits

  1. Drawer aria-label + live-region infrastructure
  2. List-growth announcements while open
  3. Accessibility regression tests
  4. Docs + LiveAnnouncements story

Test plan


Note

Medium Risk
New public props and context API require consumers to call setLiveAnnouncement for new items; behavior is well-tested but changes how notification UX should be wired for screen readers.

Overview
NotificationPanel now gives the drawer a default accessible name (aria-label="Notifications", overridable; empty/whitespace keeps the default) via drawer slotProps.paper, and adds a visually hidden polite role="status" live region for status updates.

New arrivals are not inferred from list child count (tabs/filters would false-positive). Apps publish explicitly with the liveAnnouncement prop or useNotificationPanel().setLiveAnnouncement, only while the panel is open; repeated identical text remounts the live region so assistive tech can hear it again. NotificationPanelContext also exposes open for compound children.

Docs and Storybook are updated (including a LiveAnnouncements story); wso2#560 is resolved and removed from follow-ups. accessibility.test.tsx adds regression coverage for naming, live-region behavior, and edge cases (close, reopen, persistent closed).

Reviewed by Cursor Bugbot for commit 8fc331d. Bugbot is set up for automated code reviews on this repo. Configure here.

Comment thread packages/oxygen-ui/src/components/NotificationPanel/NotificationList.tsx Outdated
Comment thread packages/oxygen-ui/src/components/NotificationPanel/NotificationPanel.tsx Outdated
Comment thread packages/oxygen-ui/src/components/NotificationPanel/NotificationPanel.tsx Outdated
@ajirthan
ajirthan force-pushed the fix/a11y-notification-panel-560 branch from 7acab2c to 309f752 Compare July 23, 2026 06:40
@ajirthan

Copy link
Copy Markdown
Owner Author

@BugBot review

Comment thread packages/oxygen-ui/src/components/NotificationPanel/NotificationPanel.tsx Outdated

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 3 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 1eca600. Configure here.

Comment thread packages/oxygen-ui/src/components/NotificationPanel/NotificationPanel.tsx Outdated
@ajirthan

Copy link
Copy Markdown
Owner Author

Superseded by upstream PR: wso2#568

@ajirthan ajirthan closed this Jul 23, 2026
@ajirthan
ajirthan deleted the fix/a11y-notification-panel-560 branch September 13, 2026 20:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant