CMS-Driven Accessible Modals (Run js before Accessible Modal Attribute)

Attributes
2

For anyone having this issue, here was the solution ie. Add the Attributes embed script after running your code to add incremented attribute values.

<script>
window.onload = function() {
  // Select the parent element
  let parent = document.querySelector('.team-list_list');
  
  // Select all the child elements
  let items = parent.querySelectorAll('.team-list_lightbox-item');
  
  // Iterate over each item
  items.forEach((item, index) => {
    // We increment the index because it starts from 0
    let counter = index + 1;

    // Find the specific child elements within each item where you want to apply the attributes
    let buttonElement = item.querySelector('.team-list_modal-2_button');
    let coverElement = item.querySelector('.team-list_modal-2_cover');
    let popupElement = item.querySelector('.team-list_modal-2_popup');
    let closeElement = item.querySelector('.team-list_modal-2_close');
    
    // Add the attribute to the target elements
    if (buttonElement) buttonElement.setAttribute('fs-modal-element', `open-${counter}`);
    if (coverElement) coverElement.setAttribute('fs-modal-element', `close-${counter}`);
    if (closeElement) closeElement.setAttribute('fs-modal-element', `modal-${counter}`);
    if (popupElement) popupElement.setAttribute('fs-modal-element', `close-${counter}`);
  });
  //[Finsweet Attributes] Modal 
  (()=>{var t="https://cdn.jsdelivr.net/npm/@finsweet/attributes-modal@1/modal.js",e=document.querySelector(`script[src="${t}"]`);e||(e=document.createElement("script"),e.async=!0,e.src=t,document.head.append(e));})();
}
</script>
1 Like