@dnd-kit/accessibility 3.1.0 → 3.1.1-next-20241023141032
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +10 -0
- package/dist/accessibility.cjs.development.js +2 -0
- 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 +2 -0
- package/dist/accessibility.esm.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,15 @@
|
|
1
1
|
# @dnd-kit/accessibility
|
2
2
|
|
3
|
+
## 3.1.1-next-20241023141032
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- [#1534](https://github.com/clauderic/dnd-kit/pull/1534) [`93602df`](https://github.com/clauderic/dnd-kit/commit/93602df08498b28749e8146e0f6143ab987bc178) Thanks [@duvallj](https://github.com/duvallj)! - Workaround `<LiveRegion>` layout bug by adding explicit `top` and `left`
|
8
|
+
attributes. Under sufficiently complex CSS conditions, the element would
|
9
|
+
overflow containers that it's not supposed to. See [this
|
10
|
+
post](https://blog.duvallj.pw/posts/2024-11-19-chrome-heisenbug-uncovered.html)
|
11
|
+
for a complete explanation.
|
12
|
+
|
3
13
|
## 3.1.0
|
4
14
|
|
5
15
|
### Minor Changes
|
@@ -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 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,
|
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 top: 0,\n left: 0,\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","top","left","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,GAAG,EAAE,CAFqC;IAG1CC,IAAI,EAAE,CAHoC;IAI1CC,KAAK,EAAE,CAJmC;IAK1CC,MAAM,EAAE,CALkC;IAM1CC,MAAM,EAAE,CAAC,CANiC;IAO1CC,MAAM,EAAE,CAPkC;IAQ1CC,OAAO,EAAE,CARiC;IAS1CC,QAAQ,EAAE,QATgC;IAU1CC,IAAI,EAAE,eAVoC;IAW1CC,QAAQ,EAAE,aAXgC;IAY1CC,UAAU,EAAE;GAZd;EAeA,OACEjB,4BAAA,MAAA;IACEF,EAAE,EAAEA;IACJG,KAAK,EAAEI;IACPa,IAAI,EAAC;iBACMd;;GAJb,EAOGD,YAPH,CADF;AAWD;;SClCegB;EACd,MAAM,CAAChB,YAAD,EAAeiB,eAAf,IAAkCC,cAAQ,CAAC,EAAD,CAAhD;EACA,MAAMC,QAAQ,GAAGC,iBAAW,CAAExB,KAAD;IAC3B,IAAIA,KAAK,IAAI,IAAb,EAAmB;MACjBqB,eAAe,CAACrB,KAAD,CAAf;;GAFwB,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IAACuB,QAAD;IAAWnB;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"};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}};
|
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",top:0,left:0,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 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,
|
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 top: 0,\n left: 0,\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","top","left","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,eAiB3D,OACEH,uBACEF,GAAIA,EACJG,MAlBwC,CAC1CG,SAAU,QACVC,IAAK,EACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,QAAS,EACTC,OAAQ,EACRC,QAAS,EACTC,SAAU,SACVC,KAAM,gBACNC,SAAU,cACVC,WAAY,UAOVC,KAAK,qBACMb,oBAGVD,uCC9BL,MAAOA,EAAce,GAAmBC,WAAS,IAOjD,MAAO,CAACC,SANSC,cAAarB,IACf,MAATA,GACFkB,EAAgBlB,IAEjB,IAEeG,aAAAA"}
|
@@ -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 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,
|
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 top: 0,\n left: 0,\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","top","left","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,GAAG,EAAE,CAFqC;IAG1CC,IAAI,EAAE,CAHoC;IAI1CC,KAAK,EAAE,CAJmC;IAK1CC,MAAM,EAAE,CALkC;IAM1CC,MAAM,EAAE,CAAC,CANiC;IAO1CC,MAAM,EAAE,CAPkC;IAQ1CC,OAAO,EAAE,CARiC;IAS1CC,QAAQ,EAAE,QATgC;IAU1CC,IAAI,EAAE,eAVoC;IAW1CC,QAAQ,EAAE,aAXgC;IAY1CC,UAAU,EAAE;GAZd;EAeA,OACEjB,mBAAA,MAAA;IACEF,EAAE,EAAEA;IACJG,KAAK,EAAEI;IACPa,IAAI,EAAC;iBACMd;;GAJb,EAOGD,YAPH,CADF;AAWD;;SClCegB;EACd,MAAM,CAAChB,YAAD,EAAeiB,eAAf,IAAkCC,QAAQ,CAAC,EAAD,CAAhD;EACA,MAAMC,QAAQ,GAAGC,WAAW,CAAExB,KAAD;IAC3B,IAAIA,KAAK,IAAI,IAAb,EAAmB;MACjBqB,eAAe,CAACrB,KAAD,CAAf;;GAFwB,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IAACuB,QAAD;IAAWnB;GAAlB;AACD;;;;"}
|