Package Exports

react-accessible-headings

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-accessible-headings) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-accessible-headings

The Problem

WCAG WAI says,

skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example.

However developers often hardcode specific heading levels into their components, limiting their flexibility.

By using react-accessible-headings you can have components with dynamic headings that fit the appropriate heading level, allowing you to more easily create accessible headings that don't skip levels.

This library is less than 1 kilobyte (minified and compressed).

Usage

import React from "react";
import { Level, H } from "react-accessible-headings";

export default function() {
  return (
    <div>
      <H>This will be a heading 1</H>
      <Level>
        <H>and this a Heading 2</H>
        <H>another Heading 2</H>
        <Level>
          <H>a Heading 3</H>
        </Level>
        <H>yet another Heading 2</H>
      </Level>
    </div>
  );
}

Usage with `offset`

import React from "react";
import { Level, H } from "react-accessible-headings";

export default function() {
  return (
    <div>
      <H>This will be a heading 1</H>
      <Level>
        <H>This will be a heading 2</H>
        <H offset={1}>This will be a heading 3</H>
      </Level>
    </div>
  );
}

Exports

TypeScript is available.

`Level` component

Props: None except children.

This component doesn't render any HTML.

`H` component

Props: offset: (Optional) a number to offset the heading level. All other valid props for an heading are also accepted.

This component renders either <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>. An exception will be thrown if attempting to render invalid HTML such as <h7> or greater.

`LevelContext` context

If for some reason you'd like to inspect the current level value then useContext(LevelContext).

Limitations

While this library facilitates dynamic heading levels it doesn't detect skipped heading levels through incorrect usage such as,

<Level>
  <Level>
    <H>this will be a heading 3</H>
  </Level>
</Level>

or,

<H offset={2}>this will be a heading 3</H>

However testing in Axe will reveal such accessibility problems.

It's possible that in the future we may add this feature so please get in touch (by creating a Github issue) if you'd like to use this.

JSPM