@codecademy/gamut

Index: package/dist/Modals/Modal.js
===================================================================
--- package/dist/Modals/Modal.js
+++ package/dist/Modals/Modal.js
@@ -1,6 +1,6 @@
 import { MiniDeleteIcon } from '@codecademy/gamut-icons';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import * as React from 'react';
 import { Box } from '../Box';
 import { FillButton, IconButton, TextButton } from '../Button';
 import { Overlay } from '../Overlay';
@@ -27,21 +27,23 @@
   title,
   views,
   ...rest
 }) => {
+  const titleId = useId();
   const [currentView, setCurrentView] = useState(0);
   const view = views?.[currentView];
   const image = (view?.image || rest?.image) ?? null;
   const titleText = title || views?.[currentView].title;
+  const needsLabelledBy = titleText && !ariaLabel;
   return /*#__PURE__*/_jsx(Overlay, {
     "data-testid": "modal",
     shroud: true,
     onRequestClose: onRequestClose,
     ...rest,
     children: /*#__PURE__*/_jsxs(ModalContainer, {
       "aria-hidden": "false",
       "aria-label": ariaLabel,
-      "aria-labelledby": titleText ? String(titleText) : undefined,
+      "aria-labelledby": needsLabelledBy ? titleId : undefined,
       "aria-modal": "true",
       className: className,
       "data-autofocus": true,
       layout: views && views?.length > 0 ? 'dialog' : 'standard',
@@ -52,8 +54,9 @@
       children: [titleText && /*#__PURE__*/_jsx(Text, {
         as: headingLevel,
         fontSize: 20,
         gridArea: "title",
+        id: titleId,
         lineHeight: "base",
         children: titleText
       }), !hideCloseButton && /*#__PURE__*/_jsx(Box, {
         alignSelf: "start",