Fix aria-labeledby for BasicModal/BasicThemedModal

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>

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

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);
+    });
+});