@elliemae/ds-accessibility 3.38.0-rc.0 → 3.38.0-rc.2
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/typescript-testing/typescript-live-region-valid.js.map +1 -1
- package/dist/cjs/live-region/useLiveRegion.js +1 -1
- package/dist/cjs/live-region/useLiveRegion.js.map +2 -2
- package/dist/cjs/skip-to/styles.js +1 -0
- package/dist/cjs/skip-to/styles.js.map +2 -2
- package/dist/esm/live-region/typescript-testing/typescript-live-region-valid.js.map +1 -1
- package/dist/esm/live-region/useLiveRegion.js +1 -1
- package/dist/esm/live-region/useLiveRegion.js.map +2 -2
- package/dist/esm/skip-to/styles.js +1 -0
- package/dist/esm/skip-to/styles.js.map +2 -2
- package/package.json +5 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/live-region/typescript-testing/typescript-live-region-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport type { MutableRefObject } from 'react';\nimport { createRef } from 'react';\nimport { useLiveRegion } from '../index.js';\nimport type { DSLiveRegionT, Props } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSLiveRegionT.Props;\n\nconst ref = createRef() as MutableRefObject<HTMLElement>;\nconst methods = createRef() as DSLiveRegionT.Props['methods'];\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n id: 'live-region-id',\n portal: ref,\n role: 'alert',\n 'aria-live': 'assertive',\n methods
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport type { MutableRefObject } from 'react';\nimport { createRef } from 'react';\nimport { useLiveRegion } from '../index.js';\nimport type { DSLiveRegionT, Props } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSLiveRegionT.Props;\n\nconst ref = createRef() as MutableRefObject<HTMLElement>;\nconst methods = createRef() as DSLiveRegionT.Props['methods'];\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n id: 'live-region-id',\n portal: ref,\n role: 'alert',\n 'aria-live': 'assertive',\n methods,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n id: 'live-region-id',\n portal: ref,\n role: 'alert',\n 'aria-live': 'assertive',\n methods,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n id: 'live-region-id',\n portal: ref,\n role: 'alert',\n 'aria-live': 'assertive',\n methods,\n} as const;\n\nconst ExampleUsageComponent = () => {\n const { read, LiveRegion } = useLiveRegion({});\n return (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <LiveRegion {...testExplicitDefinition} />\n <LiveRegion {...testInferedTypeCompatibility} />\n <LiveRegion {...testDefinitionAsConst} />\n </>\n );\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACyCnB;AAvCJ,mBAA0B;AAC1B,eAA8B;AAM9B,MAAM,UAAM,wBAAU;AACtB,MAAM,cAAU,wBAAU;AAG1B,MAAM,yBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AACF;AAGA,MAAM,+BAA+B;AAAA,EACnC,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AACF;AAEA,MAAM,wBAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AACF;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM,EAAE,MAAM,WAAW,QAAI,wBAAc,CAAC,CAAC;AAC7C,SACE,4EAEE;AAAA,gDAAC,cAAY,GAAG,wBAAwB;AAAA,IACxC,4CAAC,cAAY,GAAG,8BAA8B;AAAA,IAC9C,4CAAC,cAAY,GAAG,uBAAuB;AAAA,KACzC;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,7 +45,7 @@ const DSLiveRegion = (0, import_react.memo)((props) => {
|
|
|
45
45
|
const [unsafe_emulateAssertiveNVDA, setUnsafe_emulateAssertiveNVDA] = (0, import_react.useState)(false);
|
|
46
46
|
const [role, setRole] = (0, import_react.useState)(void 0);
|
|
47
47
|
const [ariaLive, setAriaLive] = (0, import_react.useState)("polite");
|
|
48
|
-
const { id, portal } = props
|
|
48
|
+
const { id, portal } = props;
|
|
49
49
|
const reset = (0, import_react.useCallback)(() => {
|
|
50
50
|
setInternalMessage("");
|
|
51
51
|
setUnsafe_emulateAssertiveNVDA(false);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/live-region/useLiveRegion.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
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-props-helpers';\nimport { uid } from 'uid';\nimport { StyledContainer } from './styles.js';\nimport { UseLiveRegionPropTypes } from './propTypes.js';\nimport type { DSLiveRegionT, UseLiveRegionT } from './propTypes.js';\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<DSLiveRegionT.AriaLiveT>('polite');\n const { id, portal } = props
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AAzEJ,uBAAqB;AACrB,mBAA+E;AAC/E,8BAAyB;AACzB,iBAAoB;AACpB,oBAAgC;AAChC,uBAAuC;AAiBvC,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,uBAAkC,QAAQ;AAC1E,QAAM,EAAE,IAAI,OAAO,IAAI
|
|
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-props-helpers';\nimport { uid } from 'uid';\nimport { StyledContainer } from './styles.js';\nimport { UseLiveRegionPropTypes } from './propTypes.js';\nimport type { DSLiveRegionT, UseLiveRegionT } from './propTypes.js';\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<DSLiveRegionT.AriaLiveT>('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 () => {\n setInternalMessage(message);\n },\n options?.delay,\n );\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={id ?? instanceUID} portal={portal} />,\n read,\n }),\n [id, instanceUID, portal, read],\n );\n};\n\nuseLiveRegion.displayName = 'useLiveRegion';\nconst UseLiveRegionWithSchema = describe(useLiveRegion);\nUseLiveRegionWithSchema.propTypes = UseLiveRegionPropTypes;\nexport { useLiveRegion, UseLiveRegionWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AAzEJ,uBAAqB;AACrB,mBAA+E;AAC/E,8BAAyB;AACzB,iBAAoB;AACpB,oBAAgC;AAChC,uBAAuC;AAiBvC,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,uBAAkC,QAAQ;AAC1E,QAAM,EAAE,IAAI,OAAO,IAAI;AAEvB,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,4BAA6B,gCAA+B,IAAI;AAC7E,mBAAW,MAAM;AACf,cAAI,SAAS,aAAa,SAAS,4BAA6B,aAAY,WAAW;AACvF,cAAI,SAAS,6BAA6B;AACxC,oBAAQ,OAAO;AACf,2CAA+B,KAAK;AAAA,UACtC;AACA,cAAI,SAAS,OAAO;AAClB;AAAA,cACE,MAAM;AACJ,mCAAmB,OAAO;AAAA,cAC5B;AAAA,cACA,SAAS;AAAA,YACX;AAAA,UACF,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,4BAA6B,QAAO;AAExC,SAAO,iBAAAA,QAAS;AAAA,IACd,4CAAC,iCAAgB,eAAW,MAAC,IAAQ,MAAY,aAAW,UACzD,2BACH;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,CAAC,IAAI,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,gBAAa,SAAkB,IAAI,MAAM,aAAa,QAAgB;AAAA,MACzF;AAAA,IACF;AAAA,IACA,CAAC,IAAI,aAAa,QAAQ,IAAI;AAAA,EAChC;AACF;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": ["ReactDOM"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/skip-to/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledButton = styled.button`\n left: -999px;\n outline: none;\n position: absolute;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n z-index: -999;\n &:focus,\n &:active {\n color: ${({ theme }) => theme.colors.brand[600]};\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n text-decoration: underline;\n left: 0;\n top: 0;\n height: auto;\n cursor: pointer;\n width: fit-content;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xxs}`};\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n text-align: center;\n z-index: 999;\n overflow: auto;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledButton = styled.button`\n left: -999px;\n outline: none;\n position: absolute;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n z-index: -999;\n\n &:focus,\n &:active {\n color: ${({ theme }) => theme.colors.brand[600]};\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n text-decoration: underline;\n left: 0;\n top: 0;\n height: auto;\n cursor: pointer;\n width: fit-content;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xxs}`};\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n text-align: center;\n z-index: 999;\n overflow: auto;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAYtB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOnD,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,GAAG,EAAE;AAAA;AAAA,wBAE9C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/live-region/typescript-testing/typescript-live-region-valid.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport type { MutableRefObject } from 'react';\nimport { createRef } from 'react';\nimport { useLiveRegion } from '../index.js';\nimport type { DSLiveRegionT, Props } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSLiveRegionT.Props;\n\nconst ref = createRef() as MutableRefObject<HTMLElement>;\nconst methods = createRef() as DSLiveRegionT.Props['methods'];\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n id: 'live-region-id',\n portal: ref,\n role: 'alert',\n 'aria-live': 'assertive',\n methods
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport type { MutableRefObject } from 'react';\nimport { createRef } from 'react';\nimport { useLiveRegion } from '../index.js';\nimport type { DSLiveRegionT, Props } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSLiveRegionT.Props;\n\nconst ref = createRef() as MutableRefObject<HTMLElement>;\nconst methods = createRef() as DSLiveRegionT.Props['methods'];\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n id: 'live-region-id',\n portal: ref,\n role: 'alert',\n 'aria-live': 'assertive',\n methods,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n id: 'live-region-id',\n portal: ref,\n role: 'alert',\n 'aria-live': 'assertive',\n methods,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n id: 'live-region-id',\n portal: ref,\n role: 'alert',\n 'aria-live': 'assertive',\n methods,\n} as const;\n\nconst ExampleUsageComponent = () => {\n const { read, LiveRegion } = useLiveRegion({});\n return (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <LiveRegion {...testExplicitDefinition} />\n <LiveRegion {...testInferedTypeCompatibility} />\n <LiveRegion {...testDefinitionAsConst} />\n </>\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACyCnB,mBAEE,KAFF;AAvCJ,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAM9B,MAAM,MAAM,UAAU;AACtB,MAAM,UAAU,UAAU;AAG1B,MAAM,yBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AACF;AAGA,MAAM,+BAA+B;AAAA,EACnC,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AACF;AAEA,MAAM,wBAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AACF;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM,EAAE,MAAM,WAAW,IAAI,cAAc,CAAC,CAAC;AAC7C,SACE,iCAEE;AAAA,wBAAC,cAAY,GAAG,wBAAwB;AAAA,IACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,IAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,KACzC;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ const DSLiveRegion = memo((props) => {
|
|
|
11
11
|
const [unsafe_emulateAssertiveNVDA, setUnsafe_emulateAssertiveNVDA] = useState(false);
|
|
12
12
|
const [role, setRole] = useState(void 0);
|
|
13
13
|
const [ariaLive, setAriaLive] = useState("polite");
|
|
14
|
-
const { id, portal } = props
|
|
14
|
+
const { id, portal } = props;
|
|
15
15
|
const reset = useCallback(() => {
|
|
16
16
|
setInternalMessage("");
|
|
17
17
|
setUnsafe_emulateAssertiveNVDA(false);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/live-region/useLiveRegion.tsx"],
|
|
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-props-helpers';\nimport { uid } from 'uid';\nimport { StyledContainer } from './styles.js';\nimport { UseLiveRegionPropTypes } from './propTypes.js';\nimport type { DSLiveRegionT, UseLiveRegionT } from './propTypes.js';\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<DSLiveRegionT.AriaLiveT>('polite');\n const { id, portal } = props
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC0EnB;AAzEJ,OAAO,cAAc;AACrB,SAAgB,MAAM,WAAW,UAAU,aAAa,QAAQ,eAAe;AAC/E,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAiBvC,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,SAAkC,QAAQ;AAC1E,QAAM,EAAE,IAAI,OAAO,IAAI
|
|
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-props-helpers';\nimport { uid } from 'uid';\nimport { StyledContainer } from './styles.js';\nimport { UseLiveRegionPropTypes } from './propTypes.js';\nimport type { DSLiveRegionT, UseLiveRegionT } from './propTypes.js';\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<DSLiveRegionT.AriaLiveT>('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 () => {\n setInternalMessage(message);\n },\n options?.delay,\n );\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={id ?? instanceUID} portal={portal} />,\n read,\n }),\n [id, instanceUID, portal, read],\n );\n};\n\nuseLiveRegion.displayName = 'useLiveRegion';\nconst UseLiveRegionWithSchema = describe(useLiveRegion);\nUseLiveRegionWithSchema.propTypes = UseLiveRegionPropTypes;\nexport { useLiveRegion, UseLiveRegionWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0EnB;AAzEJ,OAAO,cAAc;AACrB,SAAgB,MAAM,WAAW,UAAU,aAAa,QAAQ,eAAe;AAC/E,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAiBvC,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,SAAkC,QAAQ;AAC1E,QAAM,EAAE,IAAI,OAAO,IAAI;AAEvB,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,4BAA6B,gCAA+B,IAAI;AAC7E,mBAAW,MAAM;AACf,cAAI,SAAS,aAAa,SAAS,4BAA6B,aAAY,WAAW;AACvF,cAAI,SAAS,6BAA6B;AACxC,oBAAQ,OAAO;AACf,2CAA+B,KAAK;AAAA,UACtC;AACA,cAAI,SAAS,OAAO;AAClB;AAAA,cACE,MAAM;AACJ,mCAAmB,OAAO;AAAA,cAC5B;AAAA,cACA,SAAS;AAAA,YACX;AAAA,UACF,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,4BAA6B,QAAO;AAExC,SAAO,SAAS;AAAA,IACd,oBAAC,mBAAgB,eAAW,MAAC,IAAQ,MAAY,aAAW,UACzD,2BACH;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,CAAC,IAAI,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,gBAAa,SAAkB,IAAI,MAAM,aAAa,QAAgB;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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/skip-to/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledButton = styled.button`\n left: -999px;\n outline: none;\n position: absolute;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n z-index: -999;\n &:focus,\n &:active {\n color: ${({ theme }) => theme.colors.brand[600]};\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n text-decoration: underline;\n left: 0;\n top: 0;\n height: auto;\n cursor: pointer;\n width: fit-content;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xxs}`};\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n text-align: center;\n z-index: 999;\n overflow: auto;\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledButton = styled.button`\n left: -999px;\n outline: none;\n position: absolute;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n z-index: -999;\n\n &:focus,\n &:active {\n color: ${({ theme }) => theme.colors.brand[600]};\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n text-decoration: underline;\n left: 0;\n top: 0;\n height: auto;\n cursor: pointer;\n width: fit-content;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xxs}`};\n border-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n text-align: center;\n z-index: 999;\n overflow: auto;\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAYtB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,wBAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOnD,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,GAAG,EAAE;AAAA;AAAA,wBAE9C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-accessibility",
|
|
3
|
-
"version": "3.38.0-rc.
|
|
3
|
+
"version": "3.38.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Accessibility",
|
|
6
6
|
"files": [
|
|
@@ -53,13 +53,13 @@
|
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"uid": "~2.0.1",
|
|
56
|
-
"@elliemae/ds-props-helpers": "3.38.0-rc.
|
|
57
|
-
"@elliemae/ds-system": "3.38.0-rc.
|
|
56
|
+
"@elliemae/ds-props-helpers": "3.38.0-rc.2",
|
|
57
|
+
"@elliemae/ds-system": "3.38.0-rc.2"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
61
61
|
"styled-components": "~5.3.9",
|
|
62
|
-
"@elliemae/ds-monorepo-devops": "3.38.0-rc.
|
|
62
|
+
"@elliemae/ds-monorepo-devops": "3.38.0-rc.2"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"react": "^17.0.2",
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
75
75
|
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
76
76
|
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
77
|
+
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
77
78
|
"dts": "node ../../../scripts/dts.mjs",
|
|
78
79
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
79
80
|
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|