From 2e7adb0d2efb53f4c69f9b3d7fc51f089c261ff9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Ferreira?= <m1aw@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:44:15 +0200
Subject: [PATCH] Fixes HTML markup on some divs and spans (#2270)

* fixes HTML markup on some div and span

* add changeset
---
 .changeset/swift-walls-sip.md                             | 5 +++++
 .../Card/components/CardInput/components/CVCHint.tsx      | 4 ++--
 .../components/CardInput/components/ExpirationDate.tsx    | 4 ++--
 .../Dropin/components/PaymentMethod/PaymentMethodName.tsx | 8 ++++----
 .../src/components/internal/FormFields/Field/Field.tsx    | 4 ++--
 5 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/swift-walls-sip.md

diff --git a/.changeset/swift-walls-sip.md b/.changeset/swift-walls-sip.md
new file mode 100644
index 00000000..33ae458c
--- /dev/null
+++ b/.changeset/swift-walls-sip.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+fixes invalid HTML in payment method item and card labels
diff --git a/packages/lib/src/components/Card/components/CardInput/components/CVCHint.tsx b/packages/lib/src/components/Card/components/CardInput/components/CVCHint.tsx
index 2cd2553b..94b8f3e5 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/CVCHint.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/CVCHint.tsx
@@ -11,7 +11,7 @@ export default function CVCHint({ frontCVC = false, fieldLabel }: CVCHintProps)
 
     /* eslint-disable max-len */
     return (
-        <div className={hintClassnames}>
+        <span className={hintClassnames}>
             <svg
                 className={'adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--front'}
                 width="27"
@@ -60,7 +60,7 @@ export default function CVCHint({ frontCVC = false, fieldLabel }: CVCHintProps)
                 />
                 <rect className={'adyen-checkout__card__cvc__hint__location'} x="16.5" y="9.5" width="7" height="5" rx="2.5" stroke="#C12424" />
             </svg>
-        </div>
+        </span>
     );
     /* eslint-enable max-len */
 }
diff --git a/packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx b/packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx
index 92e335c5..59479ce7 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx
@@ -59,7 +59,7 @@ export default function ExpirationDate(props: ExpirationDateProps) {
                     }
                 )}
             />
-            <div
+            <span
                 className={classNames('adyen-checkout__field__exp-date_hint_wrapper', [styles['checkout__field__exp-date_hint_wrapper']], {
                     'adyen-checkout__field__exp-date_hint_wrapper--hidden': error || isValid
                 })}
@@ -69,7 +69,7 @@ export default function ExpirationDate(props: ExpirationDateProps) {
                     className="adyen-checkout__field__exp-date_hint"
                     alt={fieldLabel}
                 />
-            </div>
+            </span>
         </Field>
     );
 }
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx
index 35473d5f..fbce97a7 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx
+++ b/packages/lib/src/components/Dropin/components/PaymentMethod/PaymentMethodName.tsx
@@ -3,7 +3,7 @@ import { h } from 'preact';
 import './PaymentMethodName.scss';
 
 const PaymentMethodName = ({ displayName, additionalInfo, isSelected }) => (
-    <div className={'adyen-checkout__payment-method__name_wrapper'}>
+    <span className={'adyen-checkout__payment-method__name_wrapper'}>
         <span
             className={classNames({
                 'adyen-checkout__payment-method__name': true,
@@ -13,15 +13,15 @@ const PaymentMethodName = ({ displayName, additionalInfo, isSelected }) => (
             {displayName}
         </span>
 
-        <div
+        <span
             className={classNames({
                 'adyen-checkout__payment-method__additional-info': true,
                 'adyen-checkout__payment-method__additional-info--selected': isSelected
             })}
         >
             {additionalInfo}
-        </div>
-    </div>
+        </span>
+    </span>
 );
 
 export default PaymentMethodName;
diff --git a/packages/lib/src/components/internal/FormFields/Field/Field.tsx b/packages/lib/src/components/internal/FormFields/Field/Field.tsx
index 8998dded..1b11ce9e 100644
--- a/packages/lib/src/components/internal/FormFields/Field/Field.tsx
+++ b/packages/lib/src/components/internal/FormFields/Field/Field.tsx
@@ -100,7 +100,7 @@ const Field: FunctionalComponent<FieldProps> = props => {
     const renderInputRelatedElements = useCallback(() => {
         return (
             <Fragment>
-                <span
+                <div
                     className={classNames([
                         'adyen-checkout__input-wrapper',
                         ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)
@@ -136,7 +136,7 @@ const Field: FunctionalComponent<FieldProps> = props => {
                             <Icon type="field_error" alt={i18n?.get('error.title')} />
                         </span>
                     )}
-                </span>
+                </div>
                 {addContextualElement && (
                     <span
                         className={'adyen-checkout__error-text'}