ADA | Axe Issue: Pop-up Menu Not Contained by Landmarks

[kalyanighodake]

Latest version

• I have tested the latest version

Description

When opening the menu pop-up using the Salt component, the Axe accessibility tool reports an error: "All page content should be contained by landmarks." This issue occurs because the menu dropdown is rendered in a data-floating-ui-portal outside the

element, which may cause it to be perceived as not being part of the structured content of the page.

Steps to reproduce

1. Navigate to the page containing the Salt component with the menu pop-up.
2. Trigger the menu pop-up to open.
3. Run the Axe accessibility tool to analyze the page.
4. Observe the reported issue regarding content not being contained by landmarks.

Expected behavior

All page content, including dynamically rendered elements like pop-up menus, should be logically associated with a landmark region to ensure accessibility compliance.

Package name(s)

Core (@salt-ds/core)

Package version(s)

"@salt-ds/core": "^1.37.0"

Browser

• Chrome
• Safari
• Firefox
• Microsoft Edge

Operating system

• macOS
• Windows
• Linux
• iOS
• Android

Are you a JPMorgan Chase & Co. employee?

• I am an employee of JPMorgan Chase & Co.

[joshwooding]

At first I wasn't able to reproduce this, I had to enable "Best practices" when scanning. Is this actually something that is classed as an accessibility failure? This caused by a technique called portaling which we use quite heavily to ensure that overlays are always shown on top of content

[jake-costa]

@kalyanighodake
Thank you for highlighting this issue! The challenge with the Axe accessibility tool's report is indeed related to our use of portaling, like Josh mentioned. We use this technique to ensure overlays, like our menu pop-ups, are always displayed correctly above other content.

In this specific case, the use of portaling is considered an accessibility exception, similar to how modal dialogs and some ARIA live regions are handled. These elements are intentionally placed outside their invoking elements in the DOM to function properly. Our commitment to accessibility involves using a variety of best practices methods and thoroughly testing our solutions across multiple assistive technology and browser setups. However, if you experience any issues using assistive technology, please don't hesitate to let us know.

I see that you are an employee of JPMorgan Chase & Co., so I recommend taking a look at our DAKB 1.3.1-09 for more detailed information on how we handle these scenarios.

That said, we will still review this setup to see if there are further improvements we can make to enhance accessibility without compromising functionality.

Thanks again for your valuable feedback. We appreciate your help in making our components better!