README.md

makeup-js

A suite of vanilla JavaScript modules for building accessible user interfaces.

All modules support import (i.e. ES Modules) and require (i.e. CommonJS) syntax. When using require on a default export, be sure to include .default. For example, const Switch = require('makeup-switch').default;.

Core Modules

The following modules assist with common accessibility logic (e.g. maintaining a roving tabindex).

• makeup-active-descendant
• makeup-exit-emitter
• makeup-expander
• makeup-focusables
• makeup-key-emitter
• makeup-keyboard-trap
• makeup-modal
• makeup-navigation-emitter
• makeup-next-id
• makeup-prevent-scroll-keys
• makeup-roving-tabindex
• makeup-screenreader-trap
• makeup-typeahead

Development

This project includes Claude Code skills for common development tasks. See .claude/skills/ for available commands:

• /refactor-module <module-name> — modernize a module to current JavaScript patterns
• /test-coverage <module-name> — audit unit test coverage and identify gaps
• /add-unit-tests <module-name> — write missing unit tests based on coverage gaps
• /revamp-demo <module-name> — rewrite a module's demo page with consistent style and on-page output

UI Modules

The following modules create the model and behaviour for "headless" user interface components (i.e. they come with no styles or branding out of the box). They are fully compatible with Skin CSS.

We are currently in the process of converting all eBay MIND Patterns "example quality" code to "reference level" vanilla JavaScript.

• makeup-alert-dialog
• makeup-combobox
• makeup-confirm-dialog
• makeup-dialog (abstract class)
• makeup-dialog-button
• makeup-drawer-dialog (non-responsive)
• makeup-floating-label
• makeup-fullscreen-dialog (non-responsive)
• makeup-input-dialog
• makeup-lightbox-dialog
• makeup-listbox
• makeup-listbox-button
• makeup-menu
• makeup-menu-button
• makeup-panel-dialog
• makeup-snackbar-dialog
• makeup-switch
• makeup-toast-dialog