Toast - cannot compute accessible name during entrance animation sequence

[Parsium]

Description

An axe warning is triggered during the entrance animation of the Toast component: "All page content should be contained by landmarks".

The warning occurs because the outer div[data-role='toast-wrapper'] attempts to compute its accessible name from the text of the referenced elements, which have not yet been rendered during the animation. This causes accessibility tools to flag the issue as the required content is missing on the page temporarily.

Example markup during the middle of the entrance animation sequence:

<div
  data-role="toast-wrapper"
  role="region"
  <!--👇 these referenced elements don't exist yet  -->
  aria-labelledby="ecc926f3-6d0f-0e8d-6ea8-101f8963e781 a69e8c1c-72ba-11f5-8d06-a825876cff01" 
  class="sc-cBrjTV bQtboq"
>
  <div>
    <div class="sc-jGxEUC cYDZmN toast-enter" data-component="toast" id="toast-default">
        <!-- The referenced elements will be rendered here once entrance animation is finished -->
    </div>
  </div>
</div>

Reproduction

https://carbon.sage.com/iframe.html?args=&id=toast--default&viewMode=story

Steps to reproduce

1. Open linked Toast story
2. Toggle toast preview to be on
3. Run axe during the middle of entrance animation - observe warning

JIRA ticket numbers (Sage only)

No response

Suggested solution

Avoid setting aria-labelledby to the inner content when it isn't visible

Carbon version

142.5.0

Design tokens version

No response

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[nicktitchmarsh]

FE-6791

[carbonci]

🎉 This issue has been resolved in version 142.11.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