ESLint plugin

The essential plugin for use with the Atlassian Design System.

use-heading-level-in-section-message

The SectionMessage component in @atlaskit/section-message, when used with a title prop, needs to be the correct level within the document flow. This is not something that can be automated and requires contextual knowledge of what is present in the experience.

For more information on proper heading flow, consider this W3C document on heading hierarchy, (opens new window).

Examples

Incorrect

import Heading from '@atlaskit/heading';
import { Text } from '@atlaskit/primitives/compiled';
import SectionMessage from '@atlaskit/section-message';

<Heading as="h1">Jira</Heading>
<SectionMessage title="Editing is restricted">
 ^^^^^^^^^^^^^^ Heading level is not explicitly set.
    <Text as="p">You must be an administrator to edit this content.</Text>
</SectionMessage>

Correct

import Heading from '@atlaskit/heading';
import { Text } from '@atlaskit/primitives/compiled';
import SectionMessage from '@atlaskit/section-message';

<Heading as="h1">Jira</Heading>
<SectionMessage title="Editing is restricted" headingLevel="h2">
    <Text as="p">You must be an administrator to edit this content.</Text>
</SectionMessage>

Was this page helpful?

We use this feedback to improve our documentation.