From c1e7f0f0766d6536f2b93bd821a37df9dbb542b7 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Wed, 8 Nov 2023 15:42:55 -0800
Subject: [PATCH 1/2] Fix aria-labeledby in both BasicModal and
 BasicThemedModal

---
 client/components/common/BasicModal/index.jsx       |  9 +++++----
 client/components/common/BasicThemedModal/index.jsx | 10 ++++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/components/common/BasicModal/index.jsx b/client/components/common/BasicModal/index.jsx
index d9aed660f..155d2201f 100644
--- a/client/components/common/BasicModal/index.jsx
+++ b/client/components/common/BasicModal/index.jsx
@@ -39,21 +39,21 @@ const BasicModal = ({
     }, [show]);
 
     const id = useMemo(() => {
-        return uniqueId('focus-trapped-modal-');
+        return uniqueId('modal-');
     }, []);
 
     return (
-        <FocusTrapper isActive={show} trappedElId={id}>
+        <FocusTrapper isActive={show} trappedElId={`focus-trapped-${id}`}>
             <Modal
                 show={show}
-                id={id}
+                id={`focus-trapped-${id}`}
                 centered={centered}
                 animation={animation}
                 onHide={useOnHide ? handleHide || handleClose : null}
                 onExit={!useOnHide ? handleHide || handleClose : null}
                 /* Disabled due to buggy implementation which jumps the page */
                 autoFocus={false}
-                aria-labelledby="basic-modal"
+                aria-labelledby={`title-${id}`}
                 dialogClassName={dialogClassName}
                 backdrop={staticBackdrop ? 'static' : true}
             >
@@ -65,6 +65,7 @@ const BasicModal = ({
                         as={ModalTitleStyle}
                         tabIndex="-1"
                         ref={headerRef}
+                        id={`title-${id}`}
                     >
                         {title}
                     </Modal.Title>
diff --git a/client/components/common/BasicThemedModal/index.jsx b/client/components/common/BasicThemedModal/index.jsx
index 428a3e445..be6a96492 100644
--- a/client/components/common/BasicThemedModal/index.jsx
+++ b/client/components/common/BasicThemedModal/index.jsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import styled from '@emotion/styled';
+import { uniqueId } from 'lodash';
 
 const ModalTitleStyle = styled.h1`
     border: 0;
@@ -50,6 +51,10 @@ const BasicThemedModal = ({
         headerRef.current.focus();
     }, [show]);
 
+    const id = useMemo(() => {
+        return uniqueId('modal-');
+    }, []);
+
     return (
         <>
             <Modal
@@ -59,7 +64,7 @@ const BasicThemedModal = ({
                 onExit={handleClose}
                 /* Disabled due to buggy implementation which jumps the page */
                 autoFocus={false}
-                aria-labelledby="basic-modal"
+                aria-labelledby={`title-${id}`}
                 dialogClassName={dialogClassName}
             >
                 <ColorStrip theme={theme} />
@@ -68,6 +73,7 @@ const BasicThemedModal = ({
                         as={ModalTitleStyle}
                         tabIndex="-1"
                         ref={headerRef}
+                        id={`title-${id}`}
                     >
                         <ModalInnerSectionContainer>
                             <FontAwesomeIcon

From 50cd6c8cfafd1e972159dca1c29d24ce4472b216 Mon Sep 17 00:00:00 2001
From: Stalgia Grigg <stalgia@bocoup.com>
Date: Wed, 8 Nov 2023 16:01:23 -0800
Subject: [PATCH 2/2] Unit test for aria-labeledby on BasicModal

---
 client/tests/BasicModal.test.jsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 client/tests/BasicModal.test.jsx

diff --git a/client/tests/BasicModal.test.jsx b/client/tests/BasicModal.test.jsx
new file mode 100644
index 000000000..a3481430e
--- /dev/null
+++ b/client/tests/BasicModal.test.jsx
@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import BasicModal from '../components/common/BasicModal/';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('<BasicModal />', () => {
+    it('has aria-labelledby matching the modal title id', () => {
+        const { getByRole, getByText } = render(
+            <BasicModal show title="Test Title" content="Test Content" />
+        );
+
+        const modal = getByRole('dialog');
+        const title = getByText('Test Title');
+
+        expect(modal).toHaveAttribute('aria-labelledby', title.id);
+    });
+});