diff --git a/libs/blocks/footer/footer.js b/libs/blocks/footer/footer.js
index 2936209bee..feb8ac1d6f 100644
--- a/libs/blocks/footer/footer.js
+++ b/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);
diff --git a/test/blocks/footer/footer.test.js b/test/blocks/footer/footer.test.js
index 957eebbcf5..e2f426e096 100644
--- a/test/blocks/footer/footer.test.js
+++ b/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 = '';
+ 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;
+ });
+ });
});
diff --git a/test/blocks/footer/mocks/region-selector.html b/test/blocks/footer/mocks/region-selector.html
new file mode 100644
index 0000000000..06bd471268
--- /dev/null
+++ b/test/blocks/footer/mocks/region-selector.html
@@ -0,0 +1,78 @@
+
+
+
About Experience Cloud
+
+
+
+
+