ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-drawer-label

Drawer should have an accessible name or a reference to it, so that upon opening, users of assistive technologies could have contextual information of interaction with current element.

Examples

This rule will indicate user with warning to strongly recommend usage of either label or titleId prop.

Incorrect

<Drawer>
 ^^^^^^ Missing either `label` or `titleId` prop.
  Drawer content
</Drawer>

<Drawer label>
        ^^^^^ `label` prop is missing value.
  Drawer content
</Drawer>

<Drawer label="">
        ^^^^^ `label` prop is missing accessible name value.
  Drawer content
</Drawer>

<Drawer titleId>
        ^^^^^^^ `titleId` prop is missing reference value.
  <h1 id="drawer-title">Drawer content title</h1>
</Drawer>

<Drawer titleId="">
        ^^^^^^^ `titleId` prop is missing reference value.
  <h1 id="drawer-title">Drawer content title</h1>
</Drawer>

<Drawer titleId="drawer-title" label="">
        ^^^^^^^                ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.
  <h1 id="drawer-title">Drawer content title</h1>
</Drawer>

Correct

<Drawer label="Drawer content title">
  Drawer content
</Drawer>

<Drawer titleId="drawer-title">
  <h1 id="drawer-title">Drawer content title</h1>
</Drawer>

Was this page helpful?

We use this feedback to improve our documentation.