From ee0c440fb1236a4d017782bc94d26143928a4683 Mon Sep 17 00:00:00 2001
From: Joaquin Rivero <jq.rivero@gmail.com>
Date: Wed, 25 Sep 2024 09:32:51 +0800
Subject: [PATCH] Open with enter and focusable with tab key Text decoration
 under verb widget footer links

---
 acrobat/blocks/verb-widget/verb-widget.css |  7 +++++--
 acrobat/blocks/verb-widget/verb-widget.js  | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/acrobat/blocks/verb-widget/verb-widget.css b/acrobat/blocks/verb-widget/verb-widget.css
index 057e96f6..c8acf741 100644
--- a/acrobat/blocks/verb-widget/verb-widget.css
+++ b/acrobat/blocks/verb-widget/verb-widget.css
@@ -55,6 +55,9 @@
   text-align: center;
 }
 
+.verb-footer a {
+  text-decoration: underline;
+}
 
 #CIDTWO {
   /* display: none; */
@@ -168,7 +171,7 @@
   transform: translate(-50%, -50%);
   left: 50%;
   font-size: 14px;
-  font-weight: 400; 
+  font-weight: 400;
 }
 
 .verb-errorText {
@@ -236,7 +239,7 @@
   margin-left: 15px;
 }
 
-.verb-mobile-cta:hover, 
+.verb-mobile-cta:hover,
 .verb-mobile-cta:active {
   background-color: #0054b6;
   color: #fff;
diff --git a/acrobat/blocks/verb-widget/verb-widget.js b/acrobat/blocks/verb-widget/verb-widget.js
index a01ae945..c4d6fe94 100644
--- a/acrobat/blocks/verb-widget/verb-widget.js
+++ b/acrobat/blocks/verb-widget/verb-widget.js
@@ -55,10 +55,10 @@ export default async function init(element) {
   const widgetIcon = createTag('div', { class: 'verb-icon' });
   const widgetTitle = createTag('div', { class: 'verb-title' }, 'Acrobat');
   const widgetCopy = createTag('p', { class: 'verb-copy' }, window.mph[`verb-widget-${VERB}-description`]);
-  const widgetButton = createTag('label', { for: 'file-upload', class: 'verb-cta' }, window.mph['verb-widget-cta']);
+  const widgetButton = createTag('label', { for: 'file-upload', class: 'verb-cta', tabindex: 0 }, window.mph['verb-widget-cta']);
   const widgetMobileButton = createTag('a', { class: 'verb-mobile-cta', href: mobileLink }, window.mph['verb-widget-cta-mobile']);
   const button = createTag('input', { type: 'file', id: 'file-upload', class: 'hide' });
-  const widgetImage = createTag('img', { class: 'verb-image', src: `/acrobat/img/verb-widget/${VERB}.png` });
+  const widgetImage = createTag('img', { class: 'verb-image', src: `/acrobat/img/verb-widget/${VERB}.png`, alt: '' });
   // Since we're using placeholders we need a solution for the hyperlinks
   const legal = createTag('p', { class: 'verb-legal' }, `${window.mph['verb-widget-legal']} `);
   const terms = createTag('a', { class: 'verb-legal-url', target: '_blank', href: 'https://www.adobe.com/legal/terms.html' }, window.mph.tou);
@@ -90,6 +90,12 @@ export default async function init(element) {
 
   element.append(widget, footer);
 
+  widgetButton.addEventListener('keydown', (e) => {
+    if (e?.key === 'Enter' || e?.keyCode === 13) {
+      widgetButton.click();
+    }
+  });
+
   // Analytics
   verbAnalytics('landing:shown', VERB);
 
@@ -148,6 +154,7 @@ export default async function init(element) {
 
   // Errors, Analytics & Logging
   window.addEventListener('unity:show-error-toast', (e) => {
+    // eslint-disable-next-line no-console
     console.log(`⛔️ Error Code - ${e.detail?.code}`);
 
     if (e.detail?.code === 'only_accept_one_file') {
@@ -183,5 +190,10 @@ export default async function init(element) {
   });
 }
 
-// const ce = (new CustomEvent('unity:show-error-toast', { detail: { code: 'only_accept_one_file', message: 'Error message' } }));
+// const ce = (
+//   new CustomEvent(
+//     'unity:show-error-toast',
+//     { detail: { code: 'only_accept_one_file', message: 'Error message' } },
+//   )
+// );
 // dispatchEvent(ce)