Motion & Animation

focus-trap-patterns

Detect modals and drawers that don't establish a focus trap.

Flags overlay components (modal, dialog, drawer) that lack role="dialog", aria-modal, and the structural cues needed for a focus trap. Without them, keyboard users tab out of the modal into background content — silent but severe.

Behavior

• Fixable: Yes — auto-adds role and aria-modal.
• Suggestions: Yes.
• Maps to: WCAG 2.4.3 (Focus Order).

Examples

Bad:

<div className="fixed inset-0">...</div>

Good:

<div role="dialog" aria-modal="true" className="fixed inset-0">...</div>

Related rules

• focus-visible-styleBlock outline-none unless a replacement focus indicator is present.
• aria-validationForbid invalid ARIA roles and unknown aria-* attributes.
• prefers-reduced-motionRequire animations to respect prefers-reduced-motion.

Use it

Enable focus-trap-patterns in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/focus-trap-patterns': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules