What the component handles
- Alternative text for the Close button
- Semantic hidden labels based on variants (success, error, etc.) for screen readers
What you need to provide
- headingLevel prop (h2, h3, etc.) for correct page structure
- For dynamic banners that appear after page load, use aria-live="polite" (or "assertive" for urgent errors)
Color contrast
- All texts, icons and interactive elements provided in the Banner component meet the relevant WCAG 2.1 AA color contrast ratio requirements.
- The Banner’s background is perceived as non-essential and therefore doesn’t need to meet the 3:1 color contrast ratio with the adjacent colors (page background).