This probably happens because ActionPopover appends div with the menu to body. So the menu and its items are not within landmarks.
To Reproduce
Click the menu button
Run Axe Tools (ensure best practice is switched on for Axe)
Observe the following error: "All page content should be contained by landmarks" (Axe Tools show errors for the entire page in the sandbox. So you need to click arrows in Axe Tools to get to the div which wraps ActionPopover )
NOTE: This accessibility issue occurs even if ActionPopover is within main or some other landmark. That's because the action popover menu is always in the div which is appended to body.
not to render the action popover menu in body(maybe add some prop for that)
use role="region" and appropriate aria-label for the div which wraps the action popover menu (not sure if it's a good solution though)
Carbon Version
120.6.1
Design Tokens Version
4.25.0
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
Axe Tools may not show this error if there are other accessibility issues. So if you are trying to reproduce this issue in some other place (not CodeSandbox) and can't reproduce it, try fixing other accessibility issues.
Confidentiality
[X] I confirm there is no confidential or commercially sensitive information included.
Parsium
commented
11 months ago
Current behaviour
ActionPopovercauses the following accessibility issue: "All page content should be contained by landmarks". More info about the issue: https://dequeuniversity.com/rules/axe/4.8/region?application=AxeChromeThis probably happens because
ActionPopoverappendsdivwith the menu tobody. So the menu and its items are not within landmarks.To Reproduce
divwhich wrapsActionPopover)NOTE: This accessibility issue occurs even if
ActionPopoveris withinmainor some other landmark. That's because the action popover menu is always in thedivwhich is appended tobody.https://github.com/Sage/carbon/assets/148762678/d2b8f4ed-2168-4103-9853-ab2082e5d760
Expected behaviour
No Axe issue "All page content should be contained by landmarks" for
ActionPopoverCodeSandbox or Storybook URL
https://codesandbox.io/s/compassionate-currying-xqh4vy?file=/src/App.js:175-603
JIRA Ticket (Sage Only)
SBS-74832
Suggested Solution
Possible solutions:
body(maybe add some prop for that)role="region"and appropriate aria-label for thedivwhich wraps the action popover menu (not sure if it's a good solution though)Carbon Version
120.6.1
Design Tokens Version
4.25.0
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
Axe Tools may not show this error if there are other accessibility issues. So if you are trying to reproduce this issue in some other place (not CodeSandbox) and can't reproduce it, try fixing other accessibility issues.
Confidentiality