diff --git a/libs/features/webapp-prompt/webapp-prompt.css b/libs/features/webapp-prompt/webapp-prompt.css index df2af2dbea..28fe2c37e7 100644 --- a/libs/features/webapp-prompt/webapp-prompt.css +++ b/libs/features/webapp-prompt/webapp-prompt.css @@ -1,5 +1,7 @@ /* Hide banner if user shrinks to mobile after being displayed */ .appPrompt { + --pep-background-prompt: #ffffff; + --pep-background-progress: #e9e9e9; display: none; } @@ -14,7 +16,7 @@ flex-direction: column; row-gap: 16px; border-radius: 16px; - background: #fff; + background: var(--pep-background-prompt); overflow: hidden; } @@ -133,6 +135,12 @@ content: '\2715'; } + .appPrompt-close:focus { + background-color: var(--pep-background-progress); + border-radius: 50%; + border: 3px solid var(--pep-background-prompt); + } + [dir = "rtl"] .appPrompt-close { right: unset; left: 12px; @@ -144,7 +152,7 @@ left: 0; right: 0; height: 12px; - background-color: #e9e9e9; + background-color: var(--pep-background-progress); } .appPrompt-progress { diff --git a/libs/features/webapp-prompt/webapp-prompt.js b/libs/features/webapp-prompt/webapp-prompt.js index bff11c8e41..e56971ea13 100644 --- a/libs/features/webapp-prompt/webapp-prompt.js +++ b/libs/features/webapp-prompt/webapp-prompt.js @@ -123,6 +123,7 @@ class AppPrompt { : ''; return toFragment`
+ ${this.elements.closeIcon}
${this.image}
@@ -135,7 +136,6 @@ class AppPrompt {
- ${this.elements.closeIcon}
`; }; @@ -145,10 +145,16 @@ class AppPrompt { // if (!e.target.closest(CONFIG.selectors.prompt)) AppPrompt.close(); // }); + document.addEventListener('keydown', this.handleKeyDown); + [this.elements.closeIcon, this.elements.cta] .forEach((elem) => elem.addEventListener('click', this.close)); }; + handleKeyDown = (event) => { + if (event.key === 'Escape') this.close(); + }; + initRedirect = () => setTimeout(() => { // TODO: uncomment for actual redirect // this.close(); @@ -168,6 +174,7 @@ class AppPrompt { appPromptElem?.remove(); clearTimeout(this.redirectFn); this.setDismissedPrompt(); + document.removeEventListener('keydown', this.handleKeyDown); }; static getDismissedPrompts = () => {