{"_id":"react-dnd-accessible-backend","_rev":"16-920506bbfc7bf0158ae4ebe5708284bf","name":"react-dnd-accessible-backend","dist-tags":{"latest":"2.1.0"},"versions":{"0.9.0":{"name":"react-dnd-accessible-backend","version":"0.9.0","keywords":["a11y","keyboard","react","react-dnd","dnd","sortable","drag-and-drop","drag-n-drop","drag-drop","drag","drop","typescript"],"author":{"name":"Jon Egeland","email":"jon.egeland@discordapp.com"},"license":"MIT","_id":"react-dnd-accessible-backend@0.9.0","maintainers":[{"name":"faulty","email":"jonegeland@gmail.com"}],"homepage":"https://github.com/discord/react-dnd-accessible-backend#readme","bugs":{"url":"https://github.com/discord/react-dnd-accessible-backend/issues"},"dist":{"shasum":"1f0fc7eb97a2e71d65b235b369333f602c3bedb8","tarball":"https://registry.npmjs.org/react-dnd-accessible-backend/-/react-dnd-accessible-backend-0.9.0.tgz","fileCount":31,"integrity":"sha512-p21QF+O2O2VsAEcoI/6qPKSJmGxF/SDpn+GhcUl79FfRcGW66m5uFpHbCYi1WtUEr/00zXgSlJg91JMxdeHOZw==","signatures":[{"sig":"MEUCIQCyA7g5S9ykiKb1ws2nLes5obZx3BwIbLfpLSYXYQTFbgIgbKe0pOK8nSKiVluxpKUYhzE6NKXlSsuLhhEhK7y/S9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205261},"main":"dist/index.js","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.module.js","source":"src/index.tsx","gitHead":"ac2d4b35c790d48f6f989af576f07698d2adf3d9","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rm -rf dist && microbundle --external react","format":"prettier --write '**'","examples":"parcel serve examples/index.html","prepublishOnly":"npm run -s build"},"_npmUser":{"name":"faulty","email":"jonegeland@gmail.com"},"repository":{"url":"git+https://github.com/discord/react-dnd-accessible-backend.git","type":"git"},"_npmVersion":"6.14.8","description":"An add-on backend for react-dnd that provides support for keyboards and screenreaders by default.","directories":{},"_nodeVersion":"14.14.0","dependencies":{"immutability-helper":"^3.1.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.2","parcel":"^2.0.0-rc.0","prettier":"^2.0.4","react-dnd":"14.0.3","react-dom":"^17.0.2","typescript":"4.4.3","microbundle":"^0.13.3","@types/react":"17.0.26","@types/react-dom":"17.0.9","react-dnd-html5-backend":"14.0.1","react-dnd-multi-backend":"7.0.0-alpha.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dnd":"14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-dnd-accessible-backend_0.9.0_1633131928947_0.4705994990254492","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"react-dnd-accessible-backend","version":"1.0.0","keywords":["a11y","keyboard","react","react-dnd","dnd","sortable","drag-and-drop","drag-n-drop","drag-drop","drag","drop","typescript"],"author":{"name":"Jon Egeland","email":"jon.egeland@discordapp.com"},"license":"MIT","_id":"react-dnd-accessible-backend@1.0.0","maintainers":[{"name":"faulty","email":"jonegeland@gmail.com"}],"homepage":"https://github.com/discord/react-dnd-accessible-backend#readme","bugs":{"url":"https://github.com/discord/react-dnd-accessible-backend/issues"},"dist":{"shasum":"76117ba7dc2a2f9e22e4371c1a66da1a85c0ad12","tarball":"https://registry.npmjs.org/react-dnd-accessible-backend/-/react-dnd-accessible-backend-1.0.0.tgz","fileCount":31,"integrity":"sha512-OYryTz6FT77OC12ffJkIzWBeAzBwQs9Gi5sVec0Be3ld2cqNdmKo9IjKKkldKWCHkk+k2aV/V1F81MnM+1/U+A==","signatures":[{"sig":"MEYCIQD3g3uPGT0Ozrfz/qzMnfA5s205Z6c31dMRaIx/pYoYVgIhAPpLvXgKm+v4rjd9RK6ab0sFHPJsK1HJ8bfNrf7d8lGr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205261},"main":"dist/index.js","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.module.js","source":"src/index.tsx","gitHead":"ac2d4b35c790d48f6f989af576f07698d2adf3d9","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rm -rf dist && microbundle --external react","format":"prettier --write '**'","examples":"parcel serve examples/index.html","prepublishOnly":"npm run -s build"},"_npmUser":{"name":"faulty","email":"jonegeland@gmail.com"},"repository":{"url":"git+https://github.com/discord/react-dnd-accessible-backend.git","type":"git"},"_npmVersion":"6.14.8","description":"An add-on backend for react-dnd that provides support for keyboards and screenreaders by default.","directories":{},"_nodeVersion":"14.14.0","dependencies":{"immutability-helper":"^3.1.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.2","parcel":"^2.0.0-rc.0","prettier":"^2.0.4","react-dnd":"14.0.3","react-dom":"^17.0.2","typescript":"4.4.3","microbundle":"^0.13.3","@types/react":"17.0.26","@types/react-dom":"17.0.9","react-dnd-html5-backend":"14.0.1","react-dnd-multi-backend":"7.0.0-alpha.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dnd":"14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-dnd-accessible-backend_1.0.0_1633132153855_0.983192713725136","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"react-dnd-accessible-backend","version":"1.0.1","keywords":["a11y","keyboard","react","react-dnd","dnd","sortable","drag-and-drop","drag-n-drop","drag-drop","drag","drop","typescript"],"author":{"name":"Jon Egeland","email":"jon.egeland@discordapp.com"},"license":"MIT","_id":"react-dnd-accessible-backend@1.0.1","maintainers":[{"name":"samschlegel","email":"npm@lutin.us"},{"name":"birarda","email":"npm@birarda.com"},{"name":"thejameskyle","email":"me@thejameskyle.com"},{"name":"faulty","email":"jonegeland@gmail.com"}],"homepage":"https://github.com/discord/react-dnd-accessible-backend#readme","bugs":{"url":"https://github.com/discord/react-dnd-accessible-backend/issues"},"dist":{"shasum":"32fddf3ea22e59d3435d3038067c33a0f216c14e","tarball":"https://registry.npmjs.org/react-dnd-accessible-backend/-/react-dnd-accessible-backend-1.0.1.tgz","fileCount":31,"integrity":"sha512-bh4FOA43r+zxLduELKl2bEiEsf3Ja1NahzpUOcBUn/3mdXm2i/4pV59dXblBwEZVgg8z/ZhEivy244AN7xTMLQ==","signatures":[{"sig":"MEUCIQDEWEKWRcrjgSYKVQfa6+owA3xqAPmqF1XP37TlUkRYzQIgDdJ4pgyo/cWOLK1ti91UzKmdISkCbCvVZG9XIIJJ2R0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208958},"main":"dist/index.js","types":"dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.module.js","source":"src/index.tsx","gitHead":"8c5c96fa05ce185fe8db3ab3b900ff58891eb6f8","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rm -rf dist && microbundle --external react","format":"prettier --write '**'","examples":"parcel serve examples/index.html","prepublishOnly":"npm run -s build"},"_npmUser":{"name":"faulty","email":"jonegeland@gmail.com"},"repository":{"url":"git+https://github.com/discord/react-dnd-accessible-backend.git","type":"git"},"_npmVersion":"6.14.8","description":"An add-on backend for react-dnd that provides support for keyboards and screenreaders by default.","directories":{},"_nodeVersion":"14.14.0","dependencies":{"immutability-helper":"^3.1.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.2","parcel":"^2.0.0-rc.0","prettier":"^2.0.4","react-dnd":"14.0.3","react-dom":"^17.0.2","typescript":"4.4.3","microbundle":"^0.13.3","@types/react":"17.0.26","@types/react-dom":"17.0.9","react-dnd-html5-backend":"14.0.1","react-dnd-multi-backend":"7.0.0-alpha.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dnd":"14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-dnd-accessible-backend_1.0.1_1633819630075_0.5900743145599008","host":"s3://npm-registry-packages"}},"2.0.0-rc1":{"name":"react-dnd-accessible-backend","version":"2.0.0-rc1","keywords":["a11y","keyboard","react","react-dnd","dnd","sortable","drag-and-drop","drag-n-drop","drag-drop","drag","drop","typescript"],"author":{"name":"Jon Egeland","email":"jon.egeland@discordapp.com"},"license":"MIT","_id":"react-dnd-accessible-backend@2.0.0-rc1","maintainers":[{"name":"discord_npmjs","email":"npmjs@discordapp.com"},{"name":"discord_kevin","email":"kevin.hanaford@discordapp.com"},{"name":"brian-armstrong-discord","email":"brian.armstrong@discordapp.com"},{"name":"samschlegel","email":"npm@lutin.us"},{"name":"birarda","email":"npm@birarda.com"},{"name":"faulty","email":"jonegeland@gmail.com"}],"homepage":"https://github.com/discord/react-dnd-accessible-backend#readme","bugs":{"url":"https://github.com/discord/react-dnd-accessible-backend/issues"},"dist":{"shasum":"71efa25b4028f20e60d81069ea191d5aa11cbc6f","tarball":"https://registry.npmjs.org/react-dnd-accessible-backend/-/react-dnd-accessible-backend-2.0.0-rc1.tgz","fileCount":33,"integrity":"sha512-VynfVa/29swtSq8tIOB1wePZBvwSAZAfgzX2c2EFM+PNUYX9mIMWWSSFOWOJdf1aacPEANlKMf3inPzcuNk2OA==","signatures":[{"sig":"MEUCIQDJSxa/A+JNPzyIj1+p3ssjQw0WgzBAIZ7hFXZbi9IxwQIgMEoz5NMHPfg5xE8iyz8xCWtRseUcA94rm+x5uIeaY1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":59573},"main":"dist/index.js","_from":"file:react-dnd-accessible-backend-2.0.0-rc1.tgz","types":"dist/index.d.ts","source":"index.tsx","engines":{"npm":">=7.0.0","node":">=14.13.0"},"exports":{".":"./dist/index.js"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc","format":"prettier --write '**'"},"_npmUser":{"name":"faulty","email":"jonegeland@gmail.com"},"_resolved":"","_integrity":"","repository":{"url":"git+https://github.com/discord/react-dnd-accessible-backend.git","type":"git"},"_npmVersion":"6.14.18","description":"An add-on backend for react-dnd that provides support for keyboards and screenreaders by default.","directories":{},"sideEffects":[],"_nodeVersion":"14.21.3","dependencies":{"@react-aria/live-announcer":"^3.3.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","dnd-core":"16.0.1","prettier":"^2.0.4","react-dnd":"16.0.1","react-dom":"^18.2.0","typescript":"5.0.4","@types/react":"17.0.26","@types/react-dom":"17.0.9","react-dnd-html5-backend":"16.0.1","react-dnd-multi-backend":"8.0.0"},"peerDependencies":{"react":">=16.8.0","react-dnd":">=14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-dnd-accessible-backend_2.0.0-rc1_1684009120727_0.006128571261579507","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"react-dnd-accessible-backend","version":"2.0.0","keywords":["a11y","keyboard","react","react-dnd","dnd","sortable","drag-and-drop","drag-n-drop","drag-drop","drag","drop","typescript"],"author":{"name":"Jon Egeland","email":"jon.egeland@discordapp.com"},"license":"MIT","_id":"react-dnd-accessible-backend@2.0.0","maintainers":[{"name":"discord_npmjs","email":"npmjs@discordapp.com"},{"name":"discord_kevin","email":"kevin.hanaford@discordapp.com"},{"name":"brian-armstrong-discord","email":"brian.armstrong@discordapp.com"},{"name":"samschlegel","email":"npm@lutin.us"},{"name":"birarda","email":"npm@birarda.com"},{"name":"faulty","email":"jonegeland@gmail.com"}],"homepage":"https://github.com/discord/react-dnd-accessible-backend#readme","bugs":{"url":"https://github.com/discord/react-dnd-accessible-backend/issues"},"dist":{"shasum":"58fe421e3973779a2b207a65352dfa1d98c62b25","tarball":"https://registry.npmjs.org/react-dnd-accessible-backend/-/react-dnd-accessible-backend-2.0.0.tgz","fileCount":33,"integrity":"sha512-PUXvtgv0OGes9vTEv08Pp7Zk8vOYHdZ3lNHpY/QrBvx4hFY8CVMh5OuUHBunfYFMunHonzGCcfFgW51x/DGLWQ==","signatures":[{"sig":"MEUCIQCeDyrw52dm+ICbdTadBm98q07HgRPPEVUvHIEY3qdlFAIgKMoUEs02ncGMJ+PE9sj/2zkChL+ehu7cSQL8u3hHOJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":59558},"main":"dist/index.js","_from":"file:react-dnd-accessible-backend-2.0.0.tgz","types":"dist/index.d.ts","source":"index.tsx","engines":{"npm":">=7.0.0","node":">=14.13.0"},"exports":{".":"./dist/index.js"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc","format":"prettier --write '**'"},"_npmUser":{"name":"faulty","email":"jonegeland@gmail.com"},"_resolved":"","_integrity":"","repository":{"url":"git+https://github.com/discord/react-dnd-accessible-backend.git","type":"git"},"_npmVersion":"6.14.18","description":"An add-on backend for react-dnd that provides support for keyboards and screenreaders by default.","directories":{},"sideEffects":[],"_nodeVersion":"14.21.3","dependencies":{"@react-aria/live-announcer":"^3.3.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","dnd-core":"16.0.1","prettier":"^2.0.4","react-dnd":"16.0.1","react-dom":"^18.2.0","typescript":"5.0.4","@types/react":"17.0.26","@types/react-dom":"17.0.9","react-dnd-html5-backend":"16.0.1","react-dnd-multi-backend":"8.0.0"},"peerDependencies":{"react":">=16.8.0","react-dnd":">=14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-dnd-accessible-backend_2.0.0_1684010078580_0.034314802484803675","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"react-dnd-accessible-backend","version":"2.1.0","keywords":["a11y","keyboard","react","react-dnd","dnd","sortable","drag-and-drop","drag-n-drop","drag-drop","drag","drop","typescript"],"author":{"name":"Jon Egeland","email":"jon.egeland@discordapp.com"},"license":"MIT","_id":"react-dnd-accessible-backend@2.1.0","maintainers":[{"name":"discord_npmjs","email":"npmjs@discordapp.com"},{"name":"discord_kevin","email":"kevin.hanaford@discordapp.com"},{"name":"brian-armstrong-discord","email":"brian.armstrong@discordapp.com"},{"name":"samschlegel","email":"npm@lutin.us"},{"name":"birarda","email":"npm@birarda.com"},{"name":"faulty","email":"jonegeland@gmail.com"}],"homepage":"https://github.com/discord/react-dnd-accessible-backend#readme","bugs":{"url":"https://github.com/discord/react-dnd-accessible-backend/issues"},"dist":{"shasum":"4045d6c1524db8d4784b61409abc973aa41ede00","tarball":"https://registry.npmjs.org/react-dnd-accessible-backend/-/react-dnd-accessible-backend-2.1.0.tgz","fileCount":33,"integrity":"sha512-wzg1mshxVGbeTGeYFucFJ3uf/lG5mZL5VqQbEb3AIfgkkCBoo7tBjnT9Tp5evVCTR2ymhM0BDGGnv8qPMeyJKg==","signatures":[{"sig":"MEUCIQDTpsP+dyeHMxtehaTK/E2n8RJzaB/vLRZSUZqajhDw/AIgJHTMMigX9KhBogULmA7BOcUXq7JvhwQn+xxVdzGWCxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":59756},"main":"dist/index.js","_from":"file:react-dnd-accessible-backend-2.1.0.tgz","types":"dist/index.d.ts","source":"index.tsx","engines":{"npm":">=7.0.0","node":">=14.13.0"},"exports":{".":"./dist/index.js"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc","format":"prettier --write '**'"},"_npmUser":{"name":"faulty","email":"jonegeland@gmail.com"},"_resolved":"/private/var/folders/65/zbn3qvbd6wsdjy5dyl09mvmh0000gq/T/f0226dea05d5b62d2ba19267e6c0de34/react-dnd-accessible-backend-2.1.0.tgz","_integrity":"sha512-wzg1mshxVGbeTGeYFucFJ3uf/lG5mZL5VqQbEb3AIfgkkCBoo7tBjnT9Tp5evVCTR2ymhM0BDGGnv8qPMeyJKg==","repository":{"url":"git+https://github.com/discord/react-dnd-accessible-backend.git","type":"git"},"_npmVersion":"9.8.1","description":"An add-on backend for react-dnd that provides support for keyboards and screenreaders by default.","directories":{},"sideEffects":[],"_nodeVersion":"20.6.1","dependencies":{"@react-aria/live-announcer":"^3.3.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","dnd-core":"16.0.1","prettier":"^2.0.4","react-dnd":"16.0.1","react-dom":"^18.2.0","typescript":"5.0.4","@types/react":"17.0.26","@types/react-dom":"17.0.9","react-dnd-html5-backend":"16.0.1","react-dnd-multi-backend":"8.0.0"},"peerDependencies":{"react":">=16.8.0","react-dnd":">=14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-dnd-accessible-backend_2.1.0_1695664817868_0.8668870207859709","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-10-01T23:45:28.947Z","modified":"2025-12-17T17:10:12.976Z","0.9.0":"2021-10-01T23:45:29.101Z","1.0.0":"2021-10-01T23:49:14.021Z","1.0.1":"2021-10-09T22:47:10.220Z","2.0.0-rc1":"2023-05-13T20:18:40.858Z","2.0.0":"2023-05-13T20:34:38.776Z","2.1.0":"2023-09-25T18:00:18.033Z"},"bugs":{"url":"https://github.com/discord/react-dnd-accessible-backend/issues"},"author":{"name":"Jon Egeland","email":"jon.egeland@discordapp.com"},"license":"MIT","homepage":"https://github.com/discord/react-dnd-accessible-backend#readme","keywords":["a11y","keyboard","react","react-dnd","dnd","sortable","drag-and-drop","drag-n-drop","drag-drop","drag","drop","typescript"],"repository":{"url":"git+https://github.com/discord/react-dnd-accessible-backend.git","type":"git"},"description":"An add-on backend for react-dnd that provides support for keyboards and screenreaders by default.","maintainers":[{"email":"npm@lutin.us","name":"samschlegel"},{"email":"npm@birarda.com","name":"birarda"},{"email":"jonegeland@gmail.com","name":"faulty"},{"email":"kevin.hanaford@discordapp.com","name":"discord_kevin"},{"email":"npmjs@discordapp.com","name":"discord_npmjs"}],"readme":"# react-dnd-accessible-backend\n\nAn add-on backend for [`react-dnd`](https://react-dnd.github.io/react-dnd/about) that provides\nsupport for keyboards and screenreaders by default. Keep writing the same drag and drop code while\nenabling more users to interact with your app.\n\n## Why\n\n`react-dnd` (and the system of packages it manages) does not directly support drag and drop other\nthan using a mouse (or a finger on mobile devices). It encapsulates the\n[HTML5 Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API),\nwhich _could_ support other input devices, but most browser implementations today only support\npointers. `react-dnd` also does not provide any way of notifying screenreaders that drag and drop\noperations are happening. Again, the HTML5 API makes this _possible_, but it is not supported in any\nmeaningful way.\n\nOther drag and drop implementations out there _do_ support these features, such as\n[`react-beautiful-dnd`](https://github.com/atlassian/react-beautiful-dnd) and\n[`dndkit`](https://dndkit.com/), and they do it well. However, `react-dnd` remains by far the most\npopular drag and drop library for React applications and is likely stay in that position for a while\nas migrating between them is not easy, and the limitations of other systems keep many complex\napplications from moving at all.\n\nThis package brings support for both alternative input devices like keyboards (or anything that can\ntrigger keyboard events in the browser) as well as announcements for screenreaders to `react-dnd`\nnatively, without changing any of the public API that developers are used to or limiting of the\nstructural flexibility it is known for.\n\n## Installation\n\nThis package is available on npm as `react-dnd-accessible-backend`.\n\n```shell\nnpm install react-dnd-accessible-backend\n```\n\n## Basic Usage\n\n`react-dnd-accessible-backend` is not a _replacement_ backend for `react-dnd`, but rather an\n_additional_ one. This means you will most likely need to compose backends together to get all of\nthe functionality you would like (mouse dragging, keyboards, pointer dragging on mobile, etc).\n\nOne of the easiest ways to do this is with\n[`react-dnd-multi-backend`](https://www.npmjs.com/package/react-dnd-multi-backend) and it's\nTransition system. Using that library, just add another backend entry and create a Transition for\nthe keyboard trigger, like so:\n\n```typescript\nimport KeyboardBackend, { isKeyboardDragTrigger } from \"react-dnd-accessible-backend\";\nimport { DndProvider } from \"react-dnd\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\nimport { MultiBackend, createTransition } from \"react-dnd-multi-backend\";\n\nconst KeyboardTransition = createTransition(\"keydown\", (event) => {\n if (!isKeyboardDragTrigger(event as KeyboardEvent)) return false;\n event.preventDefault();\n return true;\n});\n\nconst DND_OPTIONS = {\n backends: [\n {\n id: \"html5\",\n backend: HTML5Backend,\n transition: MouseTransition,\n },\n {\n id: \"keyboard\",\n backend: KeyboardBackend,\n context: { window, document },\n options: { preview: true },\n transition: KeyboardTransition,\n },\n ],\n};\n\nfunction App() {\n return (\n \n ...\n \n );\n}\n```\n\nThat's all it takes to get started! There are a few [considerations](#considerations) you'll want to\nkeep in mind to ensure a really good experience for your users, but everything else should be\nautomatic.\n\nAt the moment, the keybinds used for drag and drop are hard-coded as:\n\n- `ctrl+d` (`command+d` on macOS) to pick up a draggable item\n- up and down arrow keys to move between drop targets\n- `Enter` or `Spacebar` to drop the dragged item on a drop target\n- `Escape` while dragging to cancel the drag operation\n\n## Options\n\n`react-dnd-accessible-backend` provides a few options for customizing styles and behavior for use in\nyour app. If you're using `react-dnd-multi-backend`, these can get passed in as an `options` field\non the backend configuration object, or otherwise as the third argment when calling the backend\ndirectly as a factory function (like `KeyboardBackend(manager, context, options)`.\n\nThese options are:\n\n### `getAnnouncementMessages?: () => AnnouncementMessages`\n\nThis function is called any time a drag and drop action is performed by the keyboard backend and is\nuseful for providing translations or more descriptive messages for screenreader users as they\ninteract with draggable items.\n\nIf this option is not provided, a\n[default set of messages in English](https://github.com/discord/react-dnd-accessible-backend/blob/main/src/util/AnnouncementMessages.tsx#L16-L37)\nwill be used. Providing a separate function requires that you specify a replacement for _all_\nmessages that can be announced. These (currently) are `pickedUpItem`, `droppedItem`, `hoveredTarget`\nand `canceledDrag`.\n\nEach message getter is defined as a function that takes in an `itemId` and the HTML `node` that is\nrelevant to the operation.\n\n```typescript\n// A very naive example of how to provide custom announcement messages.\nfunction getCustomAnnouncementMessages() {\n return {\n pickedUpItem: (itemId: string, node: HTMLElement | null) => `Picked up ${itemId}`,\n droppedItem: (itemId: string, node: HTMLElement | null) => `Dropped ${itemId}`,\n hoveredTarget: (itemId: string, node: HTMLElement | null) => `Hoevered over ${itemId}`,\n canceledDrag: (itemId: string, node: HTMLElement | null) => \"Drag cancelled\"\n };\n}\n\n{\n options: {\n getAnnouncementMessages: getCustomAnnouncementMessages,\n },\n}\n```\n\n### `isDragTrigger?: (event: KeyboardEvent, isFirstEvent: boolean) => boolean`\n\nThis function is used to determine if a keyboard event that occurs on a draggable element should\ntrigger the start of a drag operation. Overriding this option lets you customize the keybind used to\nstart dragging or perform other checks before the drag is allowed to start.\n\nIf this option is not provided, it will default to using the `isKeyboardDragTrigger` that is\nexported as part of this package, which triggers when `ctrl/command+d` is pressed.\n\nThs `isFirstEvent` parameter indicates whether this is the first event the backend is receiving\nafter being setup.\n\n```typescript\n{\n options: {\n // This will start a drag whenever the users presses\n // `m` while focused on a draggable element.\n isDragTrigger: (event) => event.key === \"m\"\n },\n}\n```\n\n**NOTE:** In most cases when `react-dnd-multi-backend`, you'll want to use the same trigger function\nin this option for the trigger in `createTransition`. Otherwise the backend may not be set up when\nyou expect to start a drag. This is also where the `isFirstEvent` property can come in handy, since\n`react-dnd-multi-backend` will sometimes fire cloned events that don't have keyboard properties on\nthem. See the comment in\n[`isKeyboardDragTrigger`](https://github.com/discord/react-dnd-accessible-backend/blob/6b7413eed66630b5e8e00864c9a282124a9e484e/src/util/isKeyboardDragTrigger.tsx#L5-L10)\nfor more information.\n\n### `announcer`\n\nBy default, `react-dnd-accessible-backend` will append an `aria-live` area to the DOM to provide\nscreen-reader announcements, powered by\n[`@react-aria/live-announcer`](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx).\n\nIf you already have a comparable announcer utility in your app, then you can use the `announcer`\noption to replace `DragAnnouncer`'s announcer with your own. **Pease note that multiple `aria-live`\nareas in an app or web page could conflict**, which is why we have provided this override option to\nre-use any existing `aria-live` announcers.\n\n```typescript\ninterface Announcer {\n announce(message: string, assertiveness?: 'assertive' | 'polite', timeout?: number): void;\n clearAnnouncements(assertiveness?: 'assertive' | 'polite'): void;\n}\n\nconst LiveAnnouncer = require('@react-aria/live-announcer');\nconst AccessibilityAnnouncer: Announcer = {\n announce: LiveAnnouncer.announce,\n clearAnnouncements: LiveAnnouncer.clearAnnouncer,\n};\n\n{\n options: {\n announcer: AccessibilityAnnouncer,\n },\n}\n```\n\n### `previewerClassName`\n\nSimilar to the `announcerClassName` this option provides a custom class name to use for the drag\npreviewer, which is a container that gets populated by a clone of the currently-dragged element and\npositions itself in the appropriate place on screen for the currently-hovered drop target.\n\n```typescript\n{\n options: {\n previewerClassName: styles.dndDragPreview,\n },\n}\n```\n\n**NOTE:** It is important that this div does _not_ have any styles that affect its spatial\npositioning on screen, as this is controlled internally by the backend. What it _can_ be used for\nare things like adding a drop shadow or highlight to the drag preview, changing opacities, borders,\nscaling, and other stylistic options.\n\n### `preview`\n\nControl whether drag previews are rendered for this backend.\n\n`react-dnd-multi-backend` provides a configuration field, `preview`, when creating the backend\npipeline, which determines whether previews are enabled or hidden when using a given backend.\nHowever, this only works by introspecting the MultiBackend manager when rendering a Preview from\ninside of a React component context (it relies on the Context API to access the backend manager and\nread the option).\n\nBecause this library renders its own previews _outside_ of React, it has no access to the context,\nand can't get access to the MultiBackend instance to read that configuration.\n\nInstead, if you would like to hide the automatically-created previews when using this backend, pass\nthis configuration under the `options` object:\n\n```typescript\n{\n options: {\n preview: false;\n }\n}\n```\n\n### `announcerClassName` (deprecated)\n\nDeprecated in version 2. To customize the presentation of drag-and-drop announcements, you can now\nuse the `announcer` option to build your own custom announcer.\n\n`react-dnd-accessible-backend` uses\n[`@react-aria/live-announcer`](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx)\nas its default announcer, which visually hides all announcements.\n\n```typescript\n{\n options: {\n announcerClassName: styles.dndAnnouncer,\n },\n}\n```\n\n## Considerations\n\n### Ensuring accessible labels\n\nThe default announcement messages will look at a few properties to try and create the most relevant\nlabel possible for the user. At the highest priority, if you specify a `data-dnd-name` attribute on\nthe target element (either the drag source or the drop target, depending on the operation), that\nwill be used directly. Next, it will look for an `aria-label` on the same element, and finally it\nwill fall back to using the `innerText` of the element itself.\n\nAs an example:\n\n```typescript\n// This would read out \"Picked up Example A\" when it is picked up for dragging\n
\n// This would read out \"Over Target B\" when the user drags an item over it with the keyboard backend\n\n// This would read out \"Dropped an element with text inside\" when it is dropped on a target\n
an element with text inside
\n```\n\nWhile this _should_ ensure that any item a user picks up or drops has _some_ kind of label on it,\nfalling back to the inner text should be a last resort, and ideally you should add an `aria-label`\nor at least a `data-dnd-name` to provide a more succinct, helpful label for screenreader users.\n\n### \"Sort on \"hover\"\n\nA common pattern with `react-dnd` is to perform sorting operations in the `hover` callback on drop\ntargets. In fact this is how most of the\n[react-dnd sorting examples](https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_ts/04-sortable/simple)\noperate.\n\nHowever, this pattern poses a problem for trying to drag and drop with a keyboard, because the user\ndoesn't have the same granularity of control in movement. In the example linked above, sorting\nhappens based on whether the user's mouse is dragging over the upper or lower half of the drop\ntarget. A keyboard user wouldn't be able to choose between those positions, so they effectively miss\nout on some sorting options, or in some cases the sorting won't happen at all since by default the\ndrag operations go over the exact center of the drop target.\n\nAdditionally, sorting on hover means that a user \"browsing\" through drop targets will inadvertently\nbe reorganizing their lists without ever actually dropping an item. If a user picks up an item,\ndrags it up a few places, then decides to cancel the drag, the item will have moved those spaces\nanyway because the move happened on hover rather than when the item was actually dropped.\n\nThe best way to avoid this issue is to just avoid sorting in the `hover` callback and use drag\nplaceholders and other indicators to show where an element will drop. This may involve some\nrefactoring and rethinking designs, but the end result will be more accessible (and often more\nperformant!) for everyone.\n\n# Thanks to\n\n- [`react-dnd-keyboard-backend`](https://github.com/mmissey/react-dnd-keyboard-backend) as an\n inspiration and proof-of-concept for keyboard-based backends.\n- [`react-dnd-multi-backend`](https://github.com/LouisBrunner/dnd-multi-backend/tree/main/packages/react-dnd-multi-backend)\n for making it possible to compose backends together.\n- [`react-beautiful-dnd`](https://github.com/atlassian/react-beautiful-dnd) as a guiding example of\n what a good keyboard-based dnd interface could feel like.\n- [`@react-aria/live-announcer`](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx)\n and the [React Aria Team](https://react-spectrum.adobe.com/react-aria/) who are dedicated to\n creating accessible components and tools.\n","readmeFilename":"README.md"}