@dnd-kit/accessibility 3.0.1 → 3.1.0-next-2023106221355
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +6 -0
- package/dist/accessibility.cjs.development.js +16 -14
- 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 +16 -14
- package/dist/accessibility.esm.js.map +1 -1
- package/dist/components/LiveRegion/LiveRegion.d.ts +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,11 @@
|
|
1
1
|
# @dnd-kit/accessibility
|
2
2
|
|
3
|
+
## 3.1.0-next-2023106221355
|
4
|
+
|
5
|
+
### Minor Changes
|
6
|
+
|
7
|
+
- [#1229](https://github.com/clauderic/dnd-kit/pull/1229) [`aabb8bd`](https://github.com/clauderic/dnd-kit/commit/aabb8bd114cf1f0aed0f18e70b296d5905ff04d8) Thanks [@ayy-bc](https://github.com/ayy-bc)! - Introduce `ariaLiveType` prop on `<LiveRegion>` to allow consumers to configure the `aria-live` attribute to other values for announcements, such as `aria-live="polite"`.
|
8
|
+
|
3
9
|
## 3.0.1
|
4
10
|
|
5
11
|
### Patch Changes
|
@@ -21,28 +21,30 @@ function HiddenText(_ref) {
|
|
21
21
|
}, value);
|
22
22
|
}
|
23
23
|
|
24
|
-
const visuallyHidden = {
|
25
|
-
position: 'fixed',
|
26
|
-
width: 1,
|
27
|
-
height: 1,
|
28
|
-
margin: -1,
|
29
|
-
border: 0,
|
30
|
-
padding: 0,
|
31
|
-
overflow: 'hidden',
|
32
|
-
clip: 'rect(0 0 0 0)',
|
33
|
-
clipPath: 'inset(100%)',
|
34
|
-
whiteSpace: 'nowrap'
|
35
|
-
};
|
36
24
|
function LiveRegion(_ref) {
|
37
25
|
let {
|
38
26
|
id,
|
39
|
-
announcement
|
27
|
+
announcement,
|
28
|
+
ariaLiveType = "assertive"
|
40
29
|
} = _ref;
|
30
|
+
// Hide element visually but keep it readable by screen readers
|
31
|
+
const visuallyHidden = {
|
32
|
+
position: 'fixed',
|
33
|
+
width: 1,
|
34
|
+
height: 1,
|
35
|
+
margin: -1,
|
36
|
+
border: 0,
|
37
|
+
padding: 0,
|
38
|
+
overflow: 'hidden',
|
39
|
+
clip: 'rect(0 0 0 0)',
|
40
|
+
clipPath: 'inset(100%)',
|
41
|
+
whiteSpace: 'nowrap'
|
42
|
+
};
|
41
43
|
return React__default.createElement("div", {
|
42
44
|
id: id,
|
43
45
|
style: visuallyHidden,
|
44
46
|
role: "status",
|
45
|
-
"aria-live":
|
47
|
+
"aria-live": ariaLiveType,
|
46
48
|
"aria-atomic": true
|
47
49
|
}, announcement);
|
48
50
|
}
|
@@ -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 announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\
|
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 ariaLiveType?: \"polite\" | \"assertive\" | \"off\";\n}\n\nexport function LiveRegion({id, announcement, ariaLiveType = \"assertive\"}: Props) {\n // Hide element visually but keep it readable by screen readers\n const 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 \n return (\n <div\n id={id}\n style={visuallyHidden}\n role=\"status\"\n aria-live={ariaLiveType}\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","LiveRegion","announcement","ariaLiveType","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","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;;SCTeG;MAAW;IAACJ,EAAD;IAAKK,YAAL;IAAmBC,YAAY,GAAG;;;EAE3D,MAAMC,cAAc,GAAwB;IAC1CC,QAAQ,EAAE,OADgC;IAE1CC,KAAK,EAAE,CAFmC;IAG1CC,MAAM,EAAE,CAHkC;IAI1CC,MAAM,EAAE,CAAC,CAJiC;IAK1CC,MAAM,EAAE,CALkC;IAM1CC,OAAO,EAAE,CANiC;IAO1CC,QAAQ,EAAE,QAPgC;IAQ1CC,IAAI,EAAE,eARoC;IAS1CC,QAAQ,EAAE,aATgC;IAU1CC,UAAU,EAAE;GAVd;EAaA,OACEf,4BAAA,MAAA;IACEF,EAAE,EAAEA;IACJG,KAAK,EAAEI;IACPW,IAAI,EAAC;iBACMZ;;GAJb,EAOGD,YAPH,CADF;AAWD;;SChCec;EACd,MAAM,CAACd,YAAD,EAAee,eAAf,IAAkCC,cAAQ,CAAC,EAAD,CAAhD;EACA,MAAMC,QAAQ,GAAGC,iBAAW,CAAEtB,KAAD;IAC3B,IAAIA,KAAK,IAAI,IAAb,EAAmB;MACjBmB,eAAe,CAACnB,KAAD,CAAf;;GAFwB,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IAACqB,QAAD;IAAWjB;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;const i={display:"none"}
|
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"};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,ariaLiveType:r="assertive"}=e;return n.createElement("div",{id:t,style:{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"},role:"status","aria-live":r,"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 announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\
|
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 ariaLiveType?: \"polite\" | \"assertive\" | \"off\";\n}\n\nexport function LiveRegion({id, announcement, ariaLiveType = \"assertive\"}: Props) {\n // Hide element visually but keep it readable by screen readers\n const 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 \n return (\n <div\n id={id}\n style={visuallyHidden}\n role=\"status\"\n aria-live={ariaLiveType}\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","id","value","React","style","announcement","ariaLiveType","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","role","setAnnouncement","useState","announce","useCallback"],"mappings":"oJAOA,MAAMA,EAAoC,CACxCC,QAAS,2CAGgBC,GAACA,EAADC,MAAKA,KAC9B,OACEC,uBAAKF,GAAIA,EAAIG,MAAOL,GACjBG,uCCNoBD,GAACA,EAADI,aAAKA,EAALC,aAAmBA,EAAe,eAe3D,OACEH,uBACEF,GAAIA,EACJG,MAhBwC,CAC1CG,SAAU,QACVC,MAAO,EACPC,OAAQ,EACRC,QAAS,EACTC,OAAQ,EACRC,QAAS,EACTC,SAAU,SACVC,KAAM,gBACNC,SAAU,cACVC,WAAY,UAOVC,KAAK,qBACMX,oBAGVD,uCC5BL,MAAOA,EAAca,GAAmBC,WAAS,IAOjD,MAAO,CAACC,SANSC,cAAanB,IACf,MAATA,GACFgB,EAAgBhB,IAEjB,IAEeG,aAAAA"}
|
@@ -14,28 +14,30 @@ function HiddenText(_ref) {
|
|
14
14
|
}, value);
|
15
15
|
}
|
16
16
|
|
17
|
-
const visuallyHidden = {
|
18
|
-
position: 'fixed',
|
19
|
-
width: 1,
|
20
|
-
height: 1,
|
21
|
-
margin: -1,
|
22
|
-
border: 0,
|
23
|
-
padding: 0,
|
24
|
-
overflow: 'hidden',
|
25
|
-
clip: 'rect(0 0 0 0)',
|
26
|
-
clipPath: 'inset(100%)',
|
27
|
-
whiteSpace: 'nowrap'
|
28
|
-
};
|
29
17
|
function LiveRegion(_ref) {
|
30
18
|
let {
|
31
19
|
id,
|
32
|
-
announcement
|
20
|
+
announcement,
|
21
|
+
ariaLiveType = "assertive"
|
33
22
|
} = _ref;
|
23
|
+
// Hide element visually but keep it readable by screen readers
|
24
|
+
const visuallyHidden = {
|
25
|
+
position: 'fixed',
|
26
|
+
width: 1,
|
27
|
+
height: 1,
|
28
|
+
margin: -1,
|
29
|
+
border: 0,
|
30
|
+
padding: 0,
|
31
|
+
overflow: 'hidden',
|
32
|
+
clip: 'rect(0 0 0 0)',
|
33
|
+
clipPath: 'inset(100%)',
|
34
|
+
whiteSpace: 'nowrap'
|
35
|
+
};
|
34
36
|
return React.createElement("div", {
|
35
37
|
id: id,
|
36
38
|
style: visuallyHidden,
|
37
39
|
role: "status",
|
38
|
-
"aria-live":
|
40
|
+
"aria-live": ariaLiveType,
|
39
41
|
"aria-atomic": true
|
40
42
|
}, announcement);
|
41
43
|
}
|
@@ -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 announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\
|
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 ariaLiveType?: \"polite\" | \"assertive\" | \"off\";\n}\n\nexport function LiveRegion({id, announcement, ariaLiveType = \"assertive\"}: Props) {\n // Hide element visually but keep it readable by screen readers\n const 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 \n return (\n <div\n id={id}\n style={visuallyHidden}\n role=\"status\"\n aria-live={ariaLiveType}\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","LiveRegion","announcement","ariaLiveType","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","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;;SCTeG;MAAW;IAACJ,EAAD;IAAKK,YAAL;IAAmBC,YAAY,GAAG;;;EAE3D,MAAMC,cAAc,GAAwB;IAC1CC,QAAQ,EAAE,OADgC;IAE1CC,KAAK,EAAE,CAFmC;IAG1CC,MAAM,EAAE,CAHkC;IAI1CC,MAAM,EAAE,CAAC,CAJiC;IAK1CC,MAAM,EAAE,CALkC;IAM1CC,OAAO,EAAE,CANiC;IAO1CC,QAAQ,EAAE,QAPgC;IAQ1CC,IAAI,EAAE,eARoC;IAS1CC,QAAQ,EAAE,aATgC;IAU1CC,UAAU,EAAE;GAVd;EAaA,OACEf,mBAAA,MAAA;IACEF,EAAE,EAAEA;IACJG,KAAK,EAAEI;IACPW,IAAI,EAAC;iBACMZ;;GAJb,EAOGD,YAPH,CADF;AAWD;;SChCec;EACd,MAAM,CAACd,YAAD,EAAee,eAAf,IAAkCC,QAAQ,CAAC,EAAD,CAAhD;EACA,MAAMC,QAAQ,GAAGC,WAAW,CAAEtB,KAAD;IAC3B,IAAIA,KAAK,IAAI,IAAb,EAAmB;MACjBmB,eAAe,CAACnB,KAAD,CAAf;;GAFwB,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IAACqB,QAAD;IAAWjB;GAAlB;AACD;;;;"}
|
@@ -2,5 +2,6 @@
|
|
2
2
|
export interface Props {
|
3
3
|
id: string;
|
4
4
|
announcement: string;
|
5
|
+
ariaLiveType?: "polite" | "assertive" | "off";
|
5
6
|
}
|
6
|
-
export declare function LiveRegion({ id, announcement }: Props): JSX.Element;
|
7
|
+
export declare function LiveRegion({ id, announcement, ariaLiveType }: Props): JSX.Element;
|