MWPW-132156: close (old) footer block modal when click outside (#2642)

* MWPW-132156: close (old) footer block modal when click outside

* UTs for footer region selection

libs/blocks/footer/footer.js

@@ -150,6 +150,12 @@ export class Footer {
         const ariaExpanded = regionButton.classList.contains('inline-dialog-active');
         regionButton.setAttribute('aria-expanded', ariaExpanded);
       });
+      document.addEventListener('click', (e) => {
+        if (regionButton.classList.contains('inline-dialog-active') && !e.target.closest('.footer-region')) {
+          regionButton.setAttribute('aria-expanded', false);
+          regionButton.classList.remove('inline-dialog-active');
+        }
+      });
     }
     regionButton.className = 'footer-region-button';
     regionButton.setAttribute('aria-haspopup', true);

test/blocks/footer/footer.test.js

@@ -1,5 +1,6 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
+import { setConfig } from '../../../libs/utils/utils.js';
 
 const { Footer } = await import('../../../libs/blocks/footer/footer.js');
 
@@ -57,4 +58,38 @@ describe('Footer', () => {
       expect(privacy.querySelector('p:nth-of-type(2)')).not.to.be.null;
     });
   });
+
+  describe('region selector', async () => {
+    let infoRow = null;
+
+    before(async () => {
+      const config = {
+        codeRoot: '/libs',
+        autoBlocks: [{ }],
+      };
+      setConfig(config);
+      const regionSelector = await readFile({ path: './mocks/region-selector.html' });
+      const parser = new DOMParser();
+      const regionSelectorDom = parser.parseFromString(regionSelector, 'text/html');
+      document.body.innerHTML = '<footer></footer>';
+      const footer = new Footer(regionSelectorDom.body, document.querySelector('footer'));
+      infoRow = await footer.createInfoRow();
+    });
+
+    it('expect region selector modal to be visible', () => {
+      expect(infoRow).not.to.be.null;
+      const button = infoRow.querySelector('.footer-region button');
+      button.click();
+      expect(button.getAttribute('aria-expanded')).to.equal('true');
+      expect(button.classList.contains('inline-dialog-active')).to.be.true;
+    });
+
+    it('expect region selector modal to be closed on clicking outside', () => {
+      expect(infoRow).not.to.be.null;
+      const button = infoRow.querySelector('.footer-region button');
+      document.body.click();
+      expect(button.getAttribute('aria-expanded')).to.equal('false');
+      expect(button.classList.contains('inline-dialog-active')).to.be.false;
+    });
+  });
 });

test/blocks/footer/mocks/region-selector.html

@@ -0,0 +1,78 @@
+<div>
+  <h2 id="contact-us">Contact Us</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/request-consultation/experience-cloud.html">Request a demo</a></li>
+    <li><a href="https://www.adobe.com/index.html">Adobe.com</a></li>
+  </ul>
+  <h2 id="why-adobe">Why Adobe</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/why-adobe/why-partner-with-us.html">Why partner with Adobe</a></li>
+    <li><a href="https://business.adobe.com/why-adobe/how-we-use-our-products.html">How we use our products</a></li>
+    <li><a href="https://business.adobe.com/customers/partners/main.html">Our partners</a></li>
+    <li><a href="https://business.adobe.com/resources/leader-in-experiences.html">Industry leadership</a></li>
+    <li><a href="https://www.adobe.com/creativecloud/business/enterprise.html">Creative Cloud for Enterprise</a></li>
+    <li><a href="https://www.adobe.com/documentcloud/business.html">Document Cloud for Business</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="about-experience-cloud">About Experience Cloud</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/products/adobe-experience-cloud-products.html">Explore all products</a></li>
+    <li><a href="https://business.adobe.com/products/experience-platform/adobe-experience-platform.html">Adobe Experience Platform</a></li>
+    <li><a href="https://business.adobe.com/products/analytics/adobe-analytics.html">Adobe Analytics</a></li>
+    <li><a href="https://business.adobe.com/products/experience-manager/sites/aem-sites.html">Adobe Experience Manager Sites (CMS)</a></li>
+    <li><a href="https://business.adobe.com/products/experience-manager/assets/aem-assets.html">Adobe Experience Manager Assets (DAM)</a></li>
+    <li><a href="https://business.adobe.com/products/marketo/adobe-marketo.html">Marketo Engage</a></li>
+    <li><a href="https://business.adobe.com/products/magento/magento-commerce.html">Adobe Commerce</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="our-solutions">Our solutions</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/solutions/data-insights-audiences.html">Data insights &#x26; audiences</a></li>
+    <li><a href="https://business.adobe.com/solutions/experience-management-platform.html">Experience management platform</a></li>
+    <li><a href="https://business.adobe.com/solutions/content-management.html">Content management</a></li>
+    <li><a href="https://business.adobe.com/solutions/commerce.html">Commerce</a></li>
+    <li><a href="https://business.adobe.com/solutions/customer-journeys.html">Customer journeys</a></li>
+    <li><a href="https://business.adobe.com/solutions/b2b-marketing.html">B2B marketing</a></li>
+    <li><a href="https://business.adobe.com/solutions/digital-enrollment-onboarding.html">Digital enrollment &#x26; onboarding</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="resources">Resources</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/resources/main.html">Resource center</a></li>
+    <li><a href="https://business.adobe.com/customer-success-stories/index.html">Customer success stories</a></li>
+    <li><a href="https://experienceleague.adobe.com/#home">Experience League (learn &#x26; support)</a></li>
+    <li><a href="https://experienceleaguecommunities.adobe.com/">Community forums</a></li>
+    <li><a href="https://business.adobe.com/glossary/index.html">Glossary</a></li>
+    <li><a href="https://www.adobe.io/apis/experiencecloud.html">Development resources</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="company">Company</h2>
+  <ul>
+    <li><a href="https://www.adobe.com/about-adobe.html">About Adobe</a></li>
+    <li><a href="https://www.adobe.com/careers.html">Careers</a></li>
+    <li><a href="https://news.adobe.com/">Newsroom</a></li>
+    <li><a href="https://www.adobe.com/corporate-responsibility.html">Corporate responsibility</a></li>
+    <li><a href="https://www.adobe.com/investor-relations.html">Investor relations</a></li>
+    <li><a href="https://www.adobe.com/corporate-responsibility/supply-chain.html">Supply chain</a></li>
+    <li><a href="https://www.adobe.com/trust.html">Trust center</a></li>
+    <li><a href="https://www.adobe.com/events.html">Events</a></li>
+    <li><a href="https://www.adobe.com/diversity.html">Diversity &#x26; inclusion</a></li>
+    <li><a href="https://www.adobe.com/about-adobe/integrity.html">Integrity</a></li>
+    <li><a href="https://www.adobe.com/covid-19-response.html">COVID-19</a></li>
+  </ul>
+</div>
+<div>
+  <div class="region-selector popup">
+    <div>
+      <div><a href="/fragments/regions">Change region</a></div>
+    </div>
+  </div>
+</div>
+<div>
+  <p><em>All rights reserved.</em> / <a href="https://www.adobe.com/privacy.html">Privacy</a> / <a href="https://www.adobe.com/legal/terms.html">Terms of Use</a> / <a href="https://www.adobe.com/#openPrivacy">Cookie preferences</a> / <a href="https://www.adobe.com/privacy/ca-rights.html">Do not sell my personal information</a> / <a href="https://www.adobe.com/privacy/opt-out.html#interest-based-ads">AdChoices</a></p>
+  <p>More copyright text</p>
+</div>