ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-should-render-to-parent

Popups and dropdown menus render to portals by default. This puts their content outside of the standard DOM order which creates accessibility issues for users.

Examples

This rule will indicate user with a recommendation to use the shouldRenderToParent prop set to true.

Incorrect

import Popup from '@atlaskit/popup';
import { DropdownMenu } from '@atlaskit/dropdown-menu';
import { DropdownTrigger } from '@atlassian/entry-points/dropdown-trigger';
import { PopupTrigger } from '@atlassian/entry-points/popup-trigger';

<Popup>
 ^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.
  Popup content
</Popup>

<DropdownMenu>
 ^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.
  Dropdown content
</DropdownMenu>

<DropdownTrigger>
 ^^^^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.
  Dropdown content
</DropdownTrigger>

<PopupTrigger>
 ^^^^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.
  Popup content
</PopupTrigger>

<Popup shouldRenderToParent={false}>
       ^^^^^^^^^^^^^^^^^^^^ Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.
  Popup content
</Popup>

Correct

import Popup from '@atlaskit/popup';
import { DropdownMenu } from '@atlaskit/dropdown-menu';
import { DropdownTrigger } from '@atlassian/entry-points/dropdown-trigger';
import { PopupTrigger } from '@atlassian/entry-points/popup-trigger';

<Popup shouldRenderToParent>
  Popup content
</Popup>

<DropdownMenu shouldRenderToParent>
  Dropdown content
</DropdownMenu>

<DropdownTrigger shouldRenderToParent>
  Dropdown content
</DropdownTrigger>

<PopupTrigger shouldRenderToParent>
  Popup content
</PopupTrigger>

Was this page helpful?

We use this feedback to improve our documentation.