Missing focus trap and ARIA attributes in Bulma Modal

Recommended pattern for Bulma v0.9.x modals

Bulma is CSS-only. The is-active class controls visibility only. A minimal, dependency-free pattern is: on open, add ARIA attributes and aria-hidden to the rest of the page, move focus into the dialog and trap Tab/Shift+Tab inside it; on close, remove the attributes, restore focus to the trigger, and re-enable background interaction. ESC removes is-active and runs the same close routine.

Confirmed facts

• Bulma provides markup and .modal.is-active styling only. No JavaScript, focus management, or ARIA is shipped.
• WAI-ARIA Dialog Pattern requires role="dialog", aria-modal="true" on the dialog container and aria-labelledby pointing to the dialog title when open.
• Focus must be moved into the modal on open and restored to the trigger on close. Keyboard dismissal via Escape is expected.

Likely explanation for the gaps you see

With only CSS toggling, focus is never moved, the background remains reachable by Tab, and screen readers are not told the page is modal. These are developer responsibilities in Bulma.

Steps for this case

1. Markup baseline. Keep Bulma structure and add stable IDs for labeling.

<div class="modal" id="myModal" role="dialog" aria-modal="true" aria-labelledby="myModalTitle" aria-hidden="true">
  <div class="modal-background"></div>
  <div class="modal-content">
    <h2 id="myModalTitle">Title</h2>
    <button class="modal-close" aria-label="close"></button>
  </div>
</div>

2. Open handler. Store trigger, toggle is-active, update ARIA, hide background, move focus.

function openModal(modal, trigger) {
  lastTrigger = trigger;
  modal.classList.add('is-active');
  modal.removeAttribute('aria-hidden');
  document.getElementById('app').setAttribute('aria-hidden','true');
  const first = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  first?.focus();
}

3. Close handler. Remove is-active, restore ARIA, return focus.

function closeModal(modal) {
  modal.classList.remove('is-active');
  modal.setAttribute('aria-hidden','true');
  document.getElementById('app').removeAttribute('aria-hidden');
  lastTrigger?.focus();
}

4. Focus trap. On keydown inside the open modal, loop Tab between first and last focusable elements.

modal.addEventListener('keydown', e => {
  if (e.key !== 'Tab') return;
  const focusables = [...modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')];
  if (!focusables.length) return;
  const first = focusables[0], last = focusables.at(-1);
  if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
  else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
});

5. Keyboard dismissal. Global Escape listener removes is-active when modal is open.

document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && modal.classList.contains('is-active')) closeModal(modal);
});

Verification

• With is-active applied, role="dialog" and aria-modal="true" are present and background has aria-hidden="true".
• Tab cycles only within modal controls.
• Escape closes modal and focus returns to the original trigger.

Uncertainty note: If your modal markup is injected dynamically after page load, the selectors and event binding should be delegated to the container that persists. Confirm whether you need to support multiple simultaneous modals; that changes the aria-hidden handling and focus stack.