feat(newspack-ui): standardize snackbars + accessible notices

[thomasguillot]

What

First of two PRs for the snackbar audit (DSGNEWS-185). Scoped to the newspack-ui / my-account (front-end) snackbar and notices. The wp-admin snackbar standardization (WizardSnackbar, advertising wizard, story-budget) is a separate follow-up PR.

Layout

• Single position. Collapsed the four newspack-ui__snackbar position variants into one: top-right, 24px inset (spacer-5), slide in from the right. The other three variants were dead code.
• Admin-bar aware via CSS variable. top now uses var(--wp-admin--admin-bar--height, 0px), which WordPress sets responsively, so the breakpoint overrides are gone and it falls back to 0 on the public front end.
• Grid item layout. Each __snackbar__item is a CSS grid (icon | content | close, the icon and close columns added only when present via :has()). The icon pins to the top, the content wraps, and the close button is vertically centered.
• Content-sized, no width jump. Each item sizes to its own content and is right-aligned, capped at --newspack-ui-width-s (410px). A short snackbar no longer resizes when a longer one appears.
• Graceful reflow. On dismiss an item slides out at full height, then its slot collapses, so the items below animate up instead of jumping. Inactive and reused notices (e.g. openNotice(el, false)) collapse to zero height too, so they reserve no space in the stack.

Motion

• Removed the animated countdown bar (__content::after).
• Slide only (no opacity fade), since the item travels fully off-screen.
• prefers-reduced-motion: reduce disables the animation entirely.

Buttons

• New newspack-ui__button--ghost-dark variant for ghost buttons on dark surfaces (text neutral-0, hover neutral-80, light focus ring).
• The snackbar close button now uses the button system (--icon --ghost-dark), so hover, focus-visible, and transitions come for free. It is 36px, vertically centered, with a 4px right inset.

Error icon

• Error-type snackbars automatically render the newspack-ui__svg-icon--error icon in the icon column, on both the PHP (print_notices) and JS (createNotice) paths.

Tokens

• Renamed the modal-coupled width tokens to generic ones: --newspack-ui-width-{xs,s,m,l} (was --newspack-ui-modal-width-*, plus a new xs of 300px). All consumers (modals, woo overrides, my-account, newspack-theme) were updated; no aliases remain.

Accessibility

Notices previously had no ARIA, so screen readers never announced them. Now:

• type drives the announcement politeness and the error icon (no color returns): error is assertive, everything else is polite.
• Snackbars announce via two persistent, visually-hidden live regions (role="status"/aria-live="polite" and role="alert"/aria-live="assertive") created inside .newspack-ui. openNotice() writes the message into the matching region, so both on-load notices (e.g. my-account messages after a redirect) and dynamic ones (group actions, copy-link) are announced reliably. On-load activation is deferred a tick so the regions are registered before content is injected.
• Inline newspack-ui__notice markup carries role="alert" (--error) / role="status" (else).

API

• Newspack_UI::add_notice() / createNotice() carry type (default success); the string shorthand add_notice( $msg, 'error' ) is still supported. corner was removed (single position). Notices are stored flat and rendered in one container.
• Error call sites pass error so they announce assertively and show the error icon; login_needed stays polite (it is a call to action, not an error).

Demo

• The ?ui-demo Notices section has the snackbar triggers in a horizontal stack, a "Show persistent snackbar" example (icon + dismissible close), and "Show snackbar" now uses createNotice so it demonstrates the full auto-hide and reflow.

Verification

• lint:scss / lint:js / phpcs clean for changed files; built and confirmed in the enqueued dist/.
• Verified on the live ?ui-demo and my-account: single and stacked snackbars, content sizing, graceful reflow, 36px centered ghost-dark close, error icon, and the admin-bar offset.

[adekbadek]

Solid, well-scoped refactor with a genuine accessibility win and no security or correctness blockers — the localized SVG innerHTML sink takes only static plugin-owned input, and the token rename is complete across the monorepo.

Notes on code outside this PR’s changed lines (can’t be posted inline, so collected here):

• plugins/newspack-newsletters/includes/class-newspack-newsletters-subscription.php:1359 — Nit: Sibling-plugin caller still passes removed corner key — A caller outside this PR's diff still passes 'corner' => 'top-right' to Newspack_UI::add_notice(). It's harmless now — wp_parse_args drops the unknown key, no fatal, which confirms removing corner is safe platform-wide — but it's dead config in a sibling plugin, and a reader of that file will assume corner still does something. Either clean it up in this monorepo branch or leave a note.
• plugins/newspack-plugin/includes/class-newspack-ui.php:141 — Nit: nopriv dismiss AJAX — keep the handler contract side-effect-safe — newspack_ui_notice_dismissed is registered for nopriv and fires the public do_action( 'newspack_ui_notice_dismissed', $id ) with an attacker-supplied (but sanitized) id after nonce verification. The one current handler (WooCommerce_Update_Payment_Notice::handle_notice_dismissed) writes update_user_meta( wp_get_current_user()->ID … ), which no-ops for logged-out user 0 — so no impact today. The contract to uphold is that every newspack_ui_notice_dismissed handler stays side-effect-safe for arbitrary ids and anonymous callers; consider dropping the nopriv registration if no anonymous notice actually needs server-side dismissal persistence.

