Sage / carbon

Carbon by Sage | ReactJS UI Component Library
https://carbon.sage.com
Apache License 2.0
273 stars 86 forks source link

Notice Variant Toast gives Axe error on regions #6729

Open PaulSumner-Sage opened 1 month ago

PaulSumner-Sage commented 1 month ago

Description

Axe report output:

Issue Description: Error: All page content should be contained by landmarks Ensures all page content is contained by landmarks -https://dequeuniversity.com/rules/axe/4.8/region?application=AxeChrome

Element Location: .Hlivg

To solve this issue, you need to…: Some page content is not contained by landmarks

Reproduction

https://carbon.sage.com/?path=/story/toast--notice

Steps to reproduce

No response

JIRA ticket numbers (Sage only)

SBS-95481

Suggested solution

No response

Carbon version

130.0.0

Design tokens version

No response

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

No response

Confidentiality

edleeks87 commented 1 month ago

@tempertemper can we just check whether this is a false positive caused by the use of Portals here?

edleeks87 commented 1 month ago

@tempertemper any thoughts on the above

Parsium commented 1 month ago

After discussing with @tempertemper, we noticed that Toast has no semantic meaning, just a <div> with text content.

Since Toast is designed for status announcements or alerts, adding a role of "status" or "alert" should address the semantic issue, which may also resolve the axe violation.

Parsium commented 1 month ago

FE-6655