@elliemae/ds-accessibility 3.5.0-rc.9 → 3.6.0-next.0
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/dist/cjs/live-region/DSLiveRegion.js +6 -4
- package/dist/cjs/live-region/DSLiveRegion.js.map +2 -2
- package/dist/cjs/live-region/useLiveRegion.js +7 -5
- package/dist/cjs/live-region/useLiveRegion.js.map +2 -2
- package/dist/cjs/skip-to/DSSkipTo.js +6 -4
- package/dist/cjs/skip-to/DSSkipTo.js.map +2 -2
- package/dist/esm/live-region/DSLiveRegion.js +6 -4
- package/dist/esm/live-region/DSLiveRegion.js.map +2 -2
- package/dist/esm/live-region/useLiveRegion.js +7 -5
- package/dist/esm/live-region/useLiveRegion.js.map +2 -2
- package/dist/esm/skip-to/DSSkipTo.js +6 -4
- package/dist/esm/skip-to/DSSkipTo.js.map +2 -2
- package/package.json +3 -3
@@ -29,8 +29,9 @@ __export(DSLiveRegion_exports, {
|
|
29
29
|
});
|
30
30
|
module.exports = __toCommonJS(DSLiveRegion_exports);
|
31
31
|
var React = __toESM(require("react"));
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
32
33
|
var import_react_dom = __toESM(require("react-dom"));
|
33
|
-
var import_react =
|
34
|
+
var import_react = require("react");
|
34
35
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
35
36
|
var import_styles = require("./styles");
|
36
37
|
var import_propTypes = require("./propTypes");
|
@@ -44,12 +45,13 @@ const DSLiveRegion = (0, import_react.memo)((props) => {
|
|
44
45
|
if (text === "")
|
45
46
|
return null;
|
46
47
|
return import_react_dom.default.createPortal(
|
47
|
-
/* @__PURE__ */
|
48
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, {
|
48
49
|
"aria-atomic": true,
|
49
50
|
id: props.id,
|
50
51
|
role: props.role,
|
51
|
-
"aria-live": props["aria-live"] || "polite"
|
52
|
-
|
52
|
+
"aria-live": props["aria-live"] || "polite",
|
53
|
+
children: text
|
54
|
+
}),
|
53
55
|
props.portal?.current || document.body
|
54
56
|
);
|
55
57
|
});
|
@@ -2,6 +2,6 @@
|
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../src/live-region/DSLiveRegion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
4
|
"sourcesContent": ["import ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { DSLiveRegionT } from './propTypes';\n\nconst DSLiveRegion = memo((props: DSLiveRegionT.Props): JSX.Element | null => {\n const [text, setText] = useState(' ');\n\n useEffect(() => {\n if (props.methods && props.methods.current) {\n props.methods.current.read = setText;\n }\n }, [props.methods]);\n\n if (text === '') return null;\n\n return ReactDOM.createPortal(\n <StyledContainer aria-atomic id={props.id} role={props.role} aria-live={props['aria-live'] || 'polite'}>\n {text}\n </StyledContainer>,\n props.portal?.current || document.body,\n );\n});\n\nDSLiveRegion.propTypes = propTypes;\nDSLiveRegion.displayName = 'DSLiveRegion';\nconst DSLiveRegionWithSchema = describe(DSLiveRegion);\nDSLiveRegionWithSchema.propTypes = propTypes;\n\nexport { DSLiveRegion, DSLiveRegionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqB;AACrB,mBAAiD;AACjD,0BAAyB;AACzB,oBAAgC;AAChC,uBAA0B;AAG1B,MAAM,mBAAe,mBAAK,CAAC,UAAmD;AAC5E,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,GAAG;AAEpC,8BAAU,MAAM;AACd,QAAI,MAAM,WAAW,MAAM,QAAQ,SAAS;AAC1C,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,MAAI,SAAS;AAAI,WAAO;AAExB,SAAO,iBAAAA,QAAS;AAAA,IACd,
|
6
|
-
"names": ["ReactDOM"
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,uBAAqB;AACrB,mBAAiD;AACjD,0BAAyB;AACzB,oBAAgC;AAChC,uBAA0B;AAG1B,MAAM,mBAAe,mBAAK,CAAC,UAAmD;AAC5E,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,GAAG;AAEpC,8BAAU,MAAM;AACd,QAAI,MAAM,WAAW,MAAM,QAAQ,SAAS;AAC1C,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,MAAI,SAAS;AAAI,WAAO;AAExB,SAAO,iBAAAA,QAAS;AAAA,IACd,4CAAC;AAAA,MAAgB,eAAW;AAAA,MAAC,IAAI,MAAM;AAAA,MAAI,MAAM,MAAM;AAAA,MAAM,aAAW,MAAM,gBAAgB;AAAA,MAC3F;AAAA,KACH;AAAA,IACA,MAAM,QAAQ,WAAW,SAAS;AAAA,EACpC;AACF,CAAC;AAED,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,8BAAS,YAAY;AACpD,uBAAuB,YAAY;",
|
6
|
+
"names": ["ReactDOM"]
|
7
7
|
}
|
@@ -29,8 +29,9 @@ __export(useLiveRegion_exports, {
|
|
29
29
|
});
|
30
30
|
module.exports = __toCommonJS(useLiveRegion_exports);
|
31
31
|
var React = __toESM(require("react"));
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
32
33
|
var import_react_dom = __toESM(require("react-dom"));
|
33
|
-
var import_react =
|
34
|
+
var import_react = require("react");
|
34
35
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
35
36
|
var import_uid = require("uid");
|
36
37
|
var import_styles = require("./styles");
|
@@ -80,12 +81,13 @@ const DSLiveRegion = (0, import_react.memo)((props) => {
|
|
80
81
|
if (unsafe_emulateAssertiveNVDA)
|
81
82
|
return null;
|
82
83
|
return import_react_dom.default.createPortal(
|
83
|
-
/* @__PURE__ */
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, {
|
84
85
|
"aria-atomic": true,
|
85
86
|
id,
|
86
87
|
role,
|
87
|
-
"aria-live": ariaLive
|
88
|
-
|
88
|
+
"aria-live": ariaLive,
|
89
|
+
children: internalMessage
|
90
|
+
}),
|
89
91
|
portal?.current || document.body
|
90
92
|
);
|
91
93
|
});
|
@@ -96,7 +98,7 @@ const useLiveRegion = (props) => {
|
|
96
98
|
const read = (0, import_react.useCallback)((message, options) => methods.current.read?.(message, options), []);
|
97
99
|
return (0, import_react.useMemo)(
|
98
100
|
() => ({
|
99
|
-
LiveRegion: () => /* @__PURE__ */
|
101
|
+
LiveRegion: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DSLiveRegion, {
|
100
102
|
methods,
|
101
103
|
id: instanceUID || id,
|
102
104
|
portal
|
@@ -2,6 +2,6 @@
|
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../src/live-region/useLiveRegion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
4
|
"sourcesContent": ["/* eslint-disable max-nested-callbacks */\nimport ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState, useCallback, useRef, useMemo } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { UseLiveRegionT } from './propTypes';\n\ninterface Options {\n assertive?: boolean;\n unsafe_emulateAssertiveNVDA?: boolean;\n delay?: number;\n}\ninterface Methods {\n read?: (message: string, options: Options) => void;\n}\nexport interface Props {\n methods?: React.MutableRefObject<Methods>;\n id?: string;\n portal?: React.MutableRefObject<HTMLElement>;\n}\n\nconst DSLiveRegion = memo((props: Props): JSX.Element | null => {\n const [internalMessage, setInternalMessage] = useState<string>('');\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const [unsafe_emulateAssertiveNVDA, setUnsafe_emulateAssertiveNVDA] = useState(false);\n const [role, setRole] = useState<undefined | string>(undefined);\n const [ariaLive, setAriaLive] = useState('polite');\n const { id, portal } = props || {};\n\n const reset = useCallback(() => {\n setInternalMessage('');\n setUnsafe_emulateAssertiveNVDA(false);\n setAriaLive('polite');\n setRole(undefined);\n }, []);\n\n const configure = useCallback(\n (message: string, options: Options) => {\n reset();\n setTimeout(() => {\n if (options?.unsafe_emulateAssertiveNVDA) setUnsafe_emulateAssertiveNVDA(true);\n setTimeout(() => {\n if (options?.assertive || options?.unsafe_emulateAssertiveNVDA) setAriaLive('assertive');\n if (options?.unsafe_emulateAssertiveNVDA) {\n setRole('alert');\n setUnsafe_emulateAssertiveNVDA(false);\n }\n if (options?.delay) {\n setTimeout(() => {\n setInternalMessage(message);\n }, options?.delay);\n } else {\n setInternalMessage(message);\n }\n });\n });\n },\n [reset],\n );\n\n useEffect(() => {\n if (props.methods) {\n props.methods.current.read = configure;\n }\n }, [configure, props.methods]);\n\n if (unsafe_emulateAssertiveNVDA) return null;\n\n return ReactDOM.createPortal(\n <StyledContainer aria-atomic id={id} role={role} aria-live={ariaLive}>\n {internalMessage}\n </StyledContainer>,\n portal?.current || document.body,\n );\n});\n\nconst useLiveRegion = (props: UseLiveRegionT.Props) => {\n const methods = useRef<Methods>({});\n\n const { id, portal } = props || {};\n\n const instanceUID = useMemo(() => `ds-live-region-${uid(5)}`, []);\n\n const read = useCallback((message: string, options: Options) => methods.current.read?.(message, options), []);\n\n return useMemo(\n () => ({\n LiveRegion: () => <DSLiveRegion methods={methods} id={instanceUID || id} portal={portal} />,\n read,\n }),\n [id, instanceUID, portal, read],\n );\n};\n\nuseLiveRegion.displayName = 'useLiveRegion';\nconst UseLiveRegionWithSchema = describe(useLiveRegion);\nUseLiveRegionWithSchema.propTypes = propTypes;\nexport { useLiveRegion, UseLiveRegionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
6
|
-
"names": ["ReactDOM"
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,uBAAqB;AACrB,mBAA+E;AAC/E,0BAAyB;AACzB,iBAAoB;AACpB,oBAAgC;AAChC,uBAA0B;AAiB1B,MAAM,mBAAe,mBAAK,CAAC,UAAqC;AAC9D,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAiB,EAAE;AAEjE,QAAM,CAAC,6BAA6B,8BAA8B,QAAI,uBAAS,KAAK;AACpF,QAAM,CAAC,MAAM,OAAO,QAAI,uBAA6B,MAAS;AAC9D,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,QAAQ;AACjD,QAAM,EAAE,IAAI,OAAO,IAAI,SAAS,CAAC;AAEjC,QAAM,YAAQ,0BAAY,MAAM;AAC9B,uBAAmB,EAAE;AACrB,mCAA+B,KAAK;AACpC,gBAAY,QAAQ;AACpB,YAAQ,MAAS;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAY;AAAA,IAChB,CAAC,SAAiB,YAAqB;AACrC,YAAM;AACN,iBAAW,MAAM;AACf,YAAI,SAAS;AAA6B,yCAA+B,IAAI;AAC7E,mBAAW,MAAM;AACf,cAAI,SAAS,aAAa,SAAS;AAA6B,wBAAY,WAAW;AACvF,cAAI,SAAS,6BAA6B;AACxC,oBAAQ,OAAO;AACf,2CAA+B,KAAK;AAAA,UACtC;AACA,cAAI,SAAS,OAAO;AAClB,uBAAW,MAAM;AACf,iCAAmB,OAAO;AAAA,YAC5B,GAAG,SAAS,KAAK;AAAA,UACnB,OAAO;AACL,+BAAmB,OAAO;AAAA,UAC5B;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,8BAAU,MAAM;AACd,QAAI,MAAM,SAAS;AACjB,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,OAAO,CAAC;AAE7B,MAAI;AAA6B,WAAO;AAExC,SAAO,iBAAAA,QAAS;AAAA,IACd,4CAAC;AAAA,MAAgB,eAAW;AAAA,MAAC;AAAA,MAAQ;AAAA,MAAY,aAAW;AAAA,MACzD;AAAA,KACH;AAAA,IACA,QAAQ,WAAW,SAAS;AAAA,EAC9B;AACF,CAAC;AAED,MAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,cAAU,qBAAgB,CAAC,CAAC;AAElC,QAAM,EAAE,IAAI,OAAO,IAAI,SAAS,CAAC;AAEjC,QAAM,kBAAc,sBAAQ,MAAM,sBAAkB,gBAAI,CAAC,KAAK,CAAC,CAAC;AAEhE,QAAM,WAAO,0BAAY,CAAC,SAAiB,YAAqB,QAAQ,QAAQ,OAAO,SAAS,OAAO,GAAG,CAAC,CAAC;AAE5G,aAAO;AAAA,IACL,OAAO;AAAA,MACL,YAAY,MAAM,4CAAC;AAAA,QAAa;AAAA,QAAkB,IAAI,eAAe;AAAA,QAAI;AAAA,OAAgB;AAAA,MACzF;AAAA,IACF;AAAA,IACA,CAAC,IAAI,aAAa,QAAQ,IAAI;AAAA,EAChC;AACF;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
6
|
+
"names": ["ReactDOM"]
|
7
7
|
}
|
@@ -29,7 +29,8 @@ __export(DSSkipTo_exports, {
|
|
29
29
|
});
|
30
30
|
module.exports = __toCommonJS(DSSkipTo_exports);
|
31
31
|
var React = __toESM(require("react"));
|
32
|
-
var
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
33
|
+
var import_react = require("react");
|
33
34
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
34
35
|
var import_propTypes = require("./propTypes");
|
35
36
|
var import_styles = require("./styles");
|
@@ -38,9 +39,10 @@ const DSSkipTo = (props) => {
|
|
38
39
|
const handleOnClick = (0, import_react.useCallback)(() => {
|
39
40
|
document.getElementById(goTo).focus();
|
40
41
|
}, [goTo]);
|
41
|
-
return /* @__PURE__ */
|
42
|
-
onClick: handleOnClick
|
43
|
-
|
42
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledButton, {
|
43
|
+
onClick: handleOnClick,
|
44
|
+
children: message
|
45
|
+
});
|
44
46
|
};
|
45
47
|
DSSkipTo.propTypes = import_propTypes.propTypes;
|
46
48
|
DSSkipTo.displayName = "DSSkipTo";
|
@@ -2,6 +2,6 @@
|
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../src/skip-to/DSSkipTo.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
4
|
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport type { DSSkipToPropsT as Props } from './index.d';\nimport { StyledButton } from './styles';\n\nconst DSSkipTo = (props: Props): JSX.Element => {\n const { goTo, message = 'Skip to main content' } = props;\n const handleOnClick = useCallback(() => {\n (document.getElementById(goTo) as HTMLElement).focus();\n }, [goTo]);\n return <StyledButton onClick={handleOnClick}>{message}</StyledButton>;\n};\n\nDSSkipTo.propTypes = propTypes;\nDSSkipTo.displayName = 'DSSkipTo';\nconst DSSkipToWithSchema = describe(DSSkipTo);\nDSSkipToWithSchema.propTypes = propTypes;\n\nexport { DSSkipTo, DSSkipToWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,0BAAyB;AACzB,uBAA0B;AAE1B,oBAA6B;AAE7B,MAAM,WAAW,CAAC,UAA8B;AAC9C,QAAM,EAAE,MAAM,UAAU,uBAAuB,IAAI;AACnD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,IAAC,SAAS,eAAe,IAAI,EAAkB,MAAM;AAAA,EACvD,GAAG,CAAC,IAAI,CAAC;AACT,SAAO,
|
6
|
-
"names": [
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAmC;AACnC,0BAAyB;AACzB,uBAA0B;AAE1B,oBAA6B;AAE7B,MAAM,WAAW,CAAC,UAA8B;AAC9C,QAAM,EAAE,MAAM,UAAU,uBAAuB,IAAI;AACnD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,IAAC,SAAS,eAAe,IAAI,EAAkB,MAAM;AAAA,EACvD,GAAG,CAAC,IAAI,CAAC;AACT,SAAO,4CAAC;AAAA,IAAa,SAAS;AAAA,IAAgB;AAAA,GAAQ;AACxD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
6
|
+
"names": []
|
7
7
|
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import * as React from "react";
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
2
3
|
import ReactDOM from "react-dom";
|
3
|
-
import
|
4
|
+
import { memo, useEffect, useState } from "react";
|
4
5
|
import { describe } from "@elliemae/ds-utilities";
|
5
6
|
import { StyledContainer } from "./styles";
|
6
7
|
import { propTypes } from "./propTypes";
|
@@ -14,12 +15,13 @@ const DSLiveRegion = memo((props) => {
|
|
14
15
|
if (text === "")
|
15
16
|
return null;
|
16
17
|
return ReactDOM.createPortal(
|
17
|
-
/* @__PURE__ */
|
18
|
+
/* @__PURE__ */ jsx(StyledContainer, {
|
18
19
|
"aria-atomic": true,
|
19
20
|
id: props.id,
|
20
21
|
role: props.role,
|
21
|
-
"aria-live": props["aria-live"] || "polite"
|
22
|
-
|
22
|
+
"aria-live": props["aria-live"] || "polite",
|
23
|
+
children: text
|
24
|
+
}),
|
23
25
|
props.portal?.current || document.body
|
24
26
|
);
|
25
27
|
});
|
@@ -2,6 +2,6 @@
|
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/live-region/DSLiveRegion.tsx"],
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { DSLiveRegionT } from './propTypes';\n\nconst DSLiveRegion = memo((props: DSLiveRegionT.Props): JSX.Element | null => {\n const [text, setText] = useState(' ');\n\n useEffect(() => {\n if (props.methods && props.methods.current) {\n props.methods.current.read = setText;\n }\n }, [props.methods]);\n\n if (text === '') return null;\n\n return ReactDOM.createPortal(\n <StyledContainer aria-atomic id={props.id} role={props.role} aria-live={props['aria-live'] || 'polite'}>\n {text}\n </StyledContainer>,\n props.portal?.current || document.body,\n );\n});\n\nDSLiveRegion.propTypes = propTypes;\nDSLiveRegion.displayName = 'DSLiveRegion';\nconst DSLiveRegionWithSchema = describe(DSLiveRegion);\nDSLiveRegionWithSchema.propTypes = propTypes;\n\nexport { DSLiveRegion, DSLiveRegionWithSchema };\n"],
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAO,cAAc;AACrB,
|
6
|
-
"names": [
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAO,cAAc;AACrB,SAAgB,MAAM,WAAW,gBAAgB;AACjD,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAG1B,MAAM,eAAe,KAAK,CAAC,UAAmD;AAC5E,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,GAAG;AAEpC,YAAU,MAAM;AACd,QAAI,MAAM,WAAW,MAAM,QAAQ,SAAS;AAC1C,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,MAAI,SAAS;AAAI,WAAO;AAExB,SAAO,SAAS;AAAA,IACd,oBAAC;AAAA,MAAgB,eAAW;AAAA,MAAC,IAAI,MAAM;AAAA,MAAI,MAAM,MAAM;AAAA,MAAM,aAAW,MAAM,gBAAgB;AAAA,MAC3F;AAAA,KACH;AAAA,IACA,MAAM,QAAQ,WAAW,SAAS;AAAA,EACpC;AACF,CAAC;AAED,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
|
6
|
+
"names": []
|
7
7
|
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import * as React from "react";
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
2
3
|
import ReactDOM from "react-dom";
|
3
|
-
import
|
4
|
+
import { memo, useEffect, useState, useCallback, useRef, useMemo } from "react";
|
4
5
|
import { describe } from "@elliemae/ds-utilities";
|
5
6
|
import { uid } from "uid";
|
6
7
|
import { StyledContainer } from "./styles";
|
@@ -50,12 +51,13 @@ const DSLiveRegion = memo((props) => {
|
|
50
51
|
if (unsafe_emulateAssertiveNVDA)
|
51
52
|
return null;
|
52
53
|
return ReactDOM.createPortal(
|
53
|
-
/* @__PURE__ */
|
54
|
+
/* @__PURE__ */ jsx(StyledContainer, {
|
54
55
|
"aria-atomic": true,
|
55
56
|
id,
|
56
57
|
role,
|
57
|
-
"aria-live": ariaLive
|
58
|
-
|
58
|
+
"aria-live": ariaLive,
|
59
|
+
children: internalMessage
|
60
|
+
}),
|
59
61
|
portal?.current || document.body
|
60
62
|
);
|
61
63
|
});
|
@@ -66,7 +68,7 @@ const useLiveRegion = (props) => {
|
|
66
68
|
const read = useCallback((message, options) => methods.current.read?.(message, options), []);
|
67
69
|
return useMemo(
|
68
70
|
() => ({
|
69
|
-
LiveRegion: () => /* @__PURE__ */
|
71
|
+
LiveRegion: () => /* @__PURE__ */ jsx(DSLiveRegion, {
|
70
72
|
methods,
|
71
73
|
id: instanceUID || id,
|
72
74
|
portal
|
@@ -2,6 +2,6 @@
|
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/live-region/useLiveRegion.tsx"],
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-nested-callbacks */\nimport ReactDOM from 'react-dom';\nimport React, { memo, useEffect, useState, useCallback, useRef, useMemo } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { StyledContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport type { UseLiveRegionT } from './propTypes';\n\ninterface Options {\n assertive?: boolean;\n unsafe_emulateAssertiveNVDA?: boolean;\n delay?: number;\n}\ninterface Methods {\n read?: (message: string, options: Options) => void;\n}\nexport interface Props {\n methods?: React.MutableRefObject<Methods>;\n id?: string;\n portal?: React.MutableRefObject<HTMLElement>;\n}\n\nconst DSLiveRegion = memo((props: Props): JSX.Element | null => {\n const [internalMessage, setInternalMessage] = useState<string>('');\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const [unsafe_emulateAssertiveNVDA, setUnsafe_emulateAssertiveNVDA] = useState(false);\n const [role, setRole] = useState<undefined | string>(undefined);\n const [ariaLive, setAriaLive] = useState('polite');\n const { id, portal } = props || {};\n\n const reset = useCallback(() => {\n setInternalMessage('');\n setUnsafe_emulateAssertiveNVDA(false);\n setAriaLive('polite');\n setRole(undefined);\n }, []);\n\n const configure = useCallback(\n (message: string, options: Options) => {\n reset();\n setTimeout(() => {\n if (options?.unsafe_emulateAssertiveNVDA) setUnsafe_emulateAssertiveNVDA(true);\n setTimeout(() => {\n if (options?.assertive || options?.unsafe_emulateAssertiveNVDA) setAriaLive('assertive');\n if (options?.unsafe_emulateAssertiveNVDA) {\n setRole('alert');\n setUnsafe_emulateAssertiveNVDA(false);\n }\n if (options?.delay) {\n setTimeout(() => {\n setInternalMessage(message);\n }, options?.delay);\n } else {\n setInternalMessage(message);\n }\n });\n });\n },\n [reset],\n );\n\n useEffect(() => {\n if (props.methods) {\n props.methods.current.read = configure;\n }\n }, [configure, props.methods]);\n\n if (unsafe_emulateAssertiveNVDA) return null;\n\n return ReactDOM.createPortal(\n <StyledContainer aria-atomic id={id} role={role} aria-live={ariaLive}>\n {internalMessage}\n </StyledContainer>,\n portal?.current || document.body,\n );\n});\n\nconst useLiveRegion = (props: UseLiveRegionT.Props) => {\n const methods = useRef<Methods>({});\n\n const { id, portal } = props || {};\n\n const instanceUID = useMemo(() => `ds-live-region-${uid(5)}`, []);\n\n const read = useCallback((message: string, options: Options) => methods.current.read?.(message, options), []);\n\n return useMemo(\n () => ({\n LiveRegion: () => <DSLiveRegion methods={methods} id={instanceUID || id} portal={portal} />,\n read,\n }),\n [id, instanceUID, portal, read],\n );\n};\n\nuseLiveRegion.displayName = 'useLiveRegion';\nconst UseLiveRegionWithSchema = describe(useLiveRegion);\nUseLiveRegionWithSchema.propTypes = propTypes;\nexport { useLiveRegion, UseLiveRegionWithSchema };\n"],
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
6
|
-
"names": [
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,OAAO,cAAc;AACrB,SAAgB,MAAM,WAAW,UAAU,aAAa,QAAQ,eAAe;AAC/E,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAiB1B,MAAM,eAAe,KAAK,CAAC,UAAqC;AAC9D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAiB,EAAE;AAEjE,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,SAAS,KAAK;AACpF,QAAM,CAAC,MAAM,OAAO,IAAI,SAA6B,MAAS;AAC9D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,QAAQ;AACjD,QAAM,EAAE,IAAI,OAAO,IAAI,SAAS,CAAC;AAEjC,QAAM,QAAQ,YAAY,MAAM;AAC9B,uBAAmB,EAAE;AACrB,mCAA+B,KAAK;AACpC,gBAAY,QAAQ;AACpB,YAAQ,MAAS;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY;AAAA,IAChB,CAAC,SAAiB,YAAqB;AACrC,YAAM;AACN,iBAAW,MAAM;AACf,YAAI,SAAS;AAA6B,yCAA+B,IAAI;AAC7E,mBAAW,MAAM;AACf,cAAI,SAAS,aAAa,SAAS;AAA6B,wBAAY,WAAW;AACvF,cAAI,SAAS,6BAA6B;AACxC,oBAAQ,OAAO;AACf,2CAA+B,KAAK;AAAA,UACtC;AACA,cAAI,SAAS,OAAO;AAClB,uBAAW,MAAM;AACf,iCAAmB,OAAO;AAAA,YAC5B,GAAG,SAAS,KAAK;AAAA,UACnB,OAAO;AACL,+BAAmB,OAAO;AAAA,UAC5B;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,YAAU,MAAM;AACd,QAAI,MAAM,SAAS;AACjB,YAAM,QAAQ,QAAQ,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,OAAO,CAAC;AAE7B,MAAI;AAA6B,WAAO;AAExC,SAAO,SAAS;AAAA,IACd,oBAAC;AAAA,MAAgB,eAAW;AAAA,MAAC;AAAA,MAAQ;AAAA,MAAY,aAAW;AAAA,MACzD;AAAA,KACH;AAAA,IACA,QAAQ,WAAW,SAAS;AAAA,EAC9B;AACF,CAAC;AAED,MAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,UAAU,OAAgB,CAAC,CAAC;AAElC,QAAM,EAAE,IAAI,OAAO,IAAI,SAAS,CAAC;AAEjC,QAAM,cAAc,QAAQ,MAAM,kBAAkB,IAAI,CAAC,KAAK,CAAC,CAAC;AAEhE,QAAM,OAAO,YAAY,CAAC,SAAiB,YAAqB,QAAQ,QAAQ,OAAO,SAAS,OAAO,GAAG,CAAC,CAAC;AAE5G,SAAO;AAAA,IACL,OAAO;AAAA,MACL,YAAY,MAAM,oBAAC;AAAA,QAAa;AAAA,QAAkB,IAAI,eAAe;AAAA,QAAI;AAAA,OAAgB;AAAA,MACzF;AAAA,IACF;AAAA,IACA,CAAC,IAAI,aAAa,QAAQ,IAAI;AAAA,EAChC;AACF;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
6
|
+
"names": []
|
7
7
|
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import * as React from "react";
|
2
|
-
import
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
3
|
+
import { useCallback } from "react";
|
3
4
|
import { describe } from "@elliemae/ds-utilities";
|
4
5
|
import { propTypes } from "./propTypes";
|
5
6
|
import { StyledButton } from "./styles";
|
@@ -8,9 +9,10 @@ const DSSkipTo = (props) => {
|
|
8
9
|
const handleOnClick = useCallback(() => {
|
9
10
|
document.getElementById(goTo).focus();
|
10
11
|
}, [goTo]);
|
11
|
-
return /* @__PURE__ */
|
12
|
-
onClick: handleOnClick
|
13
|
-
|
12
|
+
return /* @__PURE__ */ jsx(StyledButton, {
|
13
|
+
onClick: handleOnClick,
|
14
|
+
children: message
|
15
|
+
});
|
14
16
|
};
|
15
17
|
DSSkipTo.propTypes = propTypes;
|
16
18
|
DSSkipTo.displayName = "DSSkipTo";
|
@@ -2,6 +2,6 @@
|
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/skip-to/DSSkipTo.tsx"],
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport type { DSSkipToPropsT as Props } from './index.d';\nimport { StyledButton } from './styles';\n\nconst DSSkipTo = (props: Props): JSX.Element => {\n const { goTo, message = 'Skip to main content' } = props;\n const handleOnClick = useCallback(() => {\n (document.getElementById(goTo) as HTMLElement).focus();\n }, [goTo]);\n return <StyledButton onClick={handleOnClick}>{message}</StyledButton>;\n};\n\nDSSkipTo.propTypes = propTypes;\nDSSkipTo.displayName = 'DSSkipTo';\nconst DSSkipToWithSchema = describe(DSSkipTo);\nDSSkipToWithSchema.propTypes = propTypes;\n\nexport { DSSkipTo, DSSkipToWithSchema };\n"],
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,
|
6
|
-
"names": [
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,mBAAmB;AACnC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAE7B,MAAM,WAAW,CAAC,UAA8B;AAC9C,QAAM,EAAE,MAAM,UAAU,uBAAuB,IAAI;AACnD,QAAM,gBAAgB,YAAY,MAAM;AACtC,IAAC,SAAS,eAAe,IAAI,EAAkB,MAAM;AAAA,EACvD,GAAG,CAAC,IAAI,CAAC;AACT,SAAO,oBAAC;AAAA,IAAa,SAAS;AAAA,IAAgB;AAAA,GAAQ;AACxD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
6
|
+
"names": []
|
7
7
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@elliemae/ds-accessibility",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.6.0-next.0",
|
4
4
|
"license": "MIT",
|
5
5
|
"description": "ICE MT - Dimsum - Accessibility",
|
6
6
|
"files": [
|
@@ -51,8 +51,8 @@
|
|
51
51
|
"indent": 4
|
52
52
|
},
|
53
53
|
"dependencies": {
|
54
|
-
"@elliemae/ds-system": "3.
|
55
|
-
"@elliemae/ds-utilities": "3.
|
54
|
+
"@elliemae/ds-system": "3.6.0-next.0",
|
55
|
+
"@elliemae/ds-utilities": "3.6.0-next.0"
|
56
56
|
},
|
57
57
|
"devDependencies": {
|
58
58
|
"styled-components": "~5.3.5"
|