@highlight-ui/dialog - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

dist/cjs/index.js

@@ -49,3 +49,3 @@ 'use strict';
 
-var styles$1 = {"dialog":"Dialog-module__2icvnh15__v2-0-7","size-small":"Dialog-module__3spVEVua__v2-0-7","size-medium":"Dialog-module__-zWxw4HX__v2-0-7","size-large":"Dialog-module__3wZ2NPV0__v2-0-7","header":"Dialog-module__2wAUH40a__v2-0-7","headerShadowed":"Dialog-module__xODFOi1M__v2-0-7","headerTitle":"Dialog-module__1lxoaZF6__v2-0-7","closeButton":"Dialog-module__2l9SSdo___v2-0-7","body":"Dialog-module__1bPY4avA__v2-0-7","footer":"Dialog-module__3o8NTS6m__v2-0-7","footerShadowed":"Dialog-module__1s03rY8s__v2-0-7","footerAction":"Dialog-module__2YsxojU___v2-0-7"};
+var styles$1 = {"dialog":"Dialog-module__2icvnh15__v2-0-8","size-small":"Dialog-module__3spVEVua__v2-0-8","size-medium":"Dialog-module__-zWxw4HX__v2-0-8","size-large":"Dialog-module__3wZ2NPV0__v2-0-8","header":"Dialog-module__2wAUH40a__v2-0-8","headerShadowed":"Dialog-module__xODFOi1M__v2-0-8","headerTitle":"Dialog-module__1lxoaZF6__v2-0-8","closeButton":"Dialog-module__2l9SSdo___v2-0-8","body":"Dialog-module__1bPY4avA__v2-0-8","footer":"Dialog-module__3o8NTS6m__v2-0-8","footerShadowed":"Dialog-module__1s03rY8s__v2-0-8","footerAction":"Dialog-module__2YsxojU___v2-0-8"};
 
@@ -313,3 +313,3 @@ function useEventListener(t,r,i,o){void 0===i&&(i=global),void 0===o&&(o={});var c=React.useRef(),u=o.capture,a=o.passive,v=o.once;React.useEffect(function(){c.current=r;},[r]),React.useEffect(function(){if(i&&i.addEventListener){var e=function(e){return c.current(e)},n={capture:u,passive:a,once:v};return i.addEventListener(t,e,n),function(){i.removeEventListener(t,e,n);}}},[t,i,u,a,v]);}
 
-var styles = {"modal":"Modal-module__i5Pbh60m__v2-0-7","modalBackdrop":"Modal-module__ZVIwEMrU__v2-0-7","modalContent":"Modal-module__3UHa_kcB__v2-0-7","scrollLocked":"Modal-module__1T2Qjbem__v2-0-7"};
+var styles = {"modal":"Modal-module__i5Pbh60m__v2-0-8","modalBackdrop":"Modal-module__ZVIwEMrU__v2-0-8","modalContent":"Modal-module__3UHa_kcB__v2-0-8","scrollLocked":"Modal-module__1T2Qjbem__v2-0-8"};
 
