Modal

deprecated in v2.11Refer to the Dialog component documentation.
Learn more

Overview

Usage

  • Contextual workflows or messaging
  • Focused tasks
  • Error messaging
  • Onboarding

Sample

Accessibility

Focus order

The Modal's focus will navigate content sequentially to preserve meaning and expected use in support of Success Criterion 2.4.3: Focus Order. For this reason the first element depicted visually in the Modal will receive keyboard focus, such as the component's close button (default).

Keyboard focus

It is strongly recommended to have focusable elements cycle through Modal where focusTrapDisabled is false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is open only the contents and focusable elements are accessible.

Keyboard navigation

KeyFunction
TabMoves focus to next focusable element. If the current focus is the last element and focusTrapDisabled is false, focus will cycle to the first element.
Tab and ShiftMoves focus to previous focusable element. If the current focus is the first element and focusTrapDisabled is false, focus will cycle to the last element.
EscIf escapeDisabled is false, closes the component.

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.