STCOM-1334 Refactor Modals to not use react-overlays. (#2341)

* use the focus-trap dependency

* refactor modal to not use react-overlays

* tweak react-comment to keep eslint happy

* add utility export for OverlayContainer string

* account for overlay components with usePortal prop in focus management of Modals

* implement screen-reader trapping

* Modal - refactor getA11yLabel for more surgical precision, document implementation

* clean up some sonarcloud issues

* add tests for use AssistiveTechTrap

* add refresh method to useOverlayContainer

* progress

* default container to document body

* remove black outline from dialog element

* more focus trapping, inert logic to mount functionality/inner wrapping component.

* remove unused consts from Modal tests

* remove unused useEffect

* alphabetize proptypes

* add yarn.lock

* really add yarn lock

* Update CHANGELOG.md

* Update CHANGELOG.md

.gitignore

@@ -11,4 +11,3 @@ artifacts
 /storybook-static/
 .vscode
 .idea
-yarn.lock

CHANGELOG.md

@@ -38,6 +38,9 @@
 * Fix MCL Paging bug - back button being incorrectly disabled. This was due to an inaccurate rowcount/rowIndex value. Refs STCOM-1331.
 * `Datepicker` - add the `hideCalendarButton` property to hide the calendar icon button. Refs STCOM-1342.
 * Optimize rendering of 2k+ option lists in `Selection`. Refs STCOM-1340.
+* Refactor Modals away from `react-overlays`. Refs STCOM-1334.
+* Apply `inert` attribute to header and siblings of `div#OverlayContainer` when modals are open. Refs STCOM-1334.
+* Expand focus trapping of modal to the `div#OverlayContainer` so that overlay components can function within `<Modal>` using the `usePortal` prop. Refs STCOM-1334.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

index.js

@@ -163,7 +163,7 @@ export {
   getLastFocusable,
   getFirstFocusable
 } from './util/getFocusableElements';
-
+export * from './util/consts';
 export {
   default as currencies,
   currenciesByCode,

lib/AdvancedSearch/tests/AdvancedSearch-test.js

@@ -192,7 +192,7 @@ describe('AdvancedSearch', () => {
     });
 
     it('should called with correct items', async () => {
-      expect(acceptRowStateSpy.calledOnceWith(['rowState'])).to.be.true;
+      await expect(acceptRowStateSpy.calledOnceWith(['rowState'])).to.be.true;
     });
   });
 

lib/ConfirmationModal/tests/ConfirmationModal-test.js

@@ -73,12 +73,12 @@ describe('ConfirmationModal', () => {
 
   describe('When clicking the confirm button', () => {
     beforeEach(async () => {
+      confirmed = false;
+      cancelled = false;
       await confirmationModal.confirm();
     });
 
-    it('The onConfirm callback should be fired', () => {
-      converge(() => confirmed);
-    });
+    it('The onConfirm callback should be fired', () => converge(() => { if (!confirmed) { throw Error('The onConfirm callback should be fired'); } }));
   });
 
   describe('When clicking the cancel button', () => {

lib/Modal/Modal.css

@@ -1,5 +1,15 @@
 
 
+.modalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-bottom: 1px solid var(--color-border-p2);
+  flex: 0, 0, 42px;
+  min-height: var(--control-min-size-touch);
+}
+
 .modalRoot {
   position: absolute;
   display: flex;
@@ -8,9 +18,17 @@
   left: 0;
   width: 100%;
   height: 100%;
-  pointer-events: auto;
+  pointer-events: none;
   background-color: transparent;
   transition: background-color 0.3s;
+  overflow: visible;
+  border: 0;
+
+  &:focus {
+    & .modalHeader {
+      border-bottom: 1px solid var(--primary);
+    }
+  }
 }
 
 .modal {
@@ -28,16 +46,7 @@
   transform: translateY(20px);
   opacity: 0;
   transition: transform 0.35s, opacity 0.1s;
-}
-
-.modalHeader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-bottom: 1px solid var(--color-border-p2);
-  flex: 0, 0, 42px;
-  min-height: var(--control-min-size-touch);
+  pointer-events: all;
 }
 
 .modalFooter {