[MWPW-148000] [ANALYTICS] Add analytics to Modals (#3130)

* Initial checkin. Working state.

* PR updates

* Reverting NaN check.

* Update isNan to isInteger

* Import fix.

* Remove duplicate call.

* Remove blank line.

* Update libs/blocks/modal/modal.js

---------

Co-authored-by: Vivian A Goodrich <101133187+vgoodric@users.noreply.github.com>

libs/blocks/modal/modal.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable import/no-cycle */
 import { createTag, getMetadata, localizeLink, loadStyle, getConfig } from '../../utils/utils.js';
+import { decorateSectionAnalytics } from '../../martech/attributes.js';
 
 const FOCUSABLES = 'a:not(.hide-video), button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]';
 const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
@@ -179,7 +180,7 @@ export async function getModal(details, custom) {
       closeModal(dialog);
     }
   });
-
+  decorateSectionAnalytics(dialog, `${id}-modal`, getConfig());
   dialog.append(close);
   document.body.append(dialog);
   dialogLoadingSet.delete(id);

libs/martech/attributes.js

@@ -82,8 +82,9 @@ export function decorateDefaultLinkAnalytics(block, config) {
 }
 
 export async function decorateSectionAnalytics(section, idx, config) {
+  const id = Number.isInteger(idx) ? `s${idx + 1}` : idx;
   document.querySelector('main')?.setAttribute('daa-im', 'true');
-  section.setAttribute('daa-lh', `s${idx + 1}`);
+  section.setAttribute('daa-lh', id);
   section.querySelectorAll('[data-block] [data-block]').forEach((block) => {
     block.removeAttribute('data-block');
   });

test/blocks/modals/modals.test.js

@@ -109,7 +109,12 @@ describe('Modals', () => {
     window.location.hash = '#milo';
     await waitForElement('#milo');
     init(document.getElementById('milo-modal-link'));
-    expect(document.getElementById('milo')).to.exist;
+    const modal = document.getElementById('milo');
+    expect(modal).to.exist;
+    expect(modal.getAttribute('daa-lh')).to.equal('milo-modal');
+    const buttons = modal.querySelectorAll('button');
+    expect(buttons[0].getAttribute('daa-ll')).to.equal('Milo Button 1-1--Milo');
+    expect(buttons[1].getAttribute('daa-ll')).to.equal('Milo Button 2-2--Milo');
     window.location.hash = '';
     await waitForRemoval('#milo');
     expect(document.getElementById('milo')).not.to.exist;