@fluentui/react-aria 9.13.14 → 9.14.1
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/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-aria
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 11 Mar 2025 18:54:30 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.14.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.14.1)
|
|
8
|
+
|
|
9
|
+
Tue, 11 Mar 2025 18:54:30 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.14.0..@fluentui/react-aria_v9.14.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.51 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.24.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.18.21 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.14.0)
|
|
20
|
+
|
|
21
|
+
Fri, 21 Feb 2025 14:34:03 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.13.14..@fluentui/react-aria_v9.14.0)
|
|
23
|
+
|
|
24
|
+
### Minor changes
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-tabster to v9.24.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- fix: useAnnounce live regions do not get aria-hidden from tabster ([PR #33855](https://github.com/microsoft/fluentui/pull/33855) by sarah.higley@microsoft.com)
|
|
31
|
+
|
|
7
32
|
## [9.13.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.13.14)
|
|
8
33
|
|
|
9
|
-
Wed, 22 Jan 2025
|
|
34
|
+
Wed, 22 Jan 2025 14:00:14 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.13.13..@fluentui/react-aria_v9.13.14)
|
|
11
36
|
|
|
12
37
|
### Patches
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
2
2
|
import { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';
|
|
3
|
+
import { useDangerousNeverHidden_unstable as useDangerousNeverHidden } from '@fluentui/react-tabster';
|
|
3
4
|
import * as React from 'react';
|
|
4
5
|
/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;
|
|
5
6
|
const VISUALLY_HIDDEN_STYLES = {
|
|
@@ -15,6 +16,7 @@ const VISUALLY_HIDDEN_STYLES = {
|
|
|
15
16
|
const { targetDocument } = useFluent();
|
|
16
17
|
const timeoutRef = React.useRef(undefined);
|
|
17
18
|
const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();
|
|
19
|
+
const tabsterNeverHiddenAttributes = useDangerousNeverHidden();
|
|
18
20
|
const elementRef = React.useRef(null);
|
|
19
21
|
const order = React.useRef(0);
|
|
20
22
|
// investigate alert implementation later
|
|
@@ -107,6 +109,9 @@ const VISUALLY_HIDDEN_STYLES = {
|
|
|
107
109
|
}
|
|
108
110
|
const element = targetDocument.createElement('div');
|
|
109
111
|
element.setAttribute('aria-live', 'assertive');
|
|
112
|
+
Object.entries(tabsterNeverHiddenAttributes).forEach(([key, value])=>{
|
|
113
|
+
element.setAttribute(key, value);
|
|
114
|
+
});
|
|
110
115
|
Object.assign(element.style, VISUALLY_HIDDEN_STYLES);
|
|
111
116
|
targetDocument.body.append(element);
|
|
112
117
|
elementRef.current = element;
|
|
@@ -118,6 +123,7 @@ const VISUALLY_HIDDEN_STYLES = {
|
|
|
118
123
|
};
|
|
119
124
|
}, [
|
|
120
125
|
clearAnnounceTimeout,
|
|
126
|
+
tabsterNeverHiddenAttributes,
|
|
121
127
|
targetDocument
|
|
122
128
|
]);
|
|
123
129
|
return announce;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, targetDocument]);\n\n return announce;\n};\n"],"names":["useFluent_unstable","useFluent","createPriorityQueue","useTimeout","React","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","useDomAnnounce_unstable","targetDocument","timeoutRef","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","elementRef","order","batchMessages","messageQueue","useState","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","assign","style","body","append"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport { useDangerousNeverHidden_unstable as useDangerousNeverHidden } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n const tabsterNeverHiddenAttributes = useDangerousNeverHidden();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.entries(tabsterNeverHiddenAttributes).forEach(([key, value]) => {\n element.setAttribute(key, value);\n });\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, tabsterNeverHiddenAttributes, targetDocument]);\n\n return announce;\n};\n"],"names":["useFluent_unstable","useFluent","createPriorityQueue","useTimeout","useDangerousNeverHidden_unstable","useDangerousNeverHidden","React","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","useDomAnnounce_unstable","targetDocument","timeoutRef","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","tabsterNeverHiddenAttributes","elementRef","order","batchMessages","messageQueue","useState","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","entries","forEach","key","value","assign","style","body","append"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "useDomAnnounce_unstable", {
|
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
14
15
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
15
16
|
/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;
|
|
16
17
|
const VISUALLY_HIDDEN_STYLES = {
|
|
@@ -26,6 +27,7 @@ const useDomAnnounce_unstable = ()=>{
|
|
|
26
27
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
27
28
|
const timeoutRef = _react.useRef(undefined);
|
|
28
29
|
const [setAnnounceTimeout, clearAnnounceTimeout] = (0, _reactutilities.useTimeout)();
|
|
30
|
+
const tabsterNeverHiddenAttributes = (0, _reacttabster.useDangerousNeverHidden_unstable)();
|
|
29
31
|
const elementRef = _react.useRef(null);
|
|
30
32
|
const order = _react.useRef(0);
|
|
31
33
|
// investigate alert implementation later
|
|
@@ -118,6 +120,9 @@ const useDomAnnounce_unstable = ()=>{
|
|
|
118
120
|
}
|
|
119
121
|
const element = targetDocument.createElement('div');
|
|
120
122
|
element.setAttribute('aria-live', 'assertive');
|
|
123
|
+
Object.entries(tabsterNeverHiddenAttributes).forEach(([key, value])=>{
|
|
124
|
+
element.setAttribute(key, value);
|
|
125
|
+
});
|
|
121
126
|
Object.assign(element.style, VISUALLY_HIDDEN_STYLES);
|
|
122
127
|
targetDocument.body.append(element);
|
|
123
128
|
elementRef.current = element;
|
|
@@ -129,6 +134,7 @@ const useDomAnnounce_unstable = ()=>{
|
|
|
129
134
|
};
|
|
130
135
|
}, [
|
|
131
136
|
clearAnnounceTimeout,
|
|
137
|
+
tabsterNeverHiddenAttributes,
|
|
132
138
|
targetDocument
|
|
133
139
|
]);
|
|
134
140
|
return announce;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AriaLiveAnnouncer/useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, targetDocument]);\n\n return announce;\n};\n"],"names":["useDomAnnounce_unstable","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","targetDocument","useFluent","timeoutRef","React","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","useTimeout","elementRef","order","batchMessages","messageQueue","useState","createPriorityQueue","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","assign","style","body","append"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/AriaLiveAnnouncer/useDomAnnounce.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { createPriorityQueue, useTimeout } from '@fluentui/react-utilities';\nimport { useDangerousNeverHidden_unstable as useDangerousNeverHidden } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport type { AriaLiveAnnounceFn, AriaLiveMessage } from './AriaLiveAnnouncer.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\nconst VISUALLY_HIDDEN_STYLES = {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n width: '1px',\n position: 'absolute',\n overflow: 'hidden',\n textWrap: 'nowrap',\n};\n\n/* INTERNAL: implementation of the announcer using a live region element */\nexport const useDomAnnounce_unstable = (): AriaLiveAnnounceFn => {\n const { targetDocument } = useFluent();\n\n const timeoutRef = React.useRef<number | undefined>(undefined);\n const [setAnnounceTimeout, clearAnnounceTimeout] = useTimeout();\n const tabsterNeverHiddenAttributes = useDangerousNeverHidden();\n\n const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n const order = React.useRef(0);\n\n // investigate alert implementation later\n // const [alertList, setAlertList] = React.useState<string[]>([]);\n\n const batchMessages = React.useRef<{ batchId: string; message: AriaLiveMessage }[]>([]);\n\n const [messageQueue] = React.useState(() =>\n createPriorityQueue<AriaLiveMessage>((a, b) => {\n if (a.priority !== b.priority) {\n return b.priority - a.priority;\n }\n\n return a.createdAt - b.createdAt;\n }),\n );\n\n const queueMessage = React.useCallback(() => {\n if (timeoutRef.current || !elementRef.current) {\n return;\n }\n\n const runCycle = () => {\n if (!elementRef.current) {\n return;\n }\n\n if (targetDocument && messageQueue.peek()) {\n // need a wrapping element for Narrator/Edge, which currently does not pick up text-only live region changes\n // consistently\n // if this is fixed, we can set textContent to the string directly\n\n const wrappingEl = targetDocument.createElement('span');\n\n wrappingEl.innerText = messageQueue\n .all()\n .filter(msg => msg.message.trim().length > 0)\n .reduce((prevText, currMsg) => prevText + currMsg.message + '. ', '');\n\n elementRef.current.innerText = '';\n elementRef.current.appendChild(wrappingEl);\n\n messageQueue.clear();\n batchMessages.current = [];\n\n // begin new cycle to clear (or update) messages\n timeoutRef.current = setAnnounceTimeout(() => {\n runCycle();\n }, MESSAGE_DURATION);\n } else {\n elementRef.current.textContent = '';\n clearAnnounceTimeout();\n\n timeoutRef.current = undefined;\n }\n };\n\n runCycle();\n }, [clearAnnounceTimeout, messageQueue, setAnnounceTimeout, targetDocument]);\n\n const announce: AriaLiveAnnounceFn = React.useCallback(\n (message: string, options: AnnounceOptions = {}) => {\n const { alert = false, priority = 0, batchId } = options;\n\n // check if message is an alert\n if (alert) {\n // TODO: alert implementation\n // setAlertList([...alertList, message]);\n }\n\n const liveMessage: AriaLiveMessage = {\n message,\n createdAt: order.current++,\n priority,\n batchId,\n };\n\n // check if batchId exists\n if (batchId) {\n // update associated msg if it does\n const batchMessage = batchMessages.current.find(msg => msg.batchId === batchId);\n\n if (batchMessage) {\n // replace existing message in queue\n messageQueue.remove(batchMessage.message);\n\n // update list of existing batchIds w/ most recent message\n batchMessage.message = liveMessage;\n } else {\n // update list of existing batchIds, add new if doesn't already exist\n batchMessages.current = [...batchMessages.current, { batchId, message: liveMessage }];\n }\n }\n\n // add new message\n messageQueue.enqueue(liveMessage);\n queueMessage();\n },\n [messageQueue, queueMessage],\n );\n\n React.useEffect(() => {\n if (!targetDocument) {\n return;\n }\n\n const element = targetDocument.createElement('div');\n element.setAttribute('aria-live', 'assertive');\n\n Object.entries(tabsterNeverHiddenAttributes).forEach(([key, value]) => {\n element.setAttribute(key, value);\n });\n\n Object.assign(element.style, VISUALLY_HIDDEN_STYLES);\n targetDocument.body.append(element);\n\n elementRef.current = element;\n\n return () => {\n element.remove();\n elementRef.current = null;\n clearAnnounceTimeout();\n timeoutRef.current = undefined;\n };\n }, [clearAnnounceTimeout, tabsterNeverHiddenAttributes, targetDocument]);\n\n return announce;\n};\n"],"names":["useDomAnnounce_unstable","MESSAGE_DURATION","VISUALLY_HIDDEN_STYLES","clip","height","margin","width","position","overflow","textWrap","targetDocument","useFluent","timeoutRef","React","useRef","undefined","setAnnounceTimeout","clearAnnounceTimeout","useTimeout","tabsterNeverHiddenAttributes","useDangerousNeverHidden","elementRef","order","batchMessages","messageQueue","useState","createPriorityQueue","a","b","priority","createdAt","queueMessage","useCallback","current","runCycle","peek","wrappingEl","createElement","innerText","all","filter","msg","message","trim","length","reduce","prevText","currMsg","appendChild","clear","textContent","announce","options","alert","batchId","liveMessage","batchMessage","find","remove","enqueue","useEffect","element","setAttribute","Object","entries","forEach","key","value","assign","style","body","append"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-aria",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.14.1",
|
|
4
4
|
"description": "React helper to ensure ARIA",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
22
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
23
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
24
|
-
"@fluentui/react-tabster": "^9.
|
|
25
|
-
"@fluentui/react-utilities": "^9.18.
|
|
22
|
+
"@fluentui/react-shared-contexts": "^9.22.0",
|
|
23
|
+
"@fluentui/react-jsx-runtime": "^9.0.51",
|
|
24
|
+
"@fluentui/react-tabster": "^9.24.1",
|
|
25
|
+
"@fluentui/react-utilities": "^9.18.21",
|
|
26
26
|
"@swc/helpers": "^0.5.1"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|