fix: Modal Close button a11y issues

packages/react/src/components/IconButton/index.js → packages/react/src/components/IconButton/index.tsx

@@ -5,16 +5,96 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import PropTypes, { ReactNodeLike } from 'prop-types';
+import React, { ForwardedRef } from 'react';
 import Button from '../Button';
 import classNames from 'classnames';
 import { Tooltip } from '../Tooltip';
 import { usePrefix } from '../../internal/usePrefix';
 import cx from 'classnames';
 
-const IconButton = React.forwardRef(function IconButton(props, ref) {
-  const {
+interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align?:
+    | 'top'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left'
+    | 'right';
+
+  /**
+   * Provide an icon or asset to be rendered inside of the IconButton
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Specify an optional className to be added to your Button
+   */
+  className?: string;
+
+  /**
+   * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+   */
+  closeOnActivation?: boolean;
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  enterDelayMs?: number;
+
+  /**
+   * Specify whether the IconButton is currently selected
+   */
+
+  isSelected?: boolean;
+
+  /**
+   * Specify the type of button to be used as the base for the IconButton
+   */
+  kind?: 'primary' | 'secondary' | 'ghost' | 'tertiary';
+
+  /**
+   * Provide the label to be rendered inside of the Tooltip. The label will use
+   * `aria-labelledby` and will fully describe the child node that is provided.
+   * This means that if you have text in the child node it will not be
+   * announced to the screen reader.
+   */
+  label: ReactNodeLike;
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  leaveDelayMs?: number;
+
+  /**
+   * Specify the size of the Button. Defaults to `md`.
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Specify an optional className to be added to your Tooltip wrapper
+   */
+  wrapperClasses?: string;
+}
+
+const IconButton = React.forwardRef(function IconButton(
+  {
     align,
     children,
     className,
@@ -29,7 +109,9 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
     size,
     isSelected,
     ...rest
-  } = props;
+  }: IconButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>
+) {
   const prefix = usePrefix();
 
   const tooltipClasses = classNames(wrapperClasses, `${prefix}--icon-tooltip`, {

packages/react/src/components/Modal/Modal.tsx

@@ -19,6 +19,7 @@ import wrapFocus, {
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { usePrefix } from '../../internal/usePrefix';
 import { keys, match } from '../../internal/keyboard';
+import { IconButton } from '../IconButton';
 import { noopFn } from '../../internal/noopFn';
 import { Text } from '../Text';
 import { ReactAttr } from '../../types/common';
@@ -208,7 +209,7 @@ const Modal = React.forwardRef(function Modal(
     shouldSubmitOnEnter,
     size,
     hasScrollingContent = false,
-    closeButtonLabel,
+    closeButtonLabel = 'Close',
     preventCloseOnClickOutside = false,
     isFullWidth,
     launcherButtonRef,
@@ -387,20 +388,23 @@ const Modal = React.forwardRef(function Modal(
   }, [open, selectorPrimaryFocus, danger, prefix]);
 
   const modalButton = (
-    <button
-      className={modalCloseButtonClass}
-      type="button"
-      onClick={onRequestClose}
-      title={ariaLabel}
-      aria-label={closeButtonLabel ? closeButtonLabel : 'close'}
-      ref={button}>
-      <Close
-        size={20}
-        aria-hidden="true"
-        tabIndex="-1"
-        className={`${modalCloseButtonClass}__icon`}
-      />
-    </button>
+    <div className={`${prefix}--modal-close-button`}>
+      <IconButton
+        className={modalCloseButtonClass}
+        label={closeButtonLabel}
+        onClick={onRequestClose}
+        title={closeButtonLabel}
+        aria-label={closeButtonLabel}
+        align="left"
+        ref={button}>
+        <Close
+          size={20}
+          aria-hidden="true"
+          tabIndex="-1"
+          className={`${modalCloseButtonClass}__icon`}
+        />
+      </IconButton>
+    </div>
   );
 
   const modalBody = (

packages/styles/scss/components/modal/_modal.scss

@@ -434,18 +434,19 @@
   // -----------------------------
   // Modal close btn
   // -----------------------------
-  .#{$prefix}--modal-close {
+
+  .#{$prefix}--modal-close-button {
     position: absolute;
-    z-index: 2;
-    overflow: hidden;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+  .#{$prefix}--modal-close {
     padding: convert.to-rem(12px);
     border: 2px solid transparent;
     background-color: transparent;
     block-size: 3rem;
     cursor: pointer;
     inline-size: 3rem;
-    inset-block-start: 0;
-    inset-inline-end: 0;
     transition: background-color $duration-fast-02 motion(standard, productive);
 
     &:hover {