@codecademy/gamut

Index: package/dist/Modals/Dialog.js
===================================================================
--- package/dist/Modals/Dialog.js
+++ package/dist/Modals/Dialog.js
@@ -1,10 +1,12 @@
 import { MiniDeleteIcon } from '@codecademy/gamut-icons';
+import { useId } from 'react';
 import * as React from 'react';
 import { Box } from '../Box';
 import { FillButton, IconButton, TextButton } from '../Button';
 import { Overlay } from '../Overlay';
 import { Text } from '../Typography';
+import { isNullish } from '../utils/nullish';
 import { ModalContainer } from './elements';
 import { ImageContainer } from './ImageContainer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Dialog = ({
@@ -25,8 +27,9 @@
   containerFocusRef,
   size = 'small',
   ...rest
 }) => {
+  const titleId = useId();
   const onConfirm = e => {
     onRequestClose();
     confirmCta.onClick?.(e);
   };
@@ -39,10 +42,10 @@
     onRequestClose: onCancel,
     ...rest,
     children: /*#__PURE__*/_jsxs(ModalContainer, {
       "aria-hidden": "false",
-      "aria-label": "dialog",
-      "aria-labelledby": String(title),
+      "aria-label": isNullish(title) ? 'dialog' : undefined,
+      "aria-labelledby": !isNullish(title) ? titleId : undefined,
       "aria-modal": "true",
       "data-autofocus": true,
       layout: "dialog",
       ref: containerFocusRef,
@@ -52,8 +55,9 @@
       children: [/*#__PURE__*/_jsx(Text, {
         as: "h2",
         fontSize: 20,
         gridArea: "title",
+        id: !isNullish(title) ? titleId : undefined,
         lineHeight: "base",
         children: title
       }), !hideCloseButton && /*#__PURE__*/_jsx(Box, {
         gridArea: "close",