@dnd-kit/accessibility 3.1.0 → 3.1.1-next-20241023141325
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 +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-20241023141325
|
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;;;;"}
|