1.2.3
There are two variations Dynamic Lightbox component:
Configuration for dynamic data is the same as pulling any post within Breakdance. We’ll have Post loop element inside page or template and adjust query to our needs.
In modal code you will find div named Global code block. You’ll need to go:
By default you will need to pass post url which should be opened in iframe within modal.
You need to:
Check video how to set it up:
All elements that have related a11y attributes have a11y in name so they are easier to find and tweak exactly to own need.
The process of designing a modal component entails various considerations. One of these considerations is ensuring proper focus management. Focus trapping is a technique that plays a vital role in this process.
When a modal is open, we keep track about focus-able items that are the part of modal such as buttons, links and form inputs. These items are part of webpage focus flow, and we need to isolate them because if our focus gets to the first or the last focus-able item it could get out of modal and focus invisible items under the modal.
Focus trap kicks here into the place by intercepting moving focus from the last item and gets cycle back to the first focus item inside modal, and vice versa.
When we open modal, we want user to be focused on the modal content and freeze document under the modal. There are some problems because we don’t have right now all the needed tool out-of-the-box to stop main document from scrolling. We could implement overscroll-behavior: contain; which will stop accidental scrolls propagating when scrolling modal to main document, but user could still scroll over backdrop element.
Scrolling main document while modal is open is bad UX because user could end up on other
| Role | Attribute | Element | Usage |
|---|---|---|---|
| dialog | div | Identifies the element that serves as the dialog container. | |
| aria-labelledby=”IDREF” | div | Gives the dialog an accessible name by referring to the element that provides the dialog title. | |
| aria-modal=”true” | div | Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert). | |
| button | tabindex=”0″ aria-pressed=”true” | div | Tells assistive technologies that div wrapper acts as button, uses tabindex=”0″ to be in natural focus flow and aria-pressed tells whenever related modal is open or not |
| Key | Function |
|---|---|
| Tab | – Moves focus to next focusable element inside the dialog. – When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog. |
| Shift + Tab | – Moves focus to previous focusable element inside the dialog. – When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog. |
| Escape | Closes the dialog. |
| Arrow Right | Opens next item in modal |
| Arrow Left | Opens previous item in modal |
If you want to teleport part of the card inside modal body you need to use attribute data-tepleport=”true”. This attribute should be present on div which is holding card content to be teleported and on div named Teleport here which tells where should we inject content.
We could configure animation with attribute on element named Dynamic Lightbox.
name: data-animation
values: none | scale | slide
