fix(notification-center): errors following a full review of the component

[lskramarov]

Summary

The review found one crash-class defect and two release-blocking keyboard failures. A notification
whose date the configured DateAdapter could not parse made format(null) throw inside the
groupedItems map, erroring the observable and permanently blanking the panel — reopening
resubscribed to the same dead pipe. Separately, the per-item delete buttons were display: none until
:hover, while being the only focusable element in their container, so a keyboard user could not
delete anything.

Two ng update migrations ship with this branch.

List of notable changes:

• fixed the unparsable-date crash that permanently blanked the panel; the neighbouring
  compareByDateDesc already guarded exactly this case
• fixed keyboard access to the delete controls, and applied the focus trap the panel had been
  computing but never installing — Tab escaped the overlay and host-scoped Escape then went dead
• added accessible names for the icon-only header buttons, which had neither a label nor a tooltip
• fixed the destroy-while-open path that left a permanent closingActions() subscription throwing
  a TypeError on every subsequent scroll anywhere in the app
• fixed the inner-scroll "prevent close" protocol, which mutated shared CdkScrollable instances
  without resetting them and silently broke closeOnScroll for other overlays app-wide
• added two migration schematics — notification-center-signals and read-state-dwell-handlers —
  for the renamed surface and the removed mouseenterHandler/mouseleaveHandler
• fixed the focus origin on the silent-mode toggle: opening the panel with the mouse painted a
  keyboard focus ring, because the call hardcoded 'keyboard'. It now uses the real input modality
  via InputModalityDetector, the same rule as KbqBasePipe.currentFocusOrigin — not FocusMonitor's
  last origin, which reports program for a click landing outside its detection window

What should reviewers focus on?

• The two new schematics under packages/schematics/src/migrations/ and their registration in
  collection.json / migrations.json.
• packages/components/core/common-behaviors/read-state.ts is shared with toast — that consumer suite
  runs green here, but the toast branch touches the same file.
• Removed public symbols: KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION,
  KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY, mouseenterHandler, mouseleaveHandler, timestamp.
• The screenshot baseline for the panel header has shifted and needs /approve-snapshots here.

---

