[Accessibility] [Global] [Banner] Basic Usage> The 'info', 'success', 'warning', and 'danger/error' icons present at the beginning of corresponding banners are not identified by screen reader

[silvalaura]

A11Y-507

Environment: Windows 11/Chrome 137/JAWS 2025 Windows 11/Edge 136/NVDA 2025 Mac 15/Safari/VoiceOver

Steps to Reproduce:

1. Open the URL – https://react-magma.cengage.com/version/4.9.1/api/tooltip/
2. Turn on the screen reader (JAWS/NVDA/VoiceOver).
3. Navigate to the 'Banner' component page from the left navigation.
4. Locate the ‘Info’, ‘Success’, ‘Warning’, and ‘Danger/Error’ banner icons under 'Basic Usage' heading.
5. Use screen reader navigation to explore the banner messages and observe whether the icons preceding the messages are announced.

Actual Result: The icons representing the type of banner (info, success, warning, error) are not announced by screen reader. These icons are currently marked as decorative or lack accessible labels, which is only acceptable as long as the text message proceeding these icons represent the type of banner in text format, e.g.: "Warning! You must complete all fields"

Refer to screencast: https://app.screencast.com/IOV5HWl9zNyir

Note: This issue is reproducible for all of the similar banner (alert) messages.

Expected Result:

If the banner type (e.g., “Error”, “Warning”) is not conveyed through visible text, the icons must be programmatically exposed to screen readers with appropriate accessible names. If the type of banner is already conveyed through text, the icons should be marked as decorative using aria-hidden="true" or role="presentation".

User Impact: Screen reader users may not be aware of the banner type if the icon is the only visual indicator. This can result in confusion or missed context, especially for high-priority banner alerts like errors or warnings.

WCAG Guideline: 1.1.1 Non-text Content (A)

Bug Fix Recommendation:

a) If banner type is only conveyed through the icon, provide an accessible name using aria-label along with "img" role to the alert icons.

b) If the type is also conveyed in visible text (e.g., “Error: Your request failed”), then mark the icon as decorative using aria-hidden="true".