MWPW-141021: Project PEP Accessibility Requirements (#1853)

* [MWPW-139990] PEP prompt * pep accessibility requirements * hotfix * hotfixes * initial focus on close icon * implementing feedback * hotfix * [MWPW-139990] PEP prompt * MWPW-142617: Microsoft Edge & Chrome Win - progress bar not completely loaded (#1882) * hotfix * refactor: changed loader animation logic * update * revert update * more gpu acceleration for pep loader * hotfix * hotfix * [MWPW-141023] PEP authoring (#1889) * implementing feedback * css variables * hotfix: moved css variables * hotfix --------- Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com>
adobecom · Apr 8, 2024 · 3d45864 · 3d45864
1 parent 760ad61
commit 3d45864
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -123,6 +123,7 @@ class AppPrompt {
       : '';
 
     return toFragment`<div class="appPrompt">
+      ${this.elements.closeIcon}
       <div class="appPrompt-icon">
         ${this.image}
       </div>
@@ -135,7 +136,6 @@ class AppPrompt {
       <div class="appPrompt-progressWrapper">
         <div class="appPrompt-progress" style="background-color: ${this.options['loader-color']}; animation-duration: ${this.options['loader-duration']}ms;"></div>
       </div>
-      ${this.elements.closeIcon}
     </div>`;
   };
 
@@ -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 = () => {