@elliemae/ds-accessibility 3.38.0-rc.0 → 3.38.0-rc.2
Sign up to get free protection for your applications and to get access to all the features.
- 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/*\""
|