One of ten pull requests from a single review pass (review/*). Every branch carries two commits: the
fixes from the component review, and a second pass over the findings an independent verifier could not
confirm outright.

The branches share files, so they have to be merged one at a time with a rebase in between. Overlap:
packages/components/core/locales/* (7 branches), tools/public_api_guard/components/core.api.md (7),
tools/cspell-locales/*.json (6), packages/e2e/routes.ts (4) and
packages/schematics/src/{collection,migrations}.json (3).

[github-actions]

Visit the preview URL for this PR (updated for commit 30156db):

https://koobiq-next--prs-1943-yn91re71.web.app

_{(expires Thu, 10 Sep 2026 11:28:04 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[lskramarov]

/approve-snapshots

[github-actions]

🔄 Updating snapshots.

[github-actions]

✅ Snapshots updated!

[Copilot]

🟡 Changes recommended

The new migrations should be adjusted to avoid rewriting/scanning .d.ts and .ngtypecheck.ts files and to correctly scope local receiver renames to block-level to prevent false-positive edits.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR hardens and modernizes notification-center by preventing invalid-date crashes, improving keyboard/focus accessibility in the overlay panel, and introducing two ng update migrations to help consumers adapt to the API surface changes.

Changes:

• Prevent panel-breaking errors from unparsable notification dates (service-side parsing/cache + UI-side guarding).
• Fix keyboard/focus behavior in the overlay (focus trap installation, focus restoration after deletes, keyboard-reachable delete controls, added ARIA labeling/live-region text).
• Add ng update migrations to (a) rename KbqReadStateDirective dwell handlers and (b) report non-mechanical notification-center breaking changes.

File summaries

File	Description
tools/public_api_guard/components/notification-center.api.md	Updates public API snapshot for notification-center surface changes.
tools/public_api_guard/components/core.api.md	Updates core public API snapshot (locale + read-state directive signature changes).
tools/check-public-api-any/baseline.json	Updates any/unknown baseline counts for notification-center.
packages/schematics/src/migrations/read-state-dwell-handlers/schema.ts	Adds migration options typing.
packages/schematics/src/migrations/read-state-dwell-handlers/schema.json	Defines migration schema for CLI usage.
packages/schematics/src/migrations/read-state-dwell-handlers/README.md	Documents the dwell-handler rename migration and manual follow-ups.
packages/schematics/src/migrations/read-state-dwell-handlers/index.ts	Implements the dwell-handler rename + warnings migration.
packages/schematics/src/migrations/read-state-dwell-handlers/index.spec.ts	Adds schematic test coverage for renames and reporting behavior.
packages/schematics/src/migrations/read-state-dwell-handlers/data.ts	Centralizes patterns/messages for the dwell-handler migration.
packages/schematics/src/migrations/notification-center-signals/schema.ts	Adds migration options typing.
packages/schematics/src/migrations/notification-center-signals/schema.json	Defines migration schema for CLI usage.
packages/schematics/src/migrations/notification-center-signals/README.md	Documents notification-center breaking changes that require manual decisions.
packages/schematics/src/migrations/notification-center-signals/index.ts	Implements report-only migration for notification-center API changes.
packages/schematics/src/migrations/notification-center-signals/index.spec.ts	Adds schematic test coverage for report behavior.
packages/schematics/src/migrations/notification-center-signals/data.ts	Centralizes patterns/messages for notification-center report migration.
packages/schematics/src/migrations.json	Registers both new migrations for ng update.
packages/schematics/src/collection.json	Registers both schematics in the schematics collection.
packages/e2e/routes.ts	Adds new notification-center e2e routes/fixtures.
packages/e2e/main.ts	Ensures DateAdapter/formatters are provided at root for e2e app bootstrapping.
packages/components/notification-center/public-api.ts	Adjusts exports (adds tokens export, removes animations export).
packages/components/notification-center/notification-item.ts	Guards date formatting, switches to panel token contract, adds focus-safe delete behavior.
packages/components/notification-center/notification-item.scss	Makes delete button keyboard-reachable and updates sizing tokens.
packages/components/notification-center/notification-item.html	Fixes template context exposure, adds unread SR text, wires focus-safe removal.
packages/components/notification-center/notification-center.ts	Focus trap + focus restoration + scroll handling fixes; introduces panel token/provider.
packages/components/notification-center/notification-center.tokens.ts	Introduces tokens + locale provider utilities + narrow panel contract.
packages/components/notification-center/notification-center.service.ts	Adds parsed-date caching/guarding, Subjects instead of EventEmitters, unread counter sharing.
packages/components/notification-center/notification-center.scss	Adds tokens, trap wrapper styling, keyboard-reveal affordances, and z-index fixes.
packages/components/notification-center/notification-center-tokens.scss	Defines component CSS tokens for sizing/theme.
packages/components/notification-center/notification-center.ru.md	Documents new requirements/behavior (root date adapter, unparsable dates, deletion semantics).
packages/components/notification-center/notification-center.en.md	Same documentation updates in English.
packages/components/notification-center/notification-center.module.ts	Makes NgModule a compatibility wrapper (drops redundant providers).
packages/components/notification-center/notification-center.html	Installs focus trap wrapper + live region, improves tracking keys and delete wiring.
packages/components/notification-center/notification-center-animations.ts	Removes unused animations file/export.
packages/components/notification-center/e2e.ts	Adds richer notification-center e2e fixtures including overlay-triggered scenario.
packages/components/notification-center/e2e.playwright-spec.ts	Adds Playwright assertions for new states + keyboard/focus behaviors.
packages/components/notification-center/_notification-center-theme.scss	Switches theme styling to tokenized variables.
packages/components/core/locales/types.ts	Adds unread string to notification-center locale configuration type.
packages/components/core/locales/en-US.ts	Adds unread locale string.
packages/components/core/locales/es-LA.ts	Adds unread locale string.
packages/components/core/locales/pt-BR.ts	Adds unread locale string.
packages/components/core/locales/ru-RU.ts	Adds unread locale string.
packages/components/core/locales/tk-TM.ts	Adds unread locale string.
packages/components/core/common-behaviors/read-state.ts	Extends dwell tracking to keyboard focus and refactors handlers/timestamp semantics.
packages/components/core/common-behaviors/read-state.spec.ts	Adds unit tests for new dwell behavior across pointer and focus.
packages/components-dev/ssr/config.ts	Ensures root-provided DateAdapter/formatters for SSR prerender stability.
docs/guides/migration.ru.md	Documents notification-center + read-state migration implications.
docs/guides/migration.en.md	Same documentation updates in English.

Review details

• Files reviewed: 48/50 changed files
• Comments generated: 3
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.