fix: added visible focus indicator for modal dismiss button

Author: glad-adyen

src/components/external/DisputesOverview/components/DisputeManagementModal/DisputeManagementModal.scss

@@ -7,7 +7,6 @@ import { popoverUtil } from '../../../../internal/Popover/utils/popoverUtil';
 import useModalDetails from '../../../../../hooks/useModalDetails';
 import { IDisputeStatusGroup } from '../../../../../types/api/models/disputes';
 import { DisputeDetailsContainer } from '../../../DisputeManagement/components/DisputeDetailsContainer/DisputeDetailsContainer';
-import './DisputeManagementModal.scss';
 
 export interface DisputeManagementModalProps {
     setModalVisible: (modalVisible: boolean) => void;
@@ -63,17 +62,15 @@ export const DisputeManagementModal: FC<DisputeManagementModalProps> = ({
                     headerWithBorder={false}
                     size={selectedDetail.modalSize || 'large'}
                 >
-                    <div className="adyen-pe-dispute-management-modal-content">
-                        <DisputeDetailsContainer
-                            id={selectedDetail.selection.data}
-                            dataCustomization={dataCustomization}
-                            onDisputeAccept={onDisputeManagementSuccessful}
-                            onDisputeDefend={onDisputeManagementSuccessful}
-                            onContactSupport={onContactSupport}
-                            onDismiss={resetDetails}
-                            hideTitle
-                        />
-                    </div>
+                    <DisputeDetailsContainer
+                        id={selectedDetail.selection.data}
+                        dataCustomization={dataCustomization}
+                        onDisputeAccept={onDisputeManagementSuccessful}
+                        onDisputeDefend={onDisputeManagementSuccessful}
+                        onContactSupport={onContactSupport}
+                        onDismiss={resetDetails}
+                        hideTitle
+                    />
                 </Modal>
             )}
         </div>

src/components/external/DisputesOverview/components/DisputeManagementModal/DisputeManagementModal.tsx

@@ -111,7 +111,7 @@ $adyen-icon-touch-size: style.token(spacer-110);
         }
     }
 
-    &__header-icon {
+    &__dismiss-button {
         --icon-size: 16px;
         --offset-margin: calc(1rem - #{$adyen-icon-touch-size});
         --offset-position: calc(var(--offset-margin) * -1 / 2);
@@ -124,18 +124,23 @@ $adyen-icon-touch-size: style.token(spacer-110);
         right: var(--offset-position);
         top: var(--offset-position);
         transition: background 0.1s linear;
-
-        &:focus,
-        &:active {
-            outline: 0;
-        }
     }
 
     .adyen-pe-label__text {
         font-size: style.token(text-body-font-size);
         margin-bottom: style.token(spacer-020);
     }
 
+    &__content {
+        --adyen-pe-data-details-padding: #{style.token(spacer-090)};
+        padding: 0 var(--adyen-pe-data-details-padding) var(--adyen-pe-data-details-padding);
+
+        .adyen-pe-error-message-display {
+            padding-bottom: var(--adyen-pe-data-details-padding);
+            position: relative;
+        }
+    }
+
     &__footer {
         display: flex;
         gap: style.token(spacer-040);

src/components/internal/Modal/Modal.scss

@@ -78,15 +78,15 @@ export default function Modal({
                                     'adyen-pe-modal__header--with-border-bottom': headerWithBorder,
                                 })}
                             >
-                                {title && <div className={`adyen-pe-modal__header__title`}>{title}</div>}
+                                {title && <div className={`adyen-pe-modal__header-title`}>{title}</div>}
 
                                 {isDismissible && (
                                     <Button
                                         onClick={onClose}
                                         variant={ButtonVariant.TERTIARY}
                                         iconButton
                                         classNameModifiers={['circle']}
-                                        className={`adyen-pe-modal__header-icon`}
+                                        className={`adyen-pe-modal__dismiss-button`}
                                         aria-label={i18n.get('dismiss')}
                                     >
                                         <Icon name="cross" />

src/components/internal/Modal/Modal.tsx

@@ -1,11 +1,6 @@
 import { useMemo } from 'preact/hooks';
 import DataOverviewDetails from '../../DataOverviewDetails/DataOverviewDetails';
 import { DetailsComponentProps, PayoutDetailsWithIdProps, SelectedDetail } from '../../DataOverviewDetails/types';
-import './ModalContent.scss';
-
-const CLASSNAMES = {
-    base: 'adyen-pe-modal-content',
-};
 
 // [TODO]: Consider covering ...restData with type information (added here as a hack to capture extra details)
 function ModalContent({ type, data, dataCustomization, ...restData }: SelectedDetail) {
@@ -21,15 +16,7 @@ function ModalContent({ type, data, dataCustomization, ...restData }: SelectedDe
         }
     }, [data, restData, type]);
 
-    return (
-        <>
-            {detailProps && (
-                <div className={CLASSNAMES.base}>
-                    <DataOverviewDetails {...(detailProps as DetailsComponentProps)} dataCustomization={dataCustomization} />
-                </div>
-            )}
-        </>
-    );
+    return detailProps && <DataOverviewDetails {...(detailProps as DetailsComponentProps)} dataCustomization={dataCustomization} />;
 }
 
 export default ModalContent;