Overflow-menu: Content is not within a landmark element

[gptt916]

Environment

Operating system

mac

Browser

Chrome

Automated testing tool and ruleset

Assistive technology used to verify

Detailed description

What version of the Carbon Design System are you using?

x.23.2

What did you expect to happen?

Should pass accessibility

What happened instead?

Failed on landmark rule

What WCAG 2.1 checkpoint does the issue violate?

Steps to reproduce the issue

1. Page location: https://dev.console.test.cloud.ibm.com/docs/openshift?topic=openshift-openshift_cloud_paks#oc_cloud_pak_ov
   Click the Overflow menu button.
2. Run accessibility checker

Additional information

The checker is failing on the span and the two button elements in this screenshot:

[jenschlot]

Any status on when this issue might be resolved?

[emyarod]

I'm unable to reproduce the issue with our latest floating menu code

[gptt916]

What's the logic for the component determining where to insert the floating menu? It looks like for Docs it's incorrectly inserting it into instead of where the button is actually rendered in the dom structure.

In the above screenshot, the overflow menu button is within the landmark, however when clicking it, the floating menu is rendered at the bottom in

[emyarod]

the floating menu is created using React portals, and if no target node is supplied then it's attached to document.body https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/internal/FloatingMenu.js#L455

[gptt916]

I see in the source there is this snippet for getTarget that is passed to FloatingMenu:

https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/components/OverflowMenu/OverflowMenu.js#L435

  /**
   * @returns {Element} The DOM element where the floating menu is placed in.
   */
  _getTarget = () => {
    const { current: triggerEl } = this._triggerRef;
    return (
      (triggerEl && triggerEl.closest('[data-floating-menu-container]')) ||
      document.body
    );
  };

Does this mean I need to put data-floating-menu-container attribute on the containing body?

[tw15egan]

@gptt916 Yes, I believe adding data-floating-menu-container to the container should solve the issue

[gptt916]

Doesn't look this this is documented on the component page, could this be added somewhere?

[tw15egan]

@gptt916 it looks like we only got about halfway through updating the docs on our components, I'll take some time today to update the OverflowMenu docs page and be sure to include a section on data-floating-menu-container