terra-abstract-modal - npm Package Compare versions

Comparing version 3.43.0 to 3.43.1

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 3.43.1 - (August 4, 2023)
+
+  * Changed
+    * Reverted "Focus is now locked within modal content when modal is open for improved keyboard accessibility."
+
 ## 3.43.0 - (July 31, 2023)
@@ -7,0 +12,0 @@

lib/_ModalContent.js

@@ -18,3 +18,2 @@ "use strict";
 var _terraVisuallyHiddenText = _interopRequireDefault(require("terra-visually-hidden-text"));
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _ModalOverlay = _interopRequireDefault(require("./_ModalOverlay"));
@@ -135,6 +134,3 @@ var _inertHelpers = require("./inertHelpers");
     ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
-    as: "div",
-    className: cx('modal-content-focus-trap-container')
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: modalContainerClassName,
@@ -166,3 +162,3 @@ ref: setModalFocusElementRef,
     });
-  })))));
+  }))));
 });
@@ -169,0 +165,0 @@ ModalContent.propTypes = propTypes;

package.json

 {
   "name": "terra-abstract-modal",
   "main": "lib/AbstractModal.js",
-  "version": "3.43.0",
+  "version": "3.43.1",
   "description": "The abstract modal is a structural component that provides the ability to display portal'd content in a layer above the app.",
@@ -35,3 +35,2 @@ "repository": {
     "prop-types": "^15.5.8",
-    "react-focus-lock": "^2.0.0",
     "react-portal": "^4.1.2",
@@ -58,3 +57,3 @@ "terra-theme-context": "^1.8.0",
   },
-  "gitHead": "5b5d493c6e6b122e18c13e670b85e2abdb1c76f5"
+  "gitHead": "9626647b5fbd53d8f00d367b0aa9a17703239541"
 }

src/_ModalContent.jsx

@@ -8,3 +8,2 @@ import React, { forwardRef, useEffect } from 'react';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
-import FocusLock from 'react-focus-lock';
 import ModalOverlay from './_ModalOverlay';
@@ -149,37 +148,29 @@ import { hideModalDomUpdates, showModalDomUpdates } from './inertHelpers';
       >
-        {
-          /**
-           * Use react-focus-lock library due to inability of focus-trap-react to handle children
-           * within a React Portal: https://github.com/focus-trap/focus-trap-react/issues/27.
-           */
-        }
-        <FocusLock as="div" className={cx('modal-content-focus-trap-container')}>
-          <div className={modalContainerClassName} ref={setModalFocusElementRef} data-terra-abstract-modal-begin tabIndex="-1">
-            <FormattedMessage id="Terra.AbstractModal.BeginModalDialog">
-              {text => {
-                // In the latest version of react-intl this param is an array, when previous versions it was a string.
-                let useText = text;
-                if (Array.isArray(text)) {
-                  useText = text.join('');
-                }
-                return (
-                  <VisuallyHiddenText text={useText} />
-                );
-              }}
-            </FormattedMessage>
-            {children}
-            <FormattedMessage id="Terra.AbstractModal.EndModalDialog">
-              {text => {
-                // In the latest version of react-intl this param is an array, when previous versions it was a string.
-                let useText = text;
-                if (Array.isArray(text)) {
-                  useText = text.join('');
-                }
-                return (
-                  <VisuallyHiddenText text={useText} />
-                );
-              }}
-            </FormattedMessage>
-          </div>
-        </FocusLock>
+        <div className={modalContainerClassName} ref={setModalFocusElementRef} data-terra-abstract-modal-begin tabIndex="-1">
+          <FormattedMessage id="Terra.AbstractModal.BeginModalDialog">
+            {text => {
+              // In the latest version of react-intl this param is an array, when previous versions it was a string.
+              let useText = text;
+              if (Array.isArray(text)) {
+                useText = text.join('');
+              }
+              return (
+                <VisuallyHiddenText text={useText} />
+              );
+            }}
+          </FormattedMessage>
+          {children}
+          <FormattedMessage id="Terra.AbstractModal.EndModalDialog">
+            {text => {
+              // In the latest version of react-intl this param is an array, when previous versions it was a string.
+              let useText = text;
+              if (Array.isArray(text)) {
+                useText = text.join('');
+              }
+              return (
+                <VisuallyHiddenText text={useText} />
+              );
+            }}
+          </FormattedMessage>
+        </div>
       </div>
@@ -186,0 +177,0 @@ </React.Fragment>

tests/wdio/abstract-modal-spec.js

@@ -91,3 +91,3 @@ const selector = '#root';
     describe('Focusable Content', () => {
-      before(() => {
+      it('clicks to open modal', () => {
         browser.url('/raw/tests/terra-abstract-modal/abstract-modal/default-abstract-modal');
@@ -108,16 +108,27 @@ $('button').click();
 
-      it('prevents shift focus forward out of modal dialog', () => {
+      it('shifts focus forward away from the modal dialog', () => {
         browser.keys(['Tab']);
-        expect($('#modal-button').isFocused()).toBeTruthy();
+        expect($('#modal-button').isFocused()).toBeFalsy();
         expect($('#modal-open-button').isFocused()).toBeFalsy();
         expect($('[aria-modal="true"][role="dialog"]').isFocused()).toBeFalsy();
-        Terra.validates.element('focus trapped from moving forward', { selector });
+        Terra.validates.element('focused shifted outside the end of the modal', { selector });
       });
 
-      it('prevents shift focus back out of modal dialog', () => {
+      it('shifts focus back onto interactive elements within the modal', () => {
         browser.keys(['Shift', 'Tab']);
         expect($('#modal-button').isFocused()).toBeTruthy();
+        Terra.validates.element('modal button focused again', { selector });
+      });
+
+      it('shifts focus back onto the modal dialog', () => {
+        browser.keys(['Shift', 'Tab']);
+        expect($('#modal-button').isFocused()).toBeFalsy();
         expect($('#modal-open-button').isFocused()).toBeFalsy();
+        expect($('[aria-modal="true"][role="dialog"]').isFocused()).toBeTruthy();
+        Terra.validates.element('focused shifted back to the modal', { selector });
+      });
+
+      it('shifts focus backwards away from the modal dialog', () => {
+        browser.keys(['Shift', 'Tab']);
         expect($('[aria-modal="true"][role="dialog"]').isFocused()).toBeFalsy();
-        Terra.validates.element('focus trapped from moving back', { selector });
       });
@@ -124,0 +135,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

11

decreased by-8.33%

Worsened metrics

Total package byte prevSize

168723

decreased by-0.1%

Lines of code

2596

decreased by-0.15%

Dependency changes

• - Removedreact-focus-lock@^2.0.0

• - Removed@babel/runtime@7.26.0(transitive)

• - Removeddetect-node-es@1.1.0(transitive)

• - Removedfocus-lock@1.3.5(transitive)

• - Removedreact-clientside-effect@1.2.6(transitive)

• - Removedreact-focus-lock@2.13.2(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removeduse-callback-ref@1.3.2(transitive)

• - Removeduse-sidecar@1.1.2(transitive)