Modals

figma:ready
react:ready
scss:ready
freemarker:ready
vue:ready

Accessibility

The modal container (mc-modal) must always have a aria-labelledby attribute whose value corresponds to the value of the id attribute of the modal title.

On the opening the focus must be on the first focusable element inside the modal.

When modal is open, it should be closable using the esc key.

The modal title must always have an id attribute.

When modal is hidden, the mc-modal container must have a aria-hidden="true" attribute.

When modal is visible, the mc-modal container must have a aria-hidden="false" attribute.