Merge pull request #822 from adobecom/MWPW-159032

MWPW-159032: Verb Widget - Accessibility Issues
adobecom · Sep 30, 2024 · 611a7fe · 611a7fe
2 parents c68a956 + 8bc58b7
commit 611a7fe
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -101,10 +101,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);