storybook-addon-poleaxe

Storybook Poleaxe

a11y axe 🪓 on a stick

Idea

Inspired by HTML-tree

Provides:

• 👁 highlighting for Headings on the page, helping to understand their placement
• 🌳 tree view of a page structure, creating a capability to "see" your page as a glossary

Installation

// .storybook/main.js
module.exports = {
addons: [require.resolve('storybook-addon-poleaxe/preset')],
};

Configuration

You can enable or disable highlighting by default for a specific story via story parameters

HighlightedByDefault.parameters = {
  poleaxe: {
    highlighter: true,
  }
}

You can also control the behavior of MutationObserver

StaticStory.parameters = {
  poleaxe: {
    mutationObserver: true | false, // enabled of disabled for all
    mutationObserver: 'highlighter' | 'panel', // enabled only for some pieces
  }
}

See also

• HeadingsMap Chrome addon
• HTML tree

License

MIT