orcs-design-system 3.3.73 → 3.3.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/Modal/index.js +24 -2
- package/es/index.js +1 -0
- package/package.json +1 -1
|
@@ -74,6 +74,7 @@ const Modal = _ref => {
|
|
|
74
74
|
const [lastActiveElement, setLastActiveElement] = useState(null);
|
|
75
75
|
const [isSelectingText, setIsSelectingText] = useState(false);
|
|
76
76
|
const isSelectingTextRef = useRef(false);
|
|
77
|
+
const closeButtonRef = useRef(null);
|
|
77
78
|
const ariaLabel = useMemo(() => {
|
|
78
79
|
if (restProps.ariaLabel) {
|
|
79
80
|
return restProps.ariaLabel;
|
|
@@ -156,7 +157,13 @@ const Modal = _ref => {
|
|
|
156
157
|
...restProps,
|
|
157
158
|
children: visible && /*#__PURE__*/_jsx(FocusTrap, {
|
|
158
159
|
focusTrapOptions: {
|
|
159
|
-
onDeactivate: onClose
|
|
160
|
+
onDeactivate: onClose,
|
|
161
|
+
// Use initialFocus to point to close button, which is always present
|
|
162
|
+
// This ensures FocusTrap has a valid focus target from the start, preventing errors
|
|
163
|
+
// in test environments where content might not be fully rendered
|
|
164
|
+
initialFocus: () => closeButtonRef.current || document.querySelector(".modal-close"),
|
|
165
|
+
// Use fallbackFocus as backup in case initialFocus fails
|
|
166
|
+
fallbackFocus: () => closeButtonRef.current || document.querySelector(".modal-close")
|
|
160
167
|
},
|
|
161
168
|
children: /*#__PURE__*/_jsx("div", {
|
|
162
169
|
id: "modal",
|
|
@@ -175,8 +182,22 @@ const Modal = _ref => {
|
|
|
175
182
|
bg: "white",
|
|
176
183
|
p: "r",
|
|
177
184
|
id: modalID,
|
|
178
|
-
children: [
|
|
185
|
+
children: [/*#__PURE__*/_jsx("input", {
|
|
186
|
+
type: "text",
|
|
187
|
+
tabIndex: 0,
|
|
188
|
+
"aria-hidden": "true",
|
|
189
|
+
style: {
|
|
190
|
+
position: "absolute",
|
|
191
|
+
left: "-9999px",
|
|
192
|
+
width: "1px",
|
|
193
|
+
height: "1px",
|
|
194
|
+
opacity: 0,
|
|
195
|
+
pointerEvents: "none"
|
|
196
|
+
},
|
|
197
|
+
readOnly: true
|
|
198
|
+
}), headerContent ? /*#__PURE__*/_jsxs(HeaderContent, {
|
|
179
199
|
children: [/*#__PURE__*/_jsx(CloseButton, {
|
|
200
|
+
ref: closeButtonRef,
|
|
180
201
|
onClick: onClose,
|
|
181
202
|
className: "modal-close",
|
|
182
203
|
small: true,
|
|
@@ -193,6 +214,7 @@ const Modal = _ref => {
|
|
|
193
214
|
children: headerContent
|
|
194
215
|
})]
|
|
195
216
|
}) : /*#__PURE__*/_jsx(CloseButton, {
|
|
217
|
+
ref: closeButtonRef,
|
|
196
218
|
onClick: onClose,
|
|
197
219
|
className: "modal-close",
|
|
198
220
|
small: true,
|
package/es/index.js
CHANGED
|
@@ -40,6 +40,7 @@ export { default as StatusDot } from "./components/StatusDot";
|
|
|
40
40
|
export { default as StyledLink, styleLink } from "./components/StyledLink";
|
|
41
41
|
export { default as Table } from "./components/Table";
|
|
42
42
|
export { default as Tabs } from "./components/Tabs";
|
|
43
|
+
/** @deprecated Use Tabs component instead. TabsAlt will be removed in a future version. */
|
|
43
44
|
export { default as TabsAlt } from "./components/TabsAlt";
|
|
44
45
|
export { default as Tag } from "./components/Tag";
|
|
45
46
|
export { default as TextInput } from "./components/TextInput";
|