[thomasguillot]

Thanks for the thorough pass, @adekbadek — all addressed in d5e16977, with replies inline. The two out-of-diff notes:

• Removed the dead corner => top-right in newspack-newsletters.
• Kept nopriv on the dismiss handler — no registered handler persists anything for anonymous (user 0) callers, so the side-effect-safe contract holds.

Re-requesting your review.

[Copilot]

Pull request overview

Standardizes Newspack UI snackbars/notices (primarily front-end / my-account) with a single snackbar position/layout, updated design tokens, and improved accessibility via ARIA roles + live-region announcements.

Changes:

• Unifies snackbar markup/styles and removes per-corner variants; adds grid-based snackbar item layout and new ghost-dark button variant.
• Adds screen-reader announcements for snackbars (JS live regions) and assigns appropriate role values to inline notices.
• Renames width tokens to --newspack-ui-width-* and updates consumers accordingly.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
themes/newspack-theme/newspack-theme/sass/plugins/republication-tracker-tool.scss	Switches modal-width token usage to the new generic width token.
plugins/newspack-plugin/src/newspack-ui/scss/variables/_index.scss	Introduces --newspack-ui-width-* tokens (and deprecated aliases).
plugins/newspack-plugin/src/newspack-ui/scss/elements/woocommerce/_overrides.scss	Updates WooCommerce overrides to use new width token names.
plugins/newspack-plugin/src/newspack-ui/scss/elements/forms/_buttons.scss	Adds newspack-ui__button--ghost-dark and demo horizontal-stack spacing tweak.
plugins/newspack-plugin/src/newspack-ui/scss/elements/_notices.scss	Reworks snackbar container/item styling (single position, grid layout, motion/reflow behavior).
plugins/newspack-plugin/src/newspack-ui/scss/_modals.scss	Updates modal sizing to use --newspack-ui-width-* tokens.
plugins/newspack-plugin/src/newspack-ui/js/notices.js	Adds live-region announcements and updates snackbar creation/activation behavior.
plugins/newspack-plugin/src/newspack-ui/js/modals.js	Adds role="alert" to injected error notices in modals.
plugins/newspack-plugin/src/my-account/v1/global.js	Uses default createNotice() type (success) without passing an explicit type.
plugins/newspack-plugin/includes/reader-activation/class-my-account.php	Removes corner usage and updates inline CSS to new width tokens.
plugins/newspack-plugin/includes/plugins/woocommerce/my-account/templates/v1/notices/success.php	Removes now-unused notice args (type, corner) in success template.
plugins/newspack-plugin/includes/plugins/woocommerce/my-account/templates/v1/notices/notice.php	Removes corner from warning notice args.
plugins/newspack-plugin/includes/plugins/woocommerce/my-account/templates/v1/notices/error.php	Removes corner from error notice args.
plugins/newspack-plugin/includes/plugins/woocommerce/my-account/templates/v1/group-subscription-members.php	Adds role="status" to an informational inline notice.
plugins/newspack-plugin/includes/plugins/woocommerce/my-account/class-my-account-ui-v1.php	Removes explicit notice type/corner args for delete-account notice.
plugins/newspack-plugin/includes/plugins/woocommerce/class-woocommerce-update-payment-notice.php	Removes explicit notice type/corner args.
plugins/newspack-plugin/includes/plugins/woocommerce-subscriptions/group-subscription/class-group-subscription-invite.php	Simplifies invite-message mapping and aligns notice type behavior with new announcement rules.
plugins/newspack-plugin/includes/content-gate/class-ip-access-rule.php	Adjusts notice severity type for the IP access rule result message(s).
plugins/newspack-plugin/includes/class-newspack-ui.php	Flattens notice storage/printing, adds type icons, demo updates, and roles for inline notices.
plugins/newspack-plugin/includes/class-newspack-ui-icons.php	Adds a new “caution” SVG icon for warning notices.
plugins/newspack-newsletters/includes/class-newspack-newsletters-subscription.php	Removes corner usage when adding account notices.

[adekbadek]

Re-reviewed on 44b835e and verified against the ?ui-demo page in a local env: every thread addressed, with two going beyond the ask (per-type border/icon cues for warning/error; server-side wp_kses on the localized icons). The two declined nits (token alias, width-xs) are reasonable calls. LGTM.

[github-actions]

Hey @thomasguillot, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️