@@ -351,8 +351,9 @@ var Modal = function (_a) {
 
+var DEFAULT_LABEL_ID = 'dialog-title';
 var Dialog = function (_a) {
     var _b, _c;
-    var metadata = _a.metadata, children = _a.children, className = _a.className, onRequestToClose = _a.onRequestToClose, onClose = _a.onClose, onOpen = _a.onOpen, open = _a.open, title = _a.title, confirmButton = _a.confirmButton, cancelButton = _a.cancelButton, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'small' : _e;
-    var _f = React.useState(), cancelButtonElement = _f[0], setCancelButtonElement = _f[1];
-    var _g = React.useState(false), topShadow = _g[0], setTopShadow = _g[1];
-    var _h = React.useState(false), bottomShadow = _h[0], setBottomShadow = _h[1];
+    var metadata = _a.metadata, children = _a.children, className = _a.className, onRequestToClose = _a.onRequestToClose, onClose = _a.onClose, onOpen = _a.onOpen, open = _a.open, title = _a.title, _d = _a.labelledBy, labelledBy = _d === void 0 ? DEFAULT_LABEL_ID : _d, describedBy = _a.describedBy, confirmButton = _a.confirmButton, cancelButton = _a.cancelButton, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.size, size = _f === void 0 ? 'small' : _f;
+    var _g = React.useState(), cancelButtonElement = _g[0], setCancelButtonElement = _g[1];
+    var _h = React.useState(false), topShadow = _h[0], setTopShadow = _h[1];
+    var _j = React.useState(false), bottomShadow = _j[0], setBottomShadow = _j[1];
     var setElement = utilsHooks.useScrollObserver(function (percent) {
@@ -363,8 +364,9 @@ setTopShadow(percent > 0);
     return (React__default['default'].createElement(Modal, { metadata: metadata, className: className, initialFocusElement: cancelButtonElement !== null && cancelButtonElement !== void 0 ? cancelButtonElement : undefined, onClose: onClose, onOpen: onOpen, open: open, onRequestToClose: onRequestToClose },
-        React__default['default'].createElement("section", { role: "dialog", className: classnames__default['default'](styles$1.dialog, styles$1["size-" + size]) },
+        React__default['default'].createElement("section", { role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: classnames__default['default'](styles$1.dialog, styles$1["size-" + size]) },
             React__default['default'].createElement("header", { className: classnames__default['default'](styles$1.header, (_b = {},
                     _b[styles$1.headerShadowed] = topShadow,
                     _b)) },
-                React__default['default'].createElement(typography.Typography, { component: "span", variant: "heading-3", className: styles$1.headerTitle }, title),
-                React__default['default'].createElement("button", { type: "button", title: "close", onClick: onRequestToClose, className: styles$1.closeButton },
+                React__default['default'].createElement(typography.Typography, { component: "span", variant: "heading-3", className: styles$1.headerTitle, id: labelledBy }, title),
+                React__default['default'].createElement("button", { type: "button", title: "close", onClick: onRequestToClose, className: styles$1.closeButton, "aria-label": "Close Modal" // TODO: This needs to be translated
+                 },
                     React__default['default'].createElement(icon.Icon, { name: "times", type: "solid" }))),
@@ -371,0 +373,0 @@ React__default['default'].createElement("div", { ref: setElement, className: styles$1.body }, children),

dist/cjs/src/Dialog.d.ts

@@ -15,4 +15,8 @@ /// <reference types="react" />
 export declare type DialogProps = ModalProps & {
-    /** Sets the title of the dialog */
+    /** Sets the title of the dialog  */
     title: string;
+    /** Sets the reference to the aria-labelledby attribute. It'll add a default value if not present. */
+    labelledBy?: string;
+    /** Sets the reference to the aria-describedby attribute */
+    describedBy?: string;
     /** `default` is used for regular interactions and `destructive` is usually for destructing (e.g. deletion) */
@@ -27,3 +31,3 @@ variant?: 'default' | 'destructive';
 };
-declare const Dialog: ({ metadata, children, className, onRequestToClose, onClose, onOpen, open, title, confirmButton, cancelButton, variant, size, }: DialogProps) => JSX.Element;
+declare const Dialog: ({ metadata, children, className, onRequestToClose, onClose, onOpen, open, title, labelledBy, describedBy, confirmButton, cancelButton, variant, size, }: DialogProps) => JSX.Element;
 export default Dialog;

dist/esm/index.js

@@ -38,3 +38,3 @@ import React, { useRef, useEffect, useCallback, useState } from 'react';
 
-var styles$1 = {"dialog":"Dialog-module__2icvnh15__v2-0-7","size-small":"Dialog-module__3spVEVua__v2-0-7","size-medium":"Dialog-module__-zWxw4HX__v2-0-7","size-large":"Dialog-module__3wZ2NPV0__v2-0-7","header":"Dialog-module__2wAUH40a__v2-0-7","headerShadowed":"Dialog-module__xODFOi1M__v2-0-7","headerTitle":"Dialog-module__1lxoaZF6__v2-0-7","closeButton":"Dialog-module__2l9SSdo___v2-0-7","body":"Dialog-module__1bPY4avA__v2-0-7","footer":"Dialog-module__3o8NTS6m__v2-0-7","footerShadowed":"Dialog-module__1s03rY8s__v2-0-7","footerAction":"Dialog-module__2YsxojU___v2-0-7"};
+var styles$1 = {"dialog":"Dialog-module__2icvnh15__v2-0-8","size-small":"Dialog-module__3spVEVua__v2-0-8","size-medium":"Dialog-module__-zWxw4HX__v2-0-8","size-large":"Dialog-module__3wZ2NPV0__v2-0-8","header":"Dialog-module__2wAUH40a__v2-0-8","headerShadowed":"Dialog-module__xODFOi1M__v2-0-8","headerTitle":"Dialog-module__1lxoaZF6__v2-0-8","closeButton":"Dialog-module__2l9SSdo___v2-0-8","body":"Dialog-module__1bPY4avA__v2-0-8","footer":"Dialog-module__3o8NTS6m__v2-0-8","footerShadowed":"Dialog-module__1s03rY8s__v2-0-8","footerAction":"Dialog-module__2YsxojU___v2-0-8"};
 
@@ -302,3 +302,3 @@ function useEventListener(t,r,i,o){void 0===i&&(i=global),void 0===o&&(o={});var c=useRef(),u=o.capture,a=o.passive,v=o.once;useEffect(function(){c.current=r;},[r]),useEffect(function(){if(i&&i.addEventListener){var e=function(e){return c.current(e)},n={capture:u,passive:a,once:v};return i.addEventListener(t,e,n),function(){i.removeEventListener(t,e,n);}}},[t,i,u,a,v]);}
 
-var styles = {"modal":"Modal-module__i5Pbh60m__v2-0-7","modalBackdrop":"Modal-module__ZVIwEMrU__v2-0-7","modalContent":"Modal-module__3UHa_kcB__v2-0-7","scrollLocked":"Modal-module__1T2Qjbem__v2-0-7"};
+var styles = {"modal":"Modal-module__i5Pbh60m__v2-0-8","modalBackdrop":"Modal-module__ZVIwEMrU__v2-0-8","modalContent":"Modal-module__3UHa_kcB__v2-0-8","scrollLocked":"Modal-module__1T2Qjbem__v2-0-8"};
 
@@ -340,8 +340,9 @@ var Modal = function (_a) {
 
+var DEFAULT_LABEL_ID = 'dialog-title';
 var Dialog = function (_a) {
     var _b, _c;
-    var metadata = _a.metadata, children = _a.children, className = _a.className, onRequestToClose = _a.onRequestToClose, onClose = _a.onClose, onOpen = _a.onOpen, open = _a.open, title = _a.title, confirmButton = _a.confirmButton, cancelButton = _a.cancelButton, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, _e = _a.size, size = _e === void 0 ? 'small' : _e;
-    var _f = useState(), cancelButtonElement = _f[0], setCancelButtonElement = _f[1];
-    var _g = useState(false), topShadow = _g[0], setTopShadow = _g[1];
-    var _h = useState(false), bottomShadow = _h[0], setBottomShadow = _h[1];
+    var metadata = _a.metadata, children = _a.children, className = _a.className, onRequestToClose = _a.onRequestToClose, onClose = _a.onClose, onOpen = _a.onOpen, open = _a.open, title = _a.title, _d = _a.labelledBy, labelledBy = _d === void 0 ? DEFAULT_LABEL_ID : _d, describedBy = _a.describedBy, confirmButton = _a.confirmButton, cancelButton = _a.cancelButton, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.size, size = _f === void 0 ? 'small' : _f;
+    var _g = useState(), cancelButtonElement = _g[0], setCancelButtonElement = _g[1];
+    var _h = useState(false), topShadow = _h[0], setTopShadow = _h[1];
+    var _j = useState(false), bottomShadow = _j[0], setBottomShadow = _j[1];
     var setElement = useScrollObserver(function (percent) {
@@ -352,8 +353,9 @@ setTopShadow(percent > 0);
     return (React.createElement(Modal, { metadata: metadata, className: className, initialFocusElement: cancelButtonElement !== null && cancelButtonElement !== void 0 ? cancelButtonElement : undefined, onClose: onClose, onOpen: onOpen, open: open, onRequestToClose: onRequestToClose },
-        React.createElement("section", { role: "dialog", className: classnames(styles$1.dialog, styles$1["size-" + size]) },
+        React.createElement("section", { role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: classnames(styles$1.dialog, styles$1["size-" + size]) },
             React.createElement("header", { className: classnames(styles$1.header, (_b = {},
                     _b[styles$1.headerShadowed] = topShadow,
                     _b)) },
-                React.createElement(Typography, { component: "span", variant: "heading-3", className: styles$1.headerTitle }, title),
-                React.createElement("button", { type: "button", title: "close", onClick: onRequestToClose, className: styles$1.closeButton },
+                React.createElement(Typography, { component: "span", variant: "heading-3", className: styles$1.headerTitle, id: labelledBy }, title),
+                React.createElement("button", { type: "button", title: "close", onClick: onRequestToClose, className: styles$1.closeButton, "aria-label": "Close Modal" // TODO: This needs to be translated
+                 },
                     React.createElement(Icon, { name: "times", type: "solid" }))),
@@ -360,0 +362,0 @@ React.createElement("div", { ref: setElement, className: styles$1.body }, children),

dist/esm/src/Dialog.d.ts

@@ -15,4 +15,8 @@ /// <reference types="react" />
 export declare type DialogProps = ModalProps & {
-    /** Sets the title of the dialog */
+    /** Sets the title of the dialog  */
     title: string;
+    /** Sets the reference to the aria-labelledby attribute. It'll add a default value if not present. */
+    labelledBy?: string;
+    /** Sets the reference to the aria-describedby attribute */
+    describedBy?: string;
     /** `default` is used for regular interactions and `destructive` is usually for destructing (e.g. deletion) */
@@ -27,3 +31,3 @@ variant?: 'default' | 'destructive';
 };
-declare const Dialog: ({ metadata, children, className, onRequestToClose, onClose, onOpen, open, title, confirmButton, cancelButton, variant, size, }: DialogProps) => JSX.Element;
+declare const Dialog: ({ metadata, children, className, onRequestToClose, onClose, onOpen, open, title, labelledBy, describedBy, confirmButton, cancelButton, variant, size, }: DialogProps) => JSX.Element;
 export default Dialog;

package.json

 {
   "name": "@highlight-ui/dialog",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "author": "PPU",
@@ -53,3 +53,3 @@ "main": "dist/cjs/index.js",
   },
-  "gitHead": "5766139146372487864c267f89740929ca993c50"
+  "gitHead": "f9663e64f06918aecee249878cf5306eac0cc145"
 }

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

Total package byte prevSize

125671

increased by2.05%

Lines of code

959

increased by1.27%

No dependency changes