Fixes HTML markup on some divs and spans (#2270)

* fixes HTML markup on some div and span

* add changeset

.changeset/swift-walls-sip.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+fixes invalid HTML in payment method item and card labels

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 */
 }

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>
     );
 }

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;

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'}