fix read all the expiry date errors

Author: m1aw

packages/lib/src/components/Card/components/CardInput/useSRPanelForCardInputErrors.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'preact/hooks';
 import useSRPanelContext from '../../../../core/Errors/useSRPanelContext';
 import { SetSRMessagesReturnFn } from '../../../../core/Errors/SRPanelProvider';
-import { handlePartialAddressMode, lookupBlurBasedErrors, mapFieldKey } from './utils';
+import { handlePartialAddressMode, mapFieldKey } from './utils';
 import { usePrevious } from '../../../../utils/hookUtils';
 import { SetSRMessagesReturnObject, SortedErrorObject } from '../../../../core/Errors/types';
 import { ERROR_ACTION_BLUR_SCENARIO, ERROR_ACTION_FOCUS_FIELD } from '../../../../core/Errors/constants';
@@ -66,14 +66,7 @@ const useSRPanelForCardInputErrors = ({ errors, props, isValidating, retrieveLay
                     const latestErrorMsg = difference?.[0];
 
                     if (latestErrorMsg) {
-                        // Use the error code to look up whether error is actually a blur based one (most are but some SF ones aren't)
-                        const isBlurBasedError = lookupBlurBasedErrors(latestErrorMsg.errorCode);
-
-                        /**
-                         *  ONLY ADD BLUR BASED ERRORS TO THE ERROR PANEL - doing this step prevents the non-blur based errors from being read out twice
-                         *  (once from the aria-live, error panel & once from the aria-describedby element)
-                         */
-                        const latestSRError = isBlurBasedError ? latestErrorMsg.errorMessage : null;
+                        const latestSRError = latestErrorMsg.errorMessage;
                         // console.log('### CardInput2::componentDidUpdate:: #2 (not validating) single error:: latestSRError', latestSRError);
                         setSRMessagesFromStrings(latestSRError);
                     } else {

packages/lib/src/components/Card/components/CardInput/utils.ts

@@ -17,7 +17,6 @@ import { InstallmentsObj } from './components/Installments/Installments';
 import { SFPProps } from '../../../internal/SecuredFields/SFP/types';
 import { BRAND_READABLE_NAME_MAP } from '../../../internal/SecuredFields/lib/constants';
 import { UseImageHookType } from '../../../../core/Context/useImage';
-import { SF_ErrorCodes } from '../../../../core/Errors/constants';
 
 export const getCardImageUrl = (brand: string, getImage: UseImageHookType): string => {
     const imageOptions = {
@@ -173,16 +172,6 @@ export const handlePartialAddressMode = (addressMode: AddressModeOptions): Addre
     return addressMode == AddressModeOptions.partial ? PARTIAL_ADDRESS_SCHEMA : null;
 };
 
-// Almost all errors are blur based, but some SF ones are not i.e. when an unsupported card is entered or the expiry date is out of range
-export function lookupBlurBasedErrors(errorCode) {
-    return ![
-        SF_ErrorCodes.ERROR_MSG_UNSUPPORTED_CARD_ENTERED,
-        SF_ErrorCodes.ERROR_MSG_CARD_TOO_OLD,
-        SF_ErrorCodes.ERROR_MSG_CARD_TOO_FAR_IN_FUTURE,
-        SF_ErrorCodes.ERROR_MSG_CARD_EXPIRES_TOO_SOON
-    ].includes(errorCode);
-}
-
 export function getFullBrandName(brand) {
     return BRAND_READABLE_NAME_MAP[brand] ?? brand;
 }

packages/lib/src/core/Errors/SRMessages.tsx

@@ -1,4 +1,4 @@
-import { h, Fragment } from 'preact';
+import { h } from 'preact';
 import { useRef, useState } from 'preact/hooks';
 import { SRMessagesProps } from './types';
 
@@ -7,7 +7,7 @@ export interface SRMessagesRef {
     setMessages?: (who: string[]) => void;
 }
 
-export function SRMessages({ setComponentRef }: SRMessagesProps) {
+export function SRMessages({ setComponentRef, customAria }: SRMessagesProps) {
     const messagesRef = useRef<SRMessagesRef>({});
     // Just call once to create the object by which we expose the members expected by the parent comp
     if (!Object.keys(messagesRef.current).length) {
@@ -22,14 +22,14 @@ export function SRMessages({ setComponentRef }: SRMessagesProps) {
     };
 
     return messages ? (
-        <Fragment>
+        <div role={'log'} {...customAria}>
             {messages.map(msg => {
                 return (
                     <div key={msg} className="adyen-checkout-sr-panel__msg" {...(process.env.NODE_ENV !== 'production' && { 'data-testid': msg })}>
                         {msg}
                     </div>
                 );
             })}
-        </Fragment>
+        </div>
     ) : null;
 }

packages/lib/src/core/Errors/SRPanel.tsx

@@ -19,7 +19,7 @@ export class SRPanel extends BaseElement<SRPanelProps> {
         showPanel: false,
         id: 'ariaLiveSRPanel',
         ariaAttributes: {
-            'aria-relevant': 'all',
+            'aria-relevant': 'additions',
             'aria-live': 'polite',
             'aria-atomic': 'true'
         }
@@ -104,11 +104,9 @@ export class SRPanel extends BaseElement<SRPanelProps> {
         return (
             <div
                 className={this.showPanel ? 'adyen-checkout-sr-panel' : 'adyen-checkout-sr-panel--sr-only'}
-                role={'log'}
-                {...this.props.ariaAttributes}
                 {...(process.env.NODE_ENV !== 'production' && { 'data-testid': this.id })}
             >
-                <SRMessages setComponentRef={this.setComponentRef} />
+                <SRMessages setComponentRef={this.setComponentRef} customAria={this.props.ariaAttributes} />
             </div>
         );
     }

packages/lib/src/core/Errors/types.ts

@@ -49,6 +49,7 @@ export type SRPanelConfig = Pick<SRPanelProps, 'enabled' | 'node' | 'showPanel'
 
 export interface SRMessagesProps {
     setComponentRef: (ref: any) => void;
+    customAria: any;
 }
 
 export interface GenericError {