@dnd-kit/accessibility 1.0.2 → 3.0.1-next-20224300590
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +64 -0
- package/dist/accessibility.cjs.development.js +22 -51
- package/dist/accessibility.cjs.development.js.map +1 -1
- package/dist/accessibility.cjs.production.min.js +1 -1
- package/dist/accessibility.cjs.production.min.js.map +1 -1
- package/dist/accessibility.esm.js +23 -52
- package/dist/accessibility.esm.js.map +1 -1
- package/dist/components/LiveRegion/LiveRegion.d.ts +2 -3
- package/dist/hooks/useAnnouncement.d.ts +2 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,69 @@
|
|
|
1
1
|
# @dnd-kit/accessibility
|
|
2
2
|
|
|
3
|
+
## 3.0.1-next-20224300590
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#776](https://github.com/clauderic/dnd-kit/pull/776) [`3978c43`](https://github.com/clauderic/dnd-kit/commit/3978c43c6b045f10b75f47ad8bbea38a84437bd6) Thanks [@clauderic](https://github.com/clauderic)! - The ARIA live region element used for screen reader announcements is now positioned using `position: fixed` instead of `position: absolute`. As of `@dnd-kit/core^6.0.0`, the live region element is no longer portaled by default into the `document.body`. This change was introduced in order to fix issues with portaled live regions. However, this change can introduce visual regressions when using absolutely positioned elements, since the live region element is constrained to the stacking and position context of its closest positioned ancestor. Using fixed position ensures the element does not introduce visual regressions.
|
|
8
|
+
|
|
9
|
+
## 3.0.0
|
|
10
|
+
|
|
11
|
+
### Major Changes
|
|
12
|
+
|
|
13
|
+
- [`a9d92cf`](https://github.com/clauderic/dnd-kit/commit/a9d92cf1fa35dd957e6c5915a13dfd2af134c103) [#174](https://github.com/clauderic/dnd-kit/pull/174) Thanks [@clauderic](https://github.com/clauderic)! - Distributed assets now only target modern browsers. [Browserlist](https://github.com/browserslist/browserslist) config:
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
defaults
|
|
17
|
+
last 2 version
|
|
18
|
+
not IE 11
|
|
19
|
+
not dead
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
If you need to support older browsers, include the appropriate polyfills in your project's build process.
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- [`b406cb9`](https://github.com/clauderic/dnd-kit/commit/b406cb9251beef8677d05c45ec42bab7581a86dc) [#187](https://github.com/clauderic/dnd-kit/pull/187) Thanks [@clauderic](https://github.com/clauderic)! - Introduced the `useDndMonitor` hook. The `useDndMonitor` hook can be used within components wrapped in a `DndContext` provider to monitor the different drag and drop events that happen for that `DndContext`.
|
|
27
|
+
|
|
28
|
+
Example usage:
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import {DndContext, useDndMonitor} from '@dnd-kit/core';
|
|
32
|
+
|
|
33
|
+
function App() {
|
|
34
|
+
return (
|
|
35
|
+
<DndContext>
|
|
36
|
+
<Component />
|
|
37
|
+
</DndContext>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function Component() {
|
|
42
|
+
useDndMonitor({
|
|
43
|
+
onDragStart(event) {},
|
|
44
|
+
onDragMove(event) {},
|
|
45
|
+
onDragOver(event) {},
|
|
46
|
+
onDragEnd(event) {},
|
|
47
|
+
onDragCancel(event) {},
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## 2.0.0
|
|
53
|
+
|
|
54
|
+
### Major Changes
|
|
55
|
+
|
|
56
|
+
- [`2833337`](https://github.com/clauderic/dnd-kit/commit/2833337043719853902c3989dfcd5b55ae9ddc73) [#186](https://github.com/clauderic/dnd-kit/pull/186) Thanks [@clauderic](https://github.com/clauderic)! - Simplify `useAnnouncement` hook to only return a single `announcement` rather than `entries`. Similarly, the `LiveRegion` component now only accepts a single `announcement` rather than `entries.
|
|
57
|
+
|
|
58
|
+
- The current strategy used in the useAnnouncement hook is needlessly complex. It's not actually necessary to render multiple announcements at once within the LiveRegion component. It's sufficient to render a single announcement at a time. It's also un-necessary to clean up the announcements after they have been announced, especially now that the role="status" attribute has been added to LiveRegion, keeping the last announcement rendered means users can refer to the last status.
|
|
59
|
+
|
|
60
|
+
### Patch Changes
|
|
61
|
+
|
|
62
|
+
- [`c24bdb3`](https://github.com/clauderic/dnd-kit/commit/c24bdb3723f1e3e4c474439f837a19c6d48059fb) [#184](https://github.com/clauderic/dnd-kit/pull/184) Thanks [@clauderic](https://github.com/clauderic)! - Tweaked LiveRegion component:
|
|
63
|
+
- Entries are now rendered without wrapper `span` elements. Having wrapper `span` elements causes VoiceOver on macOS to try to move the VoiceOver cursor to the live region, which interferes with scrolling. This issue is not exhibited when rendering announcement entries as plain text without wrapper spans.
|
|
64
|
+
- Added the `role="status"` attribute to the LiveRegion wrapper element.
|
|
65
|
+
- Added the `white-space: no-wrap;` property to ensure that text does not wrap.
|
|
66
|
+
|
|
3
67
|
## 1.0.2
|
|
4
68
|
|
|
5
69
|
### Patch Changes
|
|
@@ -7,20 +7,22 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
|
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var React__default = _interopDefault(React);
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const hiddenStyles = {
|
|
11
11
|
display: 'none'
|
|
12
12
|
};
|
|
13
13
|
function HiddenText(_ref) {
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
let {
|
|
15
|
+
id,
|
|
16
|
+
value
|
|
17
|
+
} = _ref;
|
|
16
18
|
return React__default.createElement("div", {
|
|
17
19
|
id: id,
|
|
18
20
|
style: hiddenStyles
|
|
19
21
|
}, value);
|
|
20
22
|
}
|
|
21
23
|
|
|
22
|
-
|
|
23
|
-
position: '
|
|
24
|
+
const visuallyHidden = {
|
|
25
|
+
position: 'fixed',
|
|
24
26
|
width: 1,
|
|
25
27
|
height: 1,
|
|
26
28
|
margin: -1,
|
|
@@ -28,64 +30,33 @@ var visuallyHidden = {
|
|
|
28
30
|
padding: 0,
|
|
29
31
|
overflow: 'hidden',
|
|
30
32
|
clip: 'rect(0 0 0 0)',
|
|
31
|
-
clipPath: 'inset(100%)'
|
|
33
|
+
clipPath: 'inset(100%)',
|
|
34
|
+
whiteSpace: 'nowrap'
|
|
32
35
|
};
|
|
33
36
|
function LiveRegion(_ref) {
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
let {
|
|
38
|
+
id,
|
|
39
|
+
announcement
|
|
40
|
+
} = _ref;
|
|
36
41
|
return React__default.createElement("div", {
|
|
37
42
|
id: id,
|
|
38
43
|
style: visuallyHidden,
|
|
44
|
+
role: "status",
|
|
39
45
|
"aria-live": "assertive",
|
|
40
|
-
"aria-relevant": "additions",
|
|
41
46
|
"aria-atomic": true
|
|
42
|
-
},
|
|
43
|
-
var id = _ref2[0],
|
|
44
|
-
entry = _ref2[1];
|
|
45
|
-
return React__default.createElement("span", {
|
|
46
|
-
key: id.toString()
|
|
47
|
-
}, entry);
|
|
48
|
-
}));
|
|
47
|
+
}, announcement);
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
var timeout = 1e3; // 1 second
|
|
52
|
-
|
|
53
50
|
function useAnnouncement() {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
setAnnouncements(function (announcements) {
|
|
60
|
-
var timeoutId = setTimeout(function () {
|
|
61
|
-
setAnnouncements(function (announcements) {
|
|
62
|
-
announcements["delete"](timeoutId);
|
|
63
|
-
return new Map(announcements);
|
|
64
|
-
});
|
|
65
|
-
}, timeout);
|
|
66
|
-
announcements.set(timeoutId, announcement);
|
|
67
|
-
return new Map(announcements);
|
|
68
|
-
});
|
|
69
|
-
}, []);
|
|
70
|
-
var announcementMapRef = React.useRef(announcementMap);
|
|
71
|
-
var entries = React.useMemo(function () {
|
|
72
|
-
return Array.from(announcementMap.entries());
|
|
73
|
-
}, [announcementMap]);
|
|
74
|
-
React.useEffect(function () {
|
|
75
|
-
announcementMapRef.current = announcementMap;
|
|
76
|
-
}, [announcementMap]);
|
|
77
|
-
React.useEffect(function () {
|
|
78
|
-
return function () {
|
|
79
|
-
// Clean up any queued `setTimeout` calls on unmount
|
|
80
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
81
|
-
announcementMapRef.current.forEach(function (_, key) {
|
|
82
|
-
clearTimeout(key);
|
|
83
|
-
});
|
|
84
|
-
};
|
|
51
|
+
const [announcement, setAnnouncement] = React.useState('');
|
|
52
|
+
const announce = React.useCallback(value => {
|
|
53
|
+
if (value != null) {
|
|
54
|
+
setAnnouncement(value);
|
|
55
|
+
}
|
|
85
56
|
}, []);
|
|
86
57
|
return {
|
|
87
|
-
announce
|
|
88
|
-
|
|
58
|
+
announce,
|
|
59
|
+
announcement
|
|
89
60
|
};
|
|
90
61
|
}
|
|
91
62
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accessibility.cjs.development.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n id: string;\n value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n return (\n <div id={id} style={hiddenStyles}>\n {value}\n </div>\n );\n}\n","import React from 'react';\n\nexport interface Props {\n id: string;\n
|
|
1
|
+
{"version":3,"file":"accessibility.cjs.development.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n id: string;\n value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n return (\n <div id={id} style={hiddenStyles}>\n {value}\n </div>\n );\n}\n","import React from 'react';\n\nexport interface Props {\n id: string;\n announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n position: 'fixed',\n width: 1,\n height: 1,\n margin: -1,\n border: 0,\n padding: 0,\n overflow: 'hidden',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(100%)',\n whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n return (\n <div\n id={id}\n style={visuallyHidden}\n role=\"status\"\n aria-live=\"assertive\"\n aria-atomic\n >\n {announcement}\n </div>\n );\n}\n","import {useCallback, useState} from 'react';\n\nexport function useAnnouncement() {\n const [announcement, setAnnouncement] = useState('');\n const announce = useCallback((value: string | undefined) => {\n if (value != null) {\n setAnnouncement(value);\n }\n }, []);\n\n return {announce, announcement} as const;\n}\n"],"names":["hiddenStyles","display","HiddenText","id","value","React","style","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","LiveRegion","announcement","role","useAnnouncement","setAnnouncement","useState","announce","useCallback"],"mappings":";;;;;;;;;AAOA,MAAMA,YAAY,GAAwB;EACxCC,OAAO,EAAE;AAD+B,CAA1C;SAIgBC;MAAW;IAACC,EAAD;IAAKC;;EAC9B,OACEC,4BAAA,MAAA;IAAKF,EAAE,EAAEA;IAAIG,KAAK,EAAEN;GAApB,EACGI,KADH,CADF;AAKD;;ACTD,MAAMG,cAAc,GAAwB;EAC1CC,QAAQ,EAAE,OADgC;EAE1CC,KAAK,EAAE,CAFmC;EAG1CC,MAAM,EAAE,CAHkC;EAI1CC,MAAM,EAAE,CAAC,CAJiC;EAK1CC,MAAM,EAAE,CALkC;EAM1CC,OAAO,EAAE,CANiC;EAO1CC,QAAQ,EAAE,QAPgC;EAQ1CC,IAAI,EAAE,eARoC;EAS1CC,QAAQ,EAAE,aATgC;EAU1CC,UAAU,EAAE;AAV8B,CAA5C;AAaA,SAAgBC;MAAW;IAACf,EAAD;IAAKgB;;EAC9B,OACEd,4BAAA,MAAA;IACEF,EAAE,EAAEA;IACJG,KAAK,EAAEC;IACPa,IAAI,EAAC;iBACK;;GAJZ,EAOGD,YAPH,CADF;AAWD;;SC/BeE;EACd,MAAM,CAACF,YAAD,EAAeG,eAAf,IAAkCC,cAAQ,CAAC,EAAD,CAAhD;EACA,MAAMC,QAAQ,GAAGC,iBAAW,CAAErB,KAAD;IAC3B,IAAIA,KAAK,IAAI,IAAb,EAAmB;MACjBkB,eAAe,CAAClB,KAAD,CAAf;;GAFwB,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IAACoB,QAAD;IAAWL;GAAlB;AACD;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;const i={display:"none"},r={position:"fixed",width:1,height:1,margin:-1,border:0,padding:0,overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(100%)",whiteSpace:"nowrap"};exports.HiddenText=function(e){let{id:t,value:r}=e;return n.createElement("div",{id:t,style:i},r)},exports.LiveRegion=function(e){let{id:t,announcement:i}=e;return n.createElement("div",{id:t,style:r,role:"status","aria-live":"assertive","aria-atomic":!0},i)},exports.useAnnouncement=function(){const[e,n]=t.useState("");return{announce:t.useCallback(e=>{null!=e&&n(e)},[]),announcement:e}};
|
|
2
2
|
//# sourceMappingURL=accessibility.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accessibility.cjs.production.min.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n id: string;\n value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n return (\n <div id={id} style={hiddenStyles}>\n {value}\n </div>\n );\n}\n","import React from 'react';\n\nexport interface Props {\n id: string;\n
|
|
1
|
+
{"version":3,"file":"accessibility.cjs.production.min.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n id: string;\n value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n return (\n <div id={id} style={hiddenStyles}>\n {value}\n </div>\n );\n}\n","import React from 'react';\n\nexport interface Props {\n id: string;\n announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n position: 'fixed',\n width: 1,\n height: 1,\n margin: -1,\n border: 0,\n padding: 0,\n overflow: 'hidden',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(100%)',\n whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n return (\n <div\n id={id}\n style={visuallyHidden}\n role=\"status\"\n aria-live=\"assertive\"\n aria-atomic\n >\n {announcement}\n </div>\n );\n}\n","import {useCallback, useState} from 'react';\n\nexport function useAnnouncement() {\n const [announcement, setAnnouncement] = useState('');\n const announce = useCallback((value: string | undefined) => {\n if (value != null) {\n setAnnouncement(value);\n }\n }, []);\n\n return {announce, announcement} as const;\n}\n"],"names":["hiddenStyles","display","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","id","value","React","style","announcement","role","setAnnouncement","useState","announce","useCallback"],"mappings":"oJAOA,MAAMA,EAAoC,CACxCC,QAAS,QCALC,EAAsC,CAC1CC,SAAU,QACVC,MAAO,EACPC,OAAQ,EACRC,QAAS,EACTC,OAAQ,EACRC,QAAS,EACTC,SAAU,SACVC,KAAM,gBACNC,SAAU,cACVC,WAAY,6CDPaC,GAACA,EAADC,MAAKA,KAC9B,OACEC,uBAAKF,GAAIA,EAAIG,MAAOhB,GACjBc,uCCOoBD,GAACA,EAADI,aAAKA,KAC9B,OACEF,uBACEF,GAAIA,EACJG,MAAOd,EACPgB,KAAK,qBACK,8BAGTD,uCC3BL,MAAOA,EAAcE,GAAmBC,WAAS,IAOjD,MAAO,CAACC,SANSC,cAAaR,IACf,MAATA,GACFK,EAAgBL,IAEjB,IAEeG,aAAAA"}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
import React, { useState, useCallback
|
|
1
|
+
import React, { useState, useCallback } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
const hiddenStyles = {
|
|
4
4
|
display: 'none'
|
|
5
5
|
};
|
|
6
6
|
function HiddenText(_ref) {
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
let {
|
|
8
|
+
id,
|
|
9
|
+
value
|
|
10
|
+
} = _ref;
|
|
9
11
|
return React.createElement("div", {
|
|
10
12
|
id: id,
|
|
11
13
|
style: hiddenStyles
|
|
12
14
|
}, value);
|
|
13
15
|
}
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
position: '
|
|
17
|
+
const visuallyHidden = {
|
|
18
|
+
position: 'fixed',
|
|
17
19
|
width: 1,
|
|
18
20
|
height: 1,
|
|
19
21
|
margin: -1,
|
|
@@ -21,64 +23,33 @@ var visuallyHidden = {
|
|
|
21
23
|
padding: 0,
|
|
22
24
|
overflow: 'hidden',
|
|
23
25
|
clip: 'rect(0 0 0 0)',
|
|
24
|
-
clipPath: 'inset(100%)'
|
|
26
|
+
clipPath: 'inset(100%)',
|
|
27
|
+
whiteSpace: 'nowrap'
|
|
25
28
|
};
|
|
26
29
|
function LiveRegion(_ref) {
|
|
27
|
-
|
|
28
|
-
|
|
30
|
+
let {
|
|
31
|
+
id,
|
|
32
|
+
announcement
|
|
33
|
+
} = _ref;
|
|
29
34
|
return React.createElement("div", {
|
|
30
35
|
id: id,
|
|
31
36
|
style: visuallyHidden,
|
|
37
|
+
role: "status",
|
|
32
38
|
"aria-live": "assertive",
|
|
33
|
-
"aria-relevant": "additions",
|
|
34
39
|
"aria-atomic": true
|
|
35
|
-
},
|
|
36
|
-
var id = _ref2[0],
|
|
37
|
-
entry = _ref2[1];
|
|
38
|
-
return React.createElement("span", {
|
|
39
|
-
key: id.toString()
|
|
40
|
-
}, entry);
|
|
41
|
-
}));
|
|
40
|
+
}, announcement);
|
|
42
41
|
}
|
|
43
42
|
|
|
44
|
-
var timeout = 1e3; // 1 second
|
|
45
|
-
|
|
46
43
|
function useAnnouncement() {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
setAnnouncements(function (announcements) {
|
|
53
|
-
var timeoutId = setTimeout(function () {
|
|
54
|
-
setAnnouncements(function (announcements) {
|
|
55
|
-
announcements["delete"](timeoutId);
|
|
56
|
-
return new Map(announcements);
|
|
57
|
-
});
|
|
58
|
-
}, timeout);
|
|
59
|
-
announcements.set(timeoutId, announcement);
|
|
60
|
-
return new Map(announcements);
|
|
61
|
-
});
|
|
62
|
-
}, []);
|
|
63
|
-
var announcementMapRef = useRef(announcementMap);
|
|
64
|
-
var entries = useMemo(function () {
|
|
65
|
-
return Array.from(announcementMap.entries());
|
|
66
|
-
}, [announcementMap]);
|
|
67
|
-
useEffect(function () {
|
|
68
|
-
announcementMapRef.current = announcementMap;
|
|
69
|
-
}, [announcementMap]);
|
|
70
|
-
useEffect(function () {
|
|
71
|
-
return function () {
|
|
72
|
-
// Clean up any queued `setTimeout` calls on unmount
|
|
73
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
74
|
-
announcementMapRef.current.forEach(function (_, key) {
|
|
75
|
-
clearTimeout(key);
|
|
76
|
-
});
|
|
77
|
-
};
|
|
44
|
+
const [announcement, setAnnouncement] = useState('');
|
|
45
|
+
const announce = useCallback(value => {
|
|
46
|
+
if (value != null) {
|
|
47
|
+
setAnnouncement(value);
|
|
48
|
+
}
|
|
78
49
|
}, []);
|
|
79
50
|
return {
|
|
80
|
-
announce
|
|
81
|
-
|
|
51
|
+
announce,
|
|
52
|
+
announcement
|
|
82
53
|
};
|
|
83
54
|
}
|
|
84
55
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accessibility.esm.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n id: string;\n value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n return (\n <div id={id} style={hiddenStyles}>\n {value}\n </div>\n );\n}\n","import React from 'react';\n\nexport interface Props {\n id: string;\n
|
|
1
|
+
{"version":3,"file":"accessibility.esm.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n id: string;\n value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n return (\n <div id={id} style={hiddenStyles}>\n {value}\n </div>\n );\n}\n","import React from 'react';\n\nexport interface Props {\n id: string;\n announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n position: 'fixed',\n width: 1,\n height: 1,\n margin: -1,\n border: 0,\n padding: 0,\n overflow: 'hidden',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(100%)',\n whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n return (\n <div\n id={id}\n style={visuallyHidden}\n role=\"status\"\n aria-live=\"assertive\"\n aria-atomic\n >\n {announcement}\n </div>\n );\n}\n","import {useCallback, useState} from 'react';\n\nexport function useAnnouncement() {\n const [announcement, setAnnouncement] = useState('');\n const announce = useCallback((value: string | undefined) => {\n if (value != null) {\n setAnnouncement(value);\n }\n }, []);\n\n return {announce, announcement} as const;\n}\n"],"names":["hiddenStyles","display","HiddenText","id","value","React","style","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","LiveRegion","announcement","role","useAnnouncement","setAnnouncement","useState","announce","useCallback"],"mappings":";;AAOA,MAAMA,YAAY,GAAwB;EACxCC,OAAO,EAAE;AAD+B,CAA1C;SAIgBC;MAAW;IAACC,EAAD;IAAKC;;EAC9B,OACEC,mBAAA,MAAA;IAAKF,EAAE,EAAEA;IAAIG,KAAK,EAAEN;GAApB,EACGI,KADH,CADF;AAKD;;ACTD,MAAMG,cAAc,GAAwB;EAC1CC,QAAQ,EAAE,OADgC;EAE1CC,KAAK,EAAE,CAFmC;EAG1CC,MAAM,EAAE,CAHkC;EAI1CC,MAAM,EAAE,CAAC,CAJiC;EAK1CC,MAAM,EAAE,CALkC;EAM1CC,OAAO,EAAE,CANiC;EAO1CC,QAAQ,EAAE,QAPgC;EAQ1CC,IAAI,EAAE,eARoC;EAS1CC,QAAQ,EAAE,aATgC;EAU1CC,UAAU,EAAE;AAV8B,CAA5C;AAaA,SAAgBC;MAAW;IAACf,EAAD;IAAKgB;;EAC9B,OACEd,mBAAA,MAAA;IACEF,EAAE,EAAEA;IACJG,KAAK,EAAEC;IACPa,IAAI,EAAC;iBACK;;GAJZ,EAOGD,YAPH,CADF;AAWD;;SC/BeE;EACd,MAAM,CAACF,YAAD,EAAeG,eAAf,IAAkCC,QAAQ,CAAC,EAAD,CAAhD;EACA,MAAMC,QAAQ,GAAGC,WAAW,CAAErB,KAAD;IAC3B,IAAIA,KAAK,IAAI,IAAb,EAAmB;MACjBkB,eAAe,CAAClB,KAAD,CAAf;;GAFwB,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IAACoB,QAAD;IAAWL;GAAlB;AACD;;;;"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
/// <reference types="node" />
|
|
2
1
|
/// <reference types="react" />
|
|
3
2
|
export interface Props {
|
|
4
3
|
id: string;
|
|
5
|
-
|
|
4
|
+
announcement: string;
|
|
6
5
|
}
|
|
7
|
-
export declare function LiveRegion({ id,
|
|
6
|
+
export declare function LiveRegion({ id, announcement }: Props): JSX.Element;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
/// <reference types="node" />
|
|
2
1
|
export declare function useAnnouncement(): {
|
|
3
|
-
readonly announce: (
|
|
4
|
-
readonly
|
|
2
|
+
readonly announce: (value: string | undefined) => void;
|
|
3
|
+
readonly announcement: string;
|
|
5
4
|
};
|