Balancing screen-reader announcements and visual stacking in MatSnackBar

Answer Summary

The default MatSnackBar implementation already uses an ARIA live region (role="status" or role="alert") that announces the message when the snackbar appears. No additional panelClass or data configuration is required, and those properties do not influence screen‑reader behavior. The key is to avoid overriding the default template or ARIA attributes.

Why the Default Works

• MatSnackBar creates a MatSnackBarContainer element that is automatically appended to the document body. • The container is given role="status" with aria-live="polite" (or role="alert" for high‑priority messages). • Because the container is added to the DOM and not focused, keyboard focus stays on the element that triggered the snackbar.

What panelClass and data Do

• panelClass is purely a CSS class hook for styling the snackbar container.
• data passes arbitrary data to a custom snackbar component but does not modify ARIA attributes or focus behavior.
• Neither property can be used to force a live‑region announcement.

Practical Steps to Ensure Announcements

1. Use the standard MatSnackBar.open(message, action?, config?) call without custom templates.
2. If you need a custom component, keep the default MatSnackBarContainer and add role="status" aria-live="polite" to the root element of your component.
3. Do not set focusOnOpen or manipulate tabindex on the snackbar container, as that would shift focus.
4. Verify that the container’s ARIA attributes exist by inspecting the DOM after the snackbar appears.

Diagnostic Check

// In Chrome DevTools console after snackbar opens
const container = document.querySelector('.mat-snack-bar-container');
console.log(container.getAttribute('role')); // should be "status" or "alert"
console.log(container.getAttribute('aria-live')); // should be "polite"

Test with a screen reader (NVDA, VoiceOver, JAWS) to confirm the message is spoken without the focus ring moving.

What to Ask for Clarification

If you observe that announcements are missing, please let me know which screen reader and browser combination you are using. That detail can influence the exact ARIA live level that is honored.

Additional Notes

• Rapid successive open() calls may cause the screen reader to merge or skip earlier messages depending on its politeness handling. If you need each message announced, consider adding a small delay between openings or using role="alert" for critical notifications.
• Custom HTML inside the snackbar can override the default ARIA attributes if you replace the container’s root element. In that case, manually add role="status" aria-live="polite" to your root.