fix(lightbox): fix a11y color contrast on the close button

DSW-198
lumapps · Aug 7, 2024 · d15d2ee · d15d2ee
1 parent 51d19dd
commit d15d2ee
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   `Lightbox`: fix a11y color contrast on the close button.
+
 ## [3.7.5][] - 2024-07-25
 
 ### Changed

diff --git a/packages/lumx-core/src/scss/components/lightbox/_index.scss b/packages/lumx-core/src/scss/components/lightbox/_index.scss
@@ -35,6 +35,7 @@
         position: fixed;
         top: $lumx-spacing-unit * 3;
         right: $lumx-spacing-unit * 3;
+        z-index: 1;
     }
 
     &__wrapper {

diff --git a/packages/lumx-react/src/components/lightbox/Lightbox.tsx b/packages/lumx-react/src/components/lightbox/Lightbox.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 
 import { mdiClose } from '@lumx/icons';
-import { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';
+import { IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -145,17 +145,18 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
             style={{ zIndex }}
         >
             {closeButtonProps && (
-                <IconButton
-                    {...closeButtonProps}
-                    ref={closeButtonRef}
-                    className={`${CLASSNAME}__close`}
-                    color={ColorPalette.light}
-                    emphasis={Emphasis.low}
-                    icon={mdiClose}
-                    theme={theme}
-                    type="button"
-                    onClick={onClose}
-                />
+                <div className={`${CLASSNAME}__close`}>
+                    <IconButton
+                        {...closeButtonProps}
+                        ref={closeButtonRef}
+                        emphasis="low"
+                        hasBackground
+                        icon={mdiClose}
+                        theme="dark"
+                        type="button"
+                        onClick={onClose}
+                    />
+                </div>
             )}
             <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
                 <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">