@linzjs/lui 22.7.0 → 22.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [22.9.0](https://github.com/linz/lui/compare/v22.8.0...v22.9.0) (2025-02-26)
+
+
+### Features
+
+* Adding an accessible name to the modal via headingText making it easier to write tests for modals ([#1198](https://github.com/linz/lui/issues/1198)) ([d0a0441](https://github.com/linz/lui/commit/d0a04418f1915274cfddd7a3657d479c3b046bd5))
+
+# [22.8.0](https://github.com/linz/lui/compare/v22.7.0...v22.8.0) (2025-02-25)
+
+
+### Features
+
+* upgrade git hub actions ([#1182](https://github.com/linz/lui/issues/1182)) ([6ffefc2](https://github.com/linz/lui/commit/6ffefc2dbdcb84a4d07a42d087ceb59960f05f7f))
+
 # [22.7.0](https://github.com/linz/lui/compare/v22.6.0...v22.7.0) (2025-02-19)
 
 

package/dist/components/common/Hooks.d.ts

@@ -14,3 +14,7 @@ export declare const useEscapeFunction: (onEscape: (e: KeyboardEvent) => void |
  * @return a react ref which can be bound to an html element
  */
 export declare const usePageClickFunction: <H extends Element>(onClickInsideArg: (event: MouseEvent) => void, onClickOutsideArg: (event: MouseEvent) => void) => import("react").RefObject<H>;
+/**
+ * Provides a stable ID across renders, can be replaced in react 18+ by native implementation
+ */
+export declare function useId(): string;

package/dist/index.js

@@ -39925,7 +39925,17 @@ var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
         };
     }, [elementRef, onClickInside, onClickOutside]);
     return elementRef;
-};
+};
+/**
+ * Provides a stable ID across renders, can be replaced in react 18+ by native implementation
+ */
+function useId() {
+    var idRef = React.useRef('');
+    if (idRef.current === '') {
+        idRef.current = v4();
+    }
+    return idRef.current;
+}
 
 var sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 var buildHideClassDict = function (_a) {
@@ -42299,6 +42309,8 @@ var _a;
 var LuiModalV2 = function (props) {
     var _a;
     var modalRef = React.useRef(null);
+    var rootId = useId();
+    var headingTextId = "".concat(rootId, "_headingText");
     var handleClickOutside = React.useCallback(function () { var _a; return props.shouldCloseOnOverlayClick && ((_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props)); }, [props.shouldCloseOnEsc, props.onClose]);
     useClickedOutsideElement(modalRef, handleClickOutside);
     var handleEsc = React.useCallback(function (e) {
@@ -42325,7 +42337,7 @@ var LuiModalV2 = function (props) {
         // disble the `shouldClose` props as we handle them ourselves
         shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', appElement: document.getElementById('root'), 
         // required to prevent warnings that are not applicable in real usage
-        ariaHideApp: !isTest, parentSelector: props.appendToElement },
+        ariaHideApp: !isTest, parentSelector: props.appendToElement, aria: { labelledby: props.headingText ? headingTextId : undefined } },
         React__default["default"].createElement("div", { ref: function (el) {
                 modalRef.current = el;
                 handleAutoFocus(el);
@@ -42334,7 +42346,7 @@ var LuiModalV2 = function (props) {
                 props.isLoading && (React__default["default"].createElement(LuiMiniSpinner, { size: 20, divProps: { className: 'lui-modal-v2-header-spinner' } })),
                 showHeadingIcon && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-icon" },
                     React__default["default"].createElement(LuiIcon, __assign({ size: "md", name: "", alt: "Help" }, props.headingIcon, { className: clsx('', (_a = props.headingIcon) === null || _a === void 0 ? void 0 : _a.className) })))),
-                props.headingText && (React__default["default"].createElement("h2", { className: "lui-modal-v2-header-title" }, props.headingText)),
+                props.headingText && (React__default["default"].createElement("h2", { id: headingTextId, className: "lui-modal-v2-header-title" }, props.headingText)),
                 showButtons && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-buttons" },
                     showHelpButton && React__default["default"].createElement(HelpButton, { helpLink: props.helpLink }),
                     showCloseButton && React__default["default"].createElement(CloseButton, { onClose: props.onClose })))),