feat(overlay-alert): require onclose and title or label

src/components/ComboBox/ComboBox.stories.tsx

@@ -105,7 +105,7 @@ Sections.argTypes = { ...argTypes };
 
 const InListItemTemplate = (props: Props) => {
   return (
-    <OverlayAlert>
+    <OverlayAlert aria-label="Overlay alert" onClose={() => null}>
       <div style={{ overflowY: 'scroll', height: '100px' }}>
         <ComboBoxWrapper {...props} />
       </div>

src/components/OverlayAlert/OverlayAlert.tsx

@@ -28,9 +28,9 @@ const OverlayAlert: FC<Props> = (props: Props) => {
     title,
     focusLockProps = DEFAULTS.FOCUS_LOCK_PROPS,
     onClose,
-    ariaLabel,
-    ariaLabelledby,
-    ariaDescribedby,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
     ...other
   } = props;
   const id = useRef(uuidV4());

src/components/OverlayAlert/OverlayAlert.types.ts

@@ -6,83 +6,75 @@ import type { ButtonSimpleProps } from '../ButtonSimple';
 import type { ButtonGroupProps } from '../ButtonGroup';
 import type { OverlayProps, OverlayColor } from '../Overlay';
 import type { ModalContainerColor } from '../ModalContainer';
+import { AriaLabelingProps } from '@react-types/shared';
+import { AriaLabelRequired } from 'src/utils/a11y';
 
 export type SupportedActions = ButtonSimpleProps | ButtonGroupProps;
 export type SupportedControls = ButtonControlProps;
 
-export interface Props extends OverlayProps {
-  /**
-   * Actions associated with this OverlayAlert.
-   */
-  actions?: ReactElement<SupportedActions> | Array<ReactElement<SupportedActions>>;
-
-  /**
-   * Child components of this OverlayAlert.
-   */
-  children?: ReactNode;
-
-  /**
-   * Custom class for overriding this component's CSS.
-   */
-  className?: string;
-
-  /**
-   * Controls associated with this OverlayAlert.
-   */
-  controls?: ReactElement<SupportedControls> | Array<ReactElement<SupportedControls>>;
-
-  /**
-   * Details for this OverlayAlert.
-   */
-  details?: string;
-
-  /**
-   * Custom id for overriding this component's CSS.
-   */
-  id?: string;
-
-  /**
-   * Color of the nested modal within this component.
-   */
-  modalColor?: ModalContainerColor;
-
-  /**
-   * Color of the overlay of this component.
-   */
-  overlayColor?: OverlayColor;
-
-  /**
-   * Custom style for overriding this component's CSS.
-   */
-  style?: CSSProperties;
-
-  /**
-   * Title for this OverlayAlert.
-   */
-  title?: string;
-
-  /**
-   * Props to be passed to Overlay for FocusLock, default `{returnFocus: true}`
-   */
-  focusLockProps?: Omit<ComponentProps<typeof FocusLock>, 'children'>;
-
-  /**
-   * Callback function to be fired when Escape key is pressed.
-   */
-  onClose?: () => void;
-
-  /**
-   * ariaLabel for this OverlayAlert which will be passed onto ModalContainer.
-   */
-  ariaLabel?: string;
-
-  /**
-   * ariaLabeledby for this OverlayAlert which will be passed onto ModalContainer.
-   */
-  ariaLabelledby?: string;
-
-  /**
-   * ariaDescribedby for this OverlayAlert which will be passed onto ModalContainer.
-   */
-  ariaDescribedby?: string;
-}
+export type Props = OverlayProps &
+  AriaLabelingProps &
+  (
+    | {
+        /**
+         * Title for this OverlayAlert.
+         */
+        title: string;
+      }
+    | ({ title?: never } & AriaLabelRequired) // if a title is not provided, a label is required
+  ) & {
+    /**
+     * Actions associated with this OverlayAlert.
+     */
+    actions?: ReactElement<SupportedActions> | Array<ReactElement<SupportedActions>>;
+
+    /**
+     * Child components of this OverlayAlert.
+     */
+    children?: ReactNode;
+
+    /**
+     * Custom class for overriding this component's CSS.
+     */
+    className?: string;
+
+    /**
+     * Controls associated with this OverlayAlert.
+     */
+    controls?: ReactElement<SupportedControls> | Array<ReactElement<SupportedControls>>;
+
+    /**
+     * Details for this OverlayAlert.
+     */
+    details?: string;
+
+    /**
+     * Custom id for overriding this component's CSS.
+     */
+    id?: string;
+
+    /**
+     * Color of the nested modal within this component.
+     */
+    modalColor?: ModalContainerColor;
+
+    /**
+     * Color of the overlay of this component.
+     */
+    overlayColor?: OverlayColor;
+
+    /**
+     * Custom style for overriding this component's CSS.
+     */
+    style?: CSSProperties;
+
+    /**
+     * Props to be passed to Overlay for FocusLock, default `{returnFocus: true}`
+     */
+    focusLockProps?: Omit<ComponentProps<typeof FocusLock>, 'children'>;
+
+    /**
+     * Callback function to be fired when Escape key is pressed.
+     */
+    onClose: () => void;
+  };

src/components/OverlayAlert/OverlayAlert.typetest.ts

@@ -0,0 +1,10 @@
+import { Expect, ExpectExtends, ExpectFalse } from 'src/utils/typetest.util';
+import { Props } from './OverlayAlert.types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type cases = [
+  Expect<ExpectExtends<Props, { title: 'x'; onClose: () => void }>>,
+  Expect<ExpectExtends<Props, { 'aria-label': 'label'; onClose: () => void }>>,
+  Expect<ExpectExtends<Props, { title: 'x'; 'aria-label': 'label'; onClose: () => void }>>,
+  ExpectFalse<ExpectExtends<Props, { noTitleOrLabel: 'x'; onClose: () => void }>>
+];