{"_id":"@react-three/a11y","_rev":"68-6a9c95e61729c9dd2476517d567ae0fa","name":"@react-three/a11y","dist-tags":{"alpha":"2.2.0-alpha.1","latest":"3.0.0"},"versions":{"0.1.0":{"name":"@react-three/a11y","version":"0.1.0","license":"MIT","_id":"@react-three/a11y@0.1.0","maintainers":[{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"dist":{"shasum":"5ab7f5f1921913afd58acb698860694d5560a6e6","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-0.1.0.tgz","fileCount":12,"integrity":"sha512-cWZscfCaduZ4qUI/XZ0tD0/yhmTerLeY0hjxcTV6sxKLqHhZp/s/De4Mw/8fBLBCYBsQhuB8gzvbDbQN1L80xw==","signatures":[{"sig":"MEQCICKikoUNGGDfV95Ii9dt+fshRw9mk+kZjN+i80hbxwp0AiA+bsKx6f05ByjTRi8lrNCiZXbsnKeHdl7FjsCOs3KLRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8xAACRA9TVsSAnZWagAAhRoQAJQpw5kg8I0URNQd6CMR\nLUszkoM9lCBtePkfaeNqlETA4wcxzWgNXcCRHnGbKzzyKZXrQhpjim0qKbob\ncPARczG2CuU+iqw5/wkJRxhp0bTpE6DfYO7AaYPASBWKy4YSVUrAf7rOb18s\nITXoxU5g5TWqS0Fk4k5YEO/EL/2okEuOJaFeu4YlgvKKJEG5Mni3owPyPoZX\nIoM3X1KYknuZA4Pt5fLW7oVYdhEN2s/MlwJzvtIYAPlbNuE/HVufdIHzR/7m\n2q6glZ8EW7vV9ArpCUnvEgJbgLlrYs55c35UfCSTpkLRCvFzn+yEYtHjhb31\nczK2RsX8+Xm5RXqdPr31vhVSB2afj0/XUFkKPKlUX6gGUTaO8xM2vt8k9qcR\n2eyJ9m6s80jF4JhtVAChfWQLzIs5oAqtwC4caULjVmXWFjuCa+bcsGceqNgY\nwJ8MNGWTPvhuT/nNYc/7J764K8syewplN8Zoq13toe2Qbd8b1FqJ3nv1vrDR\nJ+PCfH6vAvuQa6ZON06pneP1WxEqiHW/rSiV0+izvuLSVH6m/Sh2snWVnSZT\ngxzPEkI/kqK79B8tvaZDgiZRjlp02wwfyhkA0ipQGonzkFf2CNykbLBBAAnC\nYT5A5R2XFrUfhs7uksuZfBj92OamdGEuS933v200sziofXOtugdzdL80Zuyx\ncZ8b\r\n=KAEj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"509c9a79011a3187cae45170731e5121843aa4fa","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build"},"typings":"dist/index.d.ts","_npmUser":{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.3.0","description":"Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Letβs get you oriented with whatβs here and how to use it.","directories":{},"_nodeVersion":"15.5.0","_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^4.3.6","react":"^17.0.1","tslib":"^2.0.3","react-dom":"^17.0.1","size-limit":"^4.9.1","typescript":"^4.1.3","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@size-limit/preset-small-lib":"^4.9.1"},"peerDependencies":{"react":">=16"},"_npmOperationalInternal":{"tmp":"tmp/a11y_0.1.0_1609764864021_0.6928411173508482","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@react-three/a11y","version":"0.2.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@0.2.0","maintainers":[{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"b9be560557bbaa9542e388fdfd5e24889ca2b6b0","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-0.2.0.tgz","fileCount":18,"integrity":"sha512-Hpjcmyzspn0iqCAp/jRG47zJzMDM80vnz3g4vKRA7vxptf/lNwOZWIcrWWm4dd16s7iAncuoZPOVL+oGRldX+g==","signatures":[{"sig":"MEYCIQCLidTz/LiWDCFy/wsgTjLzvDi6/LQep3gvYt52V2IPrAIhAKRXc5WFkL20OXAnrfcM1J0kVBg6KzVzjWOe/ckgMiiD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/G/QCRA9TVsSAnZWagAAQLAP/16EFpyxkEi0CVq8Bu40\nI1fVP9m3wRLJ5FYHMrey1mxTH0wXmPPW35vRo3Nn9o699IzPTF8B2042bpQ2\nDLWhGRYG49odv3xNAzEoi3bT6nM1Ay4XWtmNSBvWoUim0RaW80UyyxGEo/pE\nqzQr1la8wr157Da5WHUNhcGCY+TRFlYqkf8pFvJWzddRtpo24bcInudCL92N\nDeoH1gnUI5YD6dODAQfsniV/2ehY339+xdxixZK5NnxQ+UfQc5824Q9/EnpO\n/Quipx/zLpVdxc2wHN/4+sWHqBem/C6UQMzuYFATeeQiXU1hwrOEY1kJvD+n\nPOwVsLrITyk/BWMSffs/XQTxI3KA99Dx1iqmybgP4bMk2F1dWdsiMqpZDI0V\nm4DTU4AKHVHtXoOaDVE3BytMbbeoWB3onWgkt8aLaZtgROhX/ZbDUoGggO4k\nCNEMEBe1U/1+IhH5SMqy786EhhWCDGpLnYmKHZE6d60XgrRyO7ijLQlA0tm+\naoSlZDqCvoLu9QeY72pGogXyNUj0KrJ3pQH+JtK/hPyeEZWRWnPWkwNXlKKQ\n75QRJPQtISm2LbfJY8DBgYq+ePoUzRIS+r+bfatYn5NE0UxLOWog7j/TQiYU\n7MU6ZWv5Pckq419Nay6qs6moi8c62BffHOSmKISmn4hD1QgJwOi+VmFGhxFy\nQbzg\r\n=fh5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"307dfebbf05e4be81715531ef2ee0b47a6cec7e1","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"6.13.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"12.15.0","dependencies":{"zustand":"^3.2.0","@react-three/drei":"^2.2.12"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^4.3.6","react":"^17.0.1","three":"0.124.0","tslib":"^2.0.3","react-dom":"^17.0.1","size-limit":"^4.9.1","typescript":"^4.1.3","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","react-three-fiber":"5.3.11","@size-limit/preset-small-lib":"^4.9.1"},"peerDependencies":{"react":">=16","three":"^0.124.0","react-dom":">=16","react-three-fiber":">=5.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_0.2.0_1610379216248_0.5445300743312593","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@react-three/a11y","version":"0.3.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@0.3.0","maintainers":[{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"e1486ec29e730ac69a10f484547e5ef6e11d4e6f","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-0.3.0.tgz","fileCount":18,"integrity":"sha512-3ekvSGVThxx+SjpcZmBfIJqxSATy8YeRP883h/5PknkMFJbxJu22fjlPz1jXamG6+GXL14COlsdrKJ9P+Boheg==","signatures":[{"sig":"MEUCIQDROwEKqQ/MxmmVlECAYTMLVKjwGmNgU9pHt00vJi481wIgMde1RrWgnw0W3tMECaKQDBRzP2Pj8pwC27yxCKvzzN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":120199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBunBCRA9TVsSAnZWagAAM2kP/3AOxO31LIC8v7ej5tjh\nO8XI5KIW+dy5gkW3Xnvb/OmUTjnEf7p4DYJZ+RjfnlT8zAETXu67NOR3zTcb\nJKAJB3y7f8D2CBasFEJBxa2wR9cj+g6/Yh+6jr5qkLSnIPlTND0wcEfgq8ho\nVVFJ45IHUxNTaCa02F4mgLTAAUpQvJceOYLvPIBVKa4CxnseYbzjtwF6uFsY\nwDGQbBd/hvM5lHOT867zLQAde5Bbb4XVSC9r3JwcGn5FzHAkD/gFO0PpU74K\n4f98+ve0C1hZATl1uWpPI6B9h8BAldP8tYeA5y6ssBcsKHOgVejVdACM2cGI\nByRC/m/lnVFVRtJBvqm+au1y/GtJ8Q6MzU+uF2OlR7nxSRBIQa8yD3Hqkv2+\nqvyRTdNK7WNtvVLRY/Nv9OL5ydVKfvcgSIAxu0ae2nNmvXPcUZzpAmuT59fV\nowXutIEA6IActfyLe3pRgF50hRJINWBcsHS3IGxOL0KEtS9uRAV+2rcufo4t\nt5kRWaoTWMv+s+H9SiJyrriu0mttG3R1DwEUbmUCFoSESdg77Z+8Q6yujS8n\nPK48x4S35OkoaPoMzP2qTPFKJPRxiDjZe0fj+6wgOv1BlT4arHM8QaNhyo2H\nVVTBrCBE5LQ1ZdgCJ2lIIDcXfeNNHtRAHBNnH9M55AhdQhNzoKH0GbNdJsbZ\ngXhH\r\n=xmty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"1d1d49b843ec806719a2955b227bf3fc229b063c","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"6.13.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"12.15.0","dependencies":{"zustand":"^3.2.0","@react-three/drei":"^2.2.12"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^4.3.6","react":"^17.0.1","three":"0.124.0","tslib":"^2.0.3","react-dom":"^17.0.1","size-limit":"^4.9.1","typescript":"^4.1.3","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","react-three-fiber":"5.3.11","@size-limit/preset-small-lib":"^4.9.1"},"peerDependencies":{"react":">=16","three":"^0.124.0","react-dom":">=16","react-three-fiber":">=5.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_0.3.0_1611065792773_0.4071507606190976","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@react-three/a11y","version":"0.4.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@0.4.0","maintainers":[{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"33ad5d0663969664331c9abfaf7eec4c5208dbae","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-0.4.0.tgz","fileCount":20,"integrity":"sha512-O8IYlGlJ4SDX7TsG3JvaqtmIwDdF+szLio5a+gDjVFabd/Xb2fZuZ2wda4N+nGIN2QhwhzJfvR8OdQxfRf3GQA==","signatures":[{"sig":"MEYCIQDmLjeMUZTywTr5DxUpYBvCptcf7bl4QrSz3TwRML48MAIhAJzgQ8f7owi9UcAjNkyZ7lu4/Rh8ph4IUIglA3RDplwu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":140586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgICz3CRA9TVsSAnZWagAAWQIP/2OpuDA37JwU00Ho16nK\nOAH3j95jFmEa7LC85g78+Ubg5r9ru/7h3qrJ9eMiSoUrJ8UeeGokfY82FxAM\nx/XJ7t8Bqzj6cQMwdbDrLxuM5yi2Cy2fX2Gi0gG4zoF5eJ7jHx17Qn8sYikm\nRe/VzqdncA2WX38xACiLNRElqIaZNDZ90ULd8gtuZ+4kLjiq3s0UX4LViBI9\nKGj3gbwkpCSdF9VquCW1LrLVYzf9YhMwTY8ZlFX7QbQkQ+qDTKbpIts3nA58\nvFqEzyVvs2Gr9HlYYGDfC+5kEt5aOAoGGYZf+pLFe6UvAEMdlBkldgUKlOO0\n252XlMyLmiuakThapRYTG3SJMlYcK0mxyxt4Zcy5CHAlVFV9Cbo1LQSXzqud\nmWP9nfM3G1ZOTQjF0EWWTL/ZFRN89JSKTcPXrEUF//VflgD4/afMOA/24DiM\nhOU8C/z/V0/cd3IRFPfF5kSJT3E/x22OZjG/6b4KEWS63iKvCIY+YxNmxbgA\nyRYji4O6azKPYIMcHPBBXM1gC7oahn48xxv9SXxBtK5y+OrYSrqOIgQxgPmb\n1FiVbpD3q45B/SlWFKPZUwoczvyPdSzr6c419a5niA/fIGnQx8Cquzl4Q6y/\nqzdqr41vH24xe1591yz1W1PTOD2KApyiG6863INMG93yrqujgL39pGO7WmrH\ndIyL\r\n=HRsu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"42ca434390352deeb5d208078fd4142915293e41","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"6.13.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"12.15.0","dependencies":{"zustand":"^3.2.0","@react-three/drei":"^2.2.12"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^4.3.6","react":"^17.0.1","three":"0.124.0","tslib":"^2.0.3","react-dom":"^17.0.1","size-limit":"^4.9.1","typescript":"^4.1.3","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","react-three-fiber":"5.3.11","@size-limit/preset-small-lib":"^4.9.1"},"peerDependencies":{"react":">=16","three":"^0.124.0","react-dom":">=16","react-three-fiber":">=5.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_0.4.0_1612721398688_0.7684103830475646","host":"s3://npm-registry-packages"}},"0.5.0":{"name":"@react-three/a11y","version":"0.5.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@0.5.0","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"7e732c3f6721a5bdfff7532d651b75d05a260cd4","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-0.5.0.tgz","fileCount":24,"integrity":"sha512-6qabYzGLphea4n9MAFmrhdEnkDXw5DufndNJ7GTFqAYSS/4leJ2/N17hZR9S2hN/sYH72KXNdx8jLPuK7fwsTg==","signatures":[{"sig":"MEYCIQDZBDrytgYD7lKQAZjkMYIMvl1RXzgACmjWwEOfYRvoIAIhAMhx2VNW2vdIPKq5ahCHnVkg7gMGm0vIiHtrDZPZnt36","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":210331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJSctCRA9TVsSAnZWagAAi80QAInR/7mKz3jSZBc4RoSt\n78hq5gLyGRcu3FO4llppQJ40j1Cq+LdPR5Ql7qaOtjZRJFMZfh/BJvyizM0y\nDekUHvp0XYAajWyBTj+qaE6lca8/wzUpv6U3WRg7bAkL1EK2IHE53AqZ8cjo\nMkP8BiyfHHa4h+9s2YixTitBIqtpm3skHk9Jj9Lg46tpQ30atVFu42N1fVCl\nRCyRzmGb08q6fyW14tw7beDB0zihesoiPDhAltCRPGrV9hJLDukyn91FVK+i\nrGl37XU3ezRgfGnpxgQLdTJrDBtw1XVBPrwZL4jsHR0yyHLmHw67zuKXGLKj\n9a9lShHWj276eYrhfJat1eshxsooUfJ1drdMH3fByn/dp5uAl5DKB1V8TAR3\nG6J4l8Si5dEOKike48XXTSQh2npufbstdMEtd6dUT2cAYH6CK07w1kkAFheX\nw4OoPaOpNF4Y6hssMngHSLU4pTZSvlqcssutMEYgvried1PGmQn62B/EyLB2\nujjbd2MggIx92PxD7bwnxGvTZi91QWy6+O614CScvXYNtNwt8boi6gEaRDjv\nIM8dP9/S14imVbNP+5Hv/3L+TxNT6U6OdoI6fj597SX9MnLHu8STQpPAPf3F\ng6/Rh7I3pMR4heUuoDSQ9tStojbb+GDNmjdyBaoEJkKcN2qkLlTVMl+7DMhd\nczmK\r\n=p0Pg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"b630d15d639306eed9af3bbfedd3159bd0dff43a","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"6.13.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"12.15.0","dependencies":{"zustand":"^3.2.0","@react-three/drei":"^2.2.12"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^4.3.6","react":"^17.0.1","three":"0.124.0","tslib":"^2.0.3","react-dom":"^17.0.1","size-limit":"^4.9.1","typescript":"^4.1.3","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","react-three-fiber":"5.3.11","@size-limit/preset-small-lib":"^4.9.1"},"peerDependencies":{"react":">=16","three":"^0.124.0","react-dom":">=16","react-three-fiber":">=5.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_0.5.0_1613047596726_0.5267910149521904","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@react-three/a11y","version":"1.0.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@1.0.0","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"deb5f2452f5fcbc51a818546da97e4cbd5d1ea5c","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-1.0.0.tgz","fileCount":24,"integrity":"sha512-xcsqb+bG1QTtb38/efkLo9oacx5XZ8RQnIfqrzKne7vIlIMTLwZU0RO6MxomzBL6GM1Y/SJhBK9kTouiSu6WTw==","signatures":[{"sig":"MEUCIQC0FhZOdMZTPClCYn/m1JwlzTfKWbCgmwHkRtsypHN1qwIgTCOf+vMA9/EOzK6U3AMWf5V7CFHvaMV2dAS0kiyRnYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":211773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTLMqCRA9TVsSAnZWagAAOeYP/ih2piSTB6CBRmh7kRlM\nTNXs276rhKxTLbhWuCR+M2IDLmn2ubcTpcosPWHajdCauhFtfus3baq+MXo3\nf2UrW7CJKGR0bUnZK7bUyLlTRt/SE3TuvtQ71B9TDXen7e+wwylZORj5w661\ngzGIe5Xy8V36vTnYlhFXr14f9/CunmXRwLRFnpO63ATpTy+ckZN+a7X5ipcr\nuHeRJsbbqaNCMwo00GwMDjbZjb2VbQT7fTSetBvMV3kAx0yphDf/QmyNAn1Z\ntCivBtxrTsjkFlw6OonxE4hNjXZTa7YkQn/+U+RIcBB9t9aYWQpnCg4PZKkN\nOLDcsCMiCDO2cVaQNJY0cBU7Pzu9pnd+LubqcNh+YI06EfjmXhVwCDotxZ7F\n4Qom1Z2KfI7wAuxCu9IUSuT+MzXqdNla5WWcOaS3iFf6m/xZ7D557lNuhNhx\nCevj7Sb/MANA2SYtYQRzfw1wf/ENPDOPoQIVYZQFTEwCLQ12Lki24kSl6cm1\nrv+VLaOTxadQ6co7uZxlQ3mipTswb1wmvTVCdd8ml9Ll1HWIwm7sqty+8Wwb\nrmwAAD5thvrlKrMQ/PUVI/xo0g1x2OlVq8zYh2kmexBSB0AjSU/3flrJ65xe\ns6+xBZBAKsv7DJCNNlwrFW9axHm3gK/tpmpawIEAXzwQ4M/GZWpF+vA4KC7K\nZBJ1\r\n=Nvx0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"d41e8afc2cb92a5b57cb1f98f0a6eb7fb63e2e00","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.5.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"12.15.0","dependencies":{"zustand":"^3.2.0","@react-three/drei":"4.0.0-beta.3"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^4.3.6","react":"^17.0.1","three":"0.124.0","tslib":"^2.0.3","react-dom":"^17.0.1","size-limit":"^4.9.1","typescript":"^4.1.3","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","react-three-fiber":"5.3.11","@size-limit/preset-small-lib":"^4.9.1"},"peerDependencies":{"react":">=16","three":"^0.124.0","react-dom":">=16","three-stdlib":">=1.0.0","react-three-fiber":">=5.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_1.0.0_1615639337697_0.24197986780244252","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@react-three/a11y","version":"1.0.1","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@1.0.1","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"5271d4ace3d3958251c0325fb97f40009e1beb22","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-1.0.1.tgz","fileCount":26,"integrity":"sha512-/cS5aRl2oM0E3zy7lfA2ld8w2Hzk3TbbCMJjRXGCQ0VIz0Wf4n/2c2jYxYABC60nfvHyvjmbLxu4Y9M8WGezjg==","signatures":[{"sig":"MEUCIQDkjz8i2aXg+XGk4gmHHp2U9nM3KqtCnbWXB4R/e9w6XAIgOryN4y5LBgzhjiYggbZM+DYS2b0t4lgIRyX20VRkZzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":249274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT8VPCRA9TVsSAnZWagAAjD4P/iY0YwgEHUqPH1dSvHNo\nC0pydcaxIhm4FQbjOgsrkb1jGXxI8xXYycwM0qgJv1iUX2EU20wqmo4RVP7p\n9RvaEElAIpO7fDiG7WYDbY0PJm9IzxQvIoapW4Z2N/+Lhg25uqidmzLL3jRK\nQv8rFVedPKAwDyE0gm2rY4QrY3xcnH5cf5QyM4JWiQvxykK4IW0ClZPpiHzC\nU8AhRInBLxrcOyIr3s4wqqwWQqW2BodI0BP7ml12fwc+dlSvmJH7ka0gw3Xn\n2RddQ/lSj8KJpipvJGGtSF6nOZQUH1y3dF7MLeT9PiaQCDaBaVlH/mqEmm0d\nj9pGjAv7OqCrrFPB2WfxkWsWipM4Lp7KGAdhXmTtDWM0CXJc3xeOmMtxVGV0\n/F1irnwho541LsZSIdUv27bTpRG96f5tsSqy/NqmC5acqrRkMb0pRnRv6JeY\nRzPA6BXybsoPOId7lZtorniVMUIFKXic3Ib6XB3p/L+Hwq6QB1cCgsBT0jJT\nZ6QiLHMntXSCMVkA3gtXnGgf+bHyvCxZkvmJEeYCoam4BUPFJD/dhretKD9d\nLeGZA+6OL8YpEWiiyDHfUOIsnptoXA94Yq9teBR3BUZ0+UCK1PdGpbHY2xfI\nuSbALGIv3Ho2K4lN5+5IhUrxKpREZy72bFi7e/wj3XcF5ZIhxZvOKpVs90uk\nFYEP\r\n=w9tt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"aa50403a148398378f93233a940ab3783a21edd9","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.5.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"12.15.0","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","react-three-fiber":"5.3.11","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":"^17.0.1","three":"^0.124.0","react-dom":"^17.0.1","react-three-fiber":">=5.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_1.0.1_1615840591013_0.3016718206416724","host":"s3://npm-registry-packages"}},"1.0.2-alpha-0":{"name":"@react-three/a11y","version":"1.0.2-alpha-0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@1.0.2-alpha-0","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"f40b6a26ed7735a6a071b3b15fb42b006ceda1b4","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-1.0.2-alpha-0.tgz","fileCount":24,"integrity":"sha512-NK0Grlz4V0IDFD07appPUc8K7b3RK/6m/bXxnROBztd2ZrRz2Lwfc0np675IbMGZ9wBdmc9aWTN1d3IoyHm7cw==","signatures":[{"sig":"MEUCIQDxFV2ASpkO95RFmWb/P3AP0FYtrIB/064ftC5oDdxS3QIgUYLmwP4ypeMBTUoBojXqKT1+t9ux2NM3uGFhqOYagAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUSh0CRA9TVsSAnZWagAA0/4P/jwagL4ohZvDiQUuoMC7\nCOf1sTln8mV6apqk7P190LPwFCwWgi+pXDvd5m5w8iH9NqBHEPH1wz8rkX+b\nxuzblEDoT7O/nLN34ilSk69pjbh+wQwbjX7yVVrqOrYcTkdP9c/+1Z8grSXq\nzjKBL/zhm1KTaDQJhqAuH2SuTP+zz0z10tXv80KNs9w+oNBbmYPB7Cn666XY\n29JUKcI2MTnSYMZP9snFYmEDKzsB/9klPoG6UPJuNcXVOuEUZEFG3O/Bww0Q\nXKPSQVEo/oB8WtLlKu+jl3BWvgxDh/kZcpPaaR7CcYfysQ/sEA4nRvmS0enr\nWlRJAcb0C2SgdxYOvg934zkg44MEv1Ay3t2eryI0tvAxciw/5PaAb5Zv1UZ4\n+4L77UC36ArmdgA9w3P0YAkfbThrKKC5cNFpN9MhoI3Dp9Y2SMKSiSCbRqyC\n9svNIkLS/SDBGoiBXp5oQHC7dqpQLqbgkVzV8dtAmWvdbQtYGLpv/xROKDNG\nP0bhiDsPypASRDVBjd+XOqX0g2ZuOA//kf4phzwj/of6M6YdDgi1hR3kF7KS\nnJ8di1u+ou9xrr4qo2jfwGbuHULgJiDyP3TYf4M9oioGOh9dyE+0mGZsYAJ5\n+7RnqqMk6PKNCAdUIDvBiJFAMv31K8bP5K7gUPBFXEA4LEWZdak8j5ZAn2Ji\nz8Hq\r\n=Qwlo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","readme":"@react-three/a11y
\r\n\r\n[](https://www.npmjs.com/package/@react-three/a11y)\r\n[](https://www.npmjs.com/package/@react-three/a11y)\r\n[](https://discord.gg/ZZjjNvJ)\r\n\r\n\r\n\r\n```bash\r\nnpm install @react-three/a11y\r\n```\r\n\r\n`@react-three/a11y` brings accessibility to webGL with easy-to-use [react-three-fiber](https://github.com/pmndrs/react-three-fiber) components:\r\n\r\n- Focus and focus indication\r\n- Tab index and keyboard navigation\r\n- Screen reader support and alt-text\r\n- Roles and cursor shapes\r\n- Descriptive links\r\n\r\nLive demo: https://n4rzi.csb.app\r\n\r\n# How to use\r\n\r\nFirst, place the `A11yAnnouncer` component next to the R3F Canvas component. This is critical, because it will manage the screen-reader and help emulate focus!\r\n\r\n```jsx\r\nimport { Canvas } from 'react-three-fiber'\r\nimport { A11yAnnouncer } from '@react-three/a11y'\r\n\r\nfunction App() {\r\n return (\r\n <>\r\n \r\n \r\n \r\n )\r\n}\r\n```\r\n\r\nTo add accessibility features to your scene you'll have to wrap components you want to make focusable with the `A11y` component:\r\n\r\n```jsx\r\nimport { A11y } from '@react-three/a11y'\r\n\r\n\r\n \r\n\r\n```\r\n\r\n`MyComponent` can now receive focus. More accurately, the emulated \"focus\" will handled at the `A11y` components which acts as a provider for children to access its state. But even if objects are focusable, nothing will be displayed or shown by default.\r\n\r\n## Accessing the hover, focused & pressed state\r\n\r\nFor each child wrapped in the `A11y` component, you can access the `focus`, `hover` and `pressed` state like so:\r\n\r\n```jsx\r\nimport { useA11y } from '@react-three/a11y'\r\n\r\nfunction Box(props) {\r\n const a11y = useA11y()\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n```\r\n\r\n## Call function on focus\r\n\r\nThe `focusCall` prop of `A11y` will be called each time this component receives focus (usually through tab navigation).\r\n\r\n```jsx\r\n console.log(\"in focus\")} ... />\r\n```\r\n\r\n## Call function on click / keyboard Click\r\n\r\nThe `actionCall` prop of `A11y` will be called each time this component gets clicked, focused, keyboard activated etc.\r\n\r\n```jsx\r\n console.log(\"clicked\")} ... />\r\n```\r\n\r\n## Provide a description of the currently focused / hovered element\r\n\r\nWhen using the `description` prop, the `A11y` component will provide a description to the screen reader users on focus/hover.\r\nOptionally, you can also show the description to the user on hover by setting `showAltText={true}`.\r\n\r\n```jsx\r\n// Reads \"A rotating red square\" to screen readers on focus / hover\r\n\r\n// Reads \"A bouncing blue sphere\" to screen readers on focus / hover while also showing it on mouseover\r\n\r\n```\r\n\r\nIf your `A11y` component has the `role=\"button\"`, you can use three more props:\r\n\r\n- `activationMsg`: When the user will click/activate the \"button\" the screen reader will read the passed message\r\n- `deactivationMsg`: When set, it turns your button in a togglable button. Which means it now has a on/off state. Screen readers will read the state of the button as well as the activation/disactivation messages passsed.\r\n- `pressedDescription`: When set, it turns your button in a togglable button. Which means it now has a on/off state. This description will replace the one passed via `description` when the toggle is active.\r\n\r\n```jsx\r\n// Reads the description on hover/focus then will read activationMsg if clicked/pressed\r\n\r\n// Reads the description on hover/focus then will read activationMsg if turned on or deactivationMsg if tuned off\r\n\r\n```\r\n\r\n## The three roles of the `A11y` component\r\n\r\nLike in HTML, you can focus different kind of elements and expect different things depending on what you're focusing.\r\n\r\n#### Content\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `default` cursor. This role is meant to provide information to screen readers or to serve as a step for a user to navigate your site using Tab for instance. It's not meant to trigger anything on click or to be activable with the Keyboard. Therefore it won't show a pointer cursor on hover.\r\n\r\n#### Buttons\r\n\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `pointer` cursor. Special attributes: `activationMsg`, `deactivationMsg` and `pressedDescription`.\r\n\r\nThis role is meant to emulate the behaviour of a button or a togglable button. It will display a cursor pointer when your cursor is over the linked 3D object. It will call a function on click but also on any kind of action that would trigger a focused button (Enter, Double-Tap, ...). It is also actionnable by user using a screen reader.\r\n\r\nYou can turn it into a button with aria-pressed by using the role togglebutton, you'll then be able to use the following propertie deactivationMsg in addition to the usual description and activationMsg properties.\r\n\r\n#### Links\r\n\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `pointer` cursor. Special attributes: `href`.\r\n\r\nThis role is meant to emulate the behaviour of a regular html link. It should be used in combination with something that will trigger navigation on click.\r\n\r\n```diff\r\n- Don't forget to provide the href attribute as he is required for screen readers to read it correctly !\r\n- It will have no effect on the navigation, it's just used as information\r\n```\r\n\r\n## Screen Reader Support\r\n\r\nIn order to provide informations to screen reader users and use this package at its full potential, fill the `description` prop of all your `A11y` components and use the appropriate `role` prop on each of them.\r\n\r\n### Use of section \r\n\r\nFor screen readears, it might be useful to provide additionnal information on how to use some unconventional UI.\r\nYou can do it by wrapping the concerned part of your code relative to this UI in the A11ySection like so.\r\n```jsx\r\n\r\n [...]\r\n\r\n```\r\n## Access user preferences\r\n\r\nThe A11yUserPreferences component i available in order to access user preferences such as \r\n- prefers-reduced-motion\r\n- prefers-color-scheme\r\n\r\nTake a look at the [wiki section](https://github.com/pmndrs/react-three-a11y/wiki/Access-user-preferences) or the [demo](https://n4rzi.csb.app) to see it in action and how to use it. The demo will adapt to your system preferences.\r\n\r\n## Additionals Features\r\n\r\nUse a custom tabindex with for your A11y components by providing a number to the tabIndex attribute\r\n\r\n```jsx\r\n\r\n```\r\nβ β β
\r\nAvoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content.\r\nInstead, write the document with the elements in a logical sequence.
\r\nMore about the use of tabIndex on developer.mozilla.org\r\n\r\n## Next Steps\r\n\r\n- [ ] Provide a documentation inside the IDE\r\n- [ ] Provide more examples showing how to use it\r\n\r\n### Author:\r\n\r\n- [`twitter π @AlaricBaraou`](https://twitter.com/AlaricBaraou)\r\n","engines":{"node":">=10"},"gitHead":"bdda6816d6dac69f3f78da700fc43dbc98fa654e","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.5.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"12.15.0","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0","@react-three/drei":"3.11.1-alpha.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","react-three-fiber":"5.3.11","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":"^17.0.1","three":"^0.124.0","react-dom":"^17.0.1","react-three-fiber":">=5.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_1.0.2-alpha-0_1615931508171_0.4134605521466528","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@react-three/a11y","version":"2.0.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@2.0.0","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"fcabe8ef02ccc9f0bfbaa7bcbcf62c4d0352574e","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-2.0.0.tgz","fileCount":26,"integrity":"sha512-oMvDTBf9TIYMnmhbwDEc2GodBDpt7YopB2Yv/43orI4o7nJ8cO4Z9JijB+Kbi/M5jtsAQNm60fEkphAc64q9EQ==","signatures":[{"sig":"MEUCIQD6H9fBh5GGDY9ZEyRja0I5zTK+cRVtIymtFXfx/sUuwAIgLi/M8+HCbWaYJVCeDrBiBnMKvfK6/8XFC2b7Fnt+pqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":252342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZfHfCRA9TVsSAnZWagAAf30P+gPDVhYThLOdk03q04RP\nG00fgeh/LEOVXJDGxC9H+ak1QkadhgpmLE1IJxLNaQvTXfqKiRE3uSHoQopH\nn0Pvyrl6N3a8UPI0/ZWs01tCozRgCeb3096D93cbozdqO1cxNICN3f8UQ+pb\nP05SWPpAu8wvqTV0DevwJJlaTFjDztrBVKsrZZHioHsfPxz7m/8W0Vputod5\nfyoJrr2sMrfSI4m+ivFbEP7h3yEgEz6Ghw9Pz2vA/xN5jCUWS1bDQcc5/Saa\ncDbkXwsR361YYvd4BhYAiwBJ4ZrVF1C+dlOuukdhkW8qhda20W7b0GKlO++/\nPKU10PuJ6FnuaZ7ESEHt/zrKZPokpquHEBQmT6HCNUILkBe2e9BbibBmjnMX\nEiZ1fqDxFulG8kB4GMc6Tz0nHQrk0GNQ8gmi/FicXYnxvihBRzBzJoBDA5g7\nyAx/1XnInugbWZOJoBMyoXRajyMDybp7bY3JPhdQsgn1eCVRmhBQI1UYtnsp\nl2lkVJ8HIwyZWQyzx3Hxu3XxNrLOAEX8x+oqsfiHuMOJU8GN9HOT+0m3K5QL\nRqyt0iDR2OR1djmj0YeaF2p5XjO8A88PWjGTQbICucCDoUCQV2CKnV5pR4u9\ncwfgs3oiDFrP1os30DRRHpNR5LJuL2qz2eNenJSrXOT1+zO5tdOc3qsEtgux\nKLIv\r\n=czgL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"1ed6c03ff031cd0004852a4a811829cb77d17be6","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.5.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"12.15.0","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":"^17.0","three":"^0.126.0","react-dom":"^17.0","@react-three/fiber":"^6.0.1"},"_npmOperationalInternal":{"tmp":"tmp/a11y_2.0.0_1617293790545_0.7895388443705993","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@react-three/a11y","version":"2.0.1","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@2.0.1","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"c7aa8bbf6ba9382085952a984be1aac50e77910f","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-2.0.1.tgz","fileCount":26,"integrity":"sha512-fsFdhnl1fPd3aHGYr0KI0oTevhUHWLJCem5g5ZEdqcXct4Mymm/m/LI6kQjhkWaI/owbjs7PYOiVRiqkBIS3XA==","signatures":[{"sig":"MEUCIHH63h1eIdxo054qIW1zNuZ8TC2Vfv9Ln+WXtv3188+WAiEArt+bNtvbKIWU9EwE6iaHhj1koB8F+gixSyFiQTa9oFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":259144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcebeCRA9TVsSAnZWagAAEFgQAJXsUGUobcb9u+Km55Yf\nhxkgeDawLJYWm0Q6RurVvdKiL9I7TTxSSLj76QHFgHWTrvJfCudx1EDNFFNo\nxSPOOQR/YuwI7T37solLiGdcMHOvkJmUUkyDewGEckFyITxUz//nSfNV+2i0\nQu4Om9NAdu6k7zP6RmbBugdZriC605FTpeqw+3l7FhOVckNYgeSq3sGgSBHf\nY34eKUMvIKeNoufSn8naFen1wCwOR328IyBYyFkgXfZ0oqIS0DLIDGNdmCip\nUXWhfO3v8nySCVKfv++Y7ghyBTz88YME4zVnlWQlCneQBDkTZdtNrl5ZLtNT\ncuEvOgjHc5WykrfkvMspRCcyc8DdivBYm9hoZZ/Gis9176g9sAydozlQVDR8\nn4gA2iBIsifIhnllze+R2uWheYAZLS6J6ast8wt+uifgGWWTiLXucL9MDtYJ\nPNUxmsinyaMD0KRlQBQM6zCwt36oXVX7nUjwPFd7WGG9Tj0/sfijVa9rW7eT\nUbOSAdfs0if1HvlDX6aN2q/43wwayclso7SMs2afoVKsLCw4FcKIy6qqJBtI\nJ9B5V6xRCRJYaJe2UYSL11VybsHoHOBiJm5bKKyL+SwKrpjjFZlRcZoKNphx\nerGIfE6ucoWbkqHIrUlG7V7bUw559dXFMgkgcQlqPn2wZf5gAdD2rSJz+cO2\nPQMi\r\n=Bt4l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"5a49c57e0e59617fee92ae5268fc65d8d686e34a","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.5.4","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"14.16.0","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":"^17.0","three":"^0.126.0","react-dom":"^17.0","@react-three/fiber":"^6.0.1"},"_npmOperationalInternal":{"tmp":"tmp/a11y_2.0.1_1618077405378_0.4837557532853374","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@react-three/a11y","version":"2.0.2","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@2.0.2","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"2048a159a44c45ac4ca6fa37d4180bef8c990cb3","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-2.0.2.tgz","fileCount":26,"integrity":"sha512-qZf3wPu4gj9u3PcPTKflnhGoWTox2qqOt0mqcDL8/tiNUSNegkUrv0K4XfY4qPzVb+BxRXNZi/INJGBowRBrrQ==","signatures":[{"sig":"MEUCIEkAxbfFAF8jBzpOxoPp21DWfGUCouJmdk2gVOW6nJbzAiEAjks7NLydjy4P1oBm9O8Md6HdV+IjJeOCqMY6YtlFcgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":259146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjsvVCRA9TVsSAnZWagAANJsP/iMTGSgMHZeII40pS6rk\npcvxwDMEG/f9Yq4c4CzI/YSvyssjqMNJbdV3BSiE5f9shRxBIe18sMVHnaRU\nXoAj8BigCNCKWapwfbKMU6mO5vHwIiTHGOisj7lkeUz3aZdYPa9NjT4UNNPS\n5hXbHPpJLGnD/Q6ELc+PThAl6Isn7N3TL/F6JSyhbLxs2J25wQmnBdR3kEi1\nV/iooXtORFaM0PJOeyadp+1hsy0FC/g1A64NK/tC5GGXIVSyqIm6p/xX+SPt\nJgUCCf+GJzWY0UiqJXaz8164b7s0vgVK96AYT2f1xpSW9KM5rTWDvLIu1a/T\nnckKA5lo7YKuJXUUlLfgLDAlo5LdeHQuyBCcKABXzefWMJ1RT1akTGW97LWE\nvPr2j0IYPwObgNq98Pqo3a4Gh3eUEZ7U9a/v71d5F671kodx5pXio/DABFNh\nbwma4enms7qQ83YTcUoq4rAoYBvrodnQr8YzQy8F/Xn4x7DFzF+kIUrstCnO\nn9DWmxHTt7nvh4TTp3Jo37WQwScLdbR3EBiy/aGTG8DrDJ3FW7NR3EIliqaC\n3S7EAZQ5Hz0Phgpfqb+l7QcBcHLQ+u1DdtKHPpchXXDArVzezuOPFVRm4N6T\nP3t28nZg/QETyurWg6mR/icyr2l18xhuAlJraT8576eeRxC9K9T2GRYu+WIn\nxVda\r\n=C7wS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"57dc6c8c33c849651b5e763f89b4dd27dc2facaa","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.11.1","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"14.16.1","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":">=17.0","three":">=0.126.0","react-dom":">=17.0","@react-three/fiber":">=6.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_2.0.2_1619971028746_0.26391669348501523","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@react-three/a11y","version":"2.1.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@2.1.0","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"e87cc182ac5d28c4e981dff70609645ee4891abd","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-2.1.0.tgz","fileCount":26,"integrity":"sha512-SUFVAmrjWxn/eHT9l9cVx6I1xwplci+D7aVTqwGcPdtT+D3qIDuMCU5KFpNxw0lpjettgPWq++KaAn7KNPDHRg==","signatures":[{"sig":"MEUCIHXXG5BVVjhm1ajrv1/UdnWkocDHAgHOY4Q7SdN2Y12kAiEAkUqu3YZk0cwN52ydHa43qq3AUOrx2oafdZXJ9d7To/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":258279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgycphCRA9TVsSAnZWagAA2rQP/A+TT856Tifv1lGPDUkL\n6fFrCVDkZ1bGajQJ3oIpSvkk10pOFVE8MTSECOIJjQC3gJu2ZWYVyAJTOnyT\nZhZfbCGGce1bcrvlJ8js0ZKNsl4xVnMcsmuLD8AyRN00daG/D8qckduNDkSU\n4kw6W8NtbWxBk/sPxWui6Cr8EycF9Tzl7T8Axvi7q0YxFViKTLJydSHoWctU\nyn2x10ljPg9iqzE7ByGvIRT0BPGs7TxJSufWTfthu/k+Yg/CoAPcc29rBX/u\nNhtNgsHrlt9+jNnIRxD89ixFk4hxwF3Wi7GvK7wspQXp2dqslZmD1pyqntAM\nt9hvUYpyJX3efzpiqU4DssUMjBugHErgbOIW3gZh4OVG7fA+bo2wwpY8o9XF\nyeQ04Yl7AynVpfyiWiL2JSECTKMMK7/EMqnmzXweZsbWN6fHWBqrUPrin0ri\nWMSwCEZWXKfBhz29ttmP/FxaesFu1OVIIT21++4OFHJERMpMZj9a1kNSULBy\n6tY+Qfo+OcWN4py9lxRUrRMJ3Gg9RMXfRwDDkWIsZrDwjWzDtguuvF7+P/a9\nwFHBhGQWkPBiJ6CRH86FSQUfC5rDmGZwLF3t7q6+8sw396JefrtutLP71J8f\nTKf92Th+byOqhvEXb2MKAvvbjrePoHarUo35wkFEp5LnbNb+SSerdreWkUiz\nlAOp\r\n=jlAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"438bb35bcddd47b6c984d2433c80ede5505e67d4","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.0.3","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"15.0.1","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":">=17.0","three":">=0.126.0","react-dom":">=17.0","@react-three/fiber":">=6.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_2.1.0_1623837281562_0.5891414612112205","host":"s3://npm-registry-packages"}},"2.2.0-alpha.0":{"name":"@react-three/a11y","version":"2.2.0-alpha.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@2.2.0-alpha.0","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"d4014c713a90080db8910cca5d8bb084b93cefbe","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-2.2.0-alpha.0.tgz","fileCount":26,"integrity":"sha512-ebjkX8+eFVyY+PqedUyererMiPS8QM779twS9AstOEpAjD9NdPy4El37VoGDY18AenuewYbk1Vf9BNDFDAi84w==","signatures":[{"sig":"MEUCIQDeWFwQ6/z9gflXRhKHDNlODF6ia+JDO6bbcsduarCuJwIgEdvuwLCWlkju4lw8MXK77uvjVoe5Fytks5Law3i7rPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":268903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1KqGCRA9TVsSAnZWagAADaQP/3x/0YAw+hQd1w0yVdK1\nTo92UICn7cSBTNx/9F6BXNc2yBtF9WFzH8wihDo5eCVSPZiIsxOXS1TVSDtX\nu1Jqg9t52dG2oNZ7cQPHBnQAigcEXv+IAuSrnBB3siIMLoEHG5uUPiXbLJlz\nZsLr3mHEMfXOpawppxvQrD6aa0uKUdDWkC4zAYHpsj99nWQ5M+CJVS/Fi0pD\nVYoUbt8L6rSh1SRnBAlZ9MmSQAVIw6dnhadIfyWe13dvSahqsbChnJJN2ylC\nr7x+Yx7WjGp1WlL0Kq56Z+6/AVQDC2S9BRFXu8FOQ/x2qG+HZj/KTqjASZiv\n/b1dcy5UTBVDOLW0rekK6UbeFg5txjVf9u/TY71M0s83JCjrfgssxQmXCsqZ\nVC03g3zvxh2OYDvIZ9DbelzsxzEkZqgsWgUm5HCntGeNkUiuCDDZtZmdtOQ9\nMvzo40Cl3QjUCg/Z9vCYOzS71DtTTTxcA7tKGOcwrBMdPq8RA783Z94e4q5L\nm05ZTHT6cDikG83qaldPy4GSEDlc0vBgeCOgo4IMFdY2xjJHbFMueqgL19dj\nliBZ3krT+Pnkbxo/Kpm0PfGMCVlqiH76UopWnrOmlYupb7nlh+5mFHNIMPoA\n+sGO4Vj6PbUWSu4fM5vjq7ElQHB/tVNzuAiy/X1IB+G2VGdmDrEWyU/g7iui\nUXsN\r\n=7q+J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","readme":"@react-three/a11y
\r\n\r\n[](https://www.npmjs.com/package/@react-three/a11y)\r\n[](https://www.npmjs.com/package/@react-three/a11y)\r\n[](https://discord.gg/ZZjjNvJ)\r\n\r\n\r\n\r\n@react-three/a11y brings accessibility to webGL with easy-to-use react-three-fiber components:\r\n\r\n- Focus and focus indication\r\n- Tab index and keyboard navigation\r\n- Screen reader support and alt-text\r\n- Roles and cursor shapes\r\n- Descriptive links\r\n\r\nYou can try a [live demo here](https://n4rzi.csb.app).\r\n\r\n```bash\r\nnpm install @react-three/a11y\r\n```\r\n\r\n## Quick overview to get started\r\n\r\nnote: The full documentation can be found on the [pmndrs website](https://docs.pmnd.rs/a11y/introduction).\r\n\r\n### The A11yAnnouncer component\r\n\r\nFirst, place the A11yAnnouncer component next to the R3F Canvas component. this componant is critical since it manage some screen-reader features.\r\n\r\n```jsx\r\nimport { Canvas } from '@react-three/fiber'\r\nimport { A11yAnnouncer } from '@react-three/a11y'\r\n\r\nfunction App() {\r\n return (\r\n <>\r\n \r\n \r\n \r\n )\r\n}\r\n```\r\n\r\n### Then wrap components you want to make accessible with the A11y component\r\n\r\nTo add accessibility features to your scene you'll have to wrap components you want to make focusable with the `A11y` component:\r\n\r\n```jsx\r\nimport { A11y } from '@react-three/a11y'\r\n[...]\r\n\r\n \r\n\r\n```\r\n\r\n`MyComponent` can now receive focus. More accurately, the emulated \"focus\" will be handled at the `A11y` components which acts as a provider\r\nfor children to access its state. But even if objects are focusable, nothing will be displayed or shown by default.\r\n\r\n## Call function on focus\r\n\r\nThe `focusCall` prop of `A11y` will be called each time this component receives focus (usually through tab navigation).\r\n\r\n```jsx\r\n console.log(\"in focus\")} ... />\r\n```\r\n\r\n## Call function on click / keyboard Click\r\n\r\nThe `actionCall` prop of `A11y` will be called each time this component gets clicked, focused, keyboard activated etc.\r\n\r\n```jsx\r\n console.log(\"clicked\")} ... />\r\n```\r\n\r\n## Provide a description of the currently focused / hovered element\r\n\r\nWhen using the `description` prop in combination with the `role` prop, the `A11y` component will provide a description to the screen reader users on focus/hover.\r\nOptionally, you can also show the description to the user on hover by setting `showAltText={true}`.\r\n\r\n```jsx\r\n// Reads \"A rotating red square\" to screen readers on focus / hover while also showing it on mouseover\r\n\r\n// Reads \"Button, open menu + (description on how to activate depending on the screen reader)\" to screen readers on focus / hover\r\n{someFunction()}} ... />\r\n```\r\n\r\n## The four roles of the A11y component\r\n\r\nLike in HTML, you can focus different kind of elements and expect different things depending on what you're focusing.\r\n\r\n#### Content\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `default` cursor. This role is meant to provide information to screen readers or to serve as a step for a user to navigate your site using Tab for instance. It's not meant to trigger anything on click or to be activable with the Keyboard. Therefore it won't show a pointer cursor on hover.\r\n\r\n[Read more about role content](/a11y/roles/content)\r\n\r\n#### Button\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `pointer` cursor. Special attributes: `activationMsg`.\r\n\r\nThis role is meant to emulate the behaviour of a button or a togglable button. It will display a cursor pointer when your cursor is over the linked 3D object. It will call a function on click but also on any kind of action that would trigger a focused button (Enter, Double-Tap, ...). It is also actionnable by user using a screen reader.\r\n\r\n[Read more about role button](https://docs.pmnd.rs/a11y/roles/button)\r\n\r\n#### ToggleButton\r\n\r\nBy using the role togglebutton, you'll emulate a button with two state that will have the `aria-pressed` attribute.\r\nYou'll then be able to use the deactivationMsg property in addition to the usual description and activationMsg properties.\r\n\r\n```jsx\r\n\r\n```\r\n\r\nSpecial attributes: `deactivationMsg`\r\n\r\n[Read more about role ToggleButton](https://docs.pmnd.rs/a11y/roles/togglebutton)\r\n\r\n#### Link\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `pointer` cursor. Special attributes: `href`.\r\n\r\nThis role is meant to emulate the behaviour of a regular html link. It should be used in combination with something that will trigger navigation on click.\r\n\r\n\r\n - Don't forget to provide the href attribute as he is required for screen readers to read it\r\n correctly ! - It will have no effect on the navigation, it's just used as information\r\n\r\n\r\n[Read more about role link](https://docs.pmnd.rs/a11y/roles/link)\r\n\r\n## Screen Reader Support\r\n\r\nIn order to provide informations to screen reader users and use this package at its full potential, fill the `description` prop of all your `A11y` components and use the appropriate `role` prop on each of them.\r\n\r\n### Use of section\r\n\r\nFor screen readears, it might be useful to provide additionnal information on how to use some unconventional UI.\r\nYou can do it by wrapping the concerned part of your code relative to this UI in the A11ySection like so.\r\n\r\n```jsx\r\n\r\n [...]\r\n\r\n```\r\n\r\n## Access user preferences\r\n\r\nThe A11yUserPreferences component is available in order to access user preferences such as\r\n\r\n- prefers-reduced-motion\r\n- prefers-color-scheme\r\n\r\nTake a look at [the A11yUserPreferences page](https://docs.pmnd.rs/a11y/access-user-preferences) or the [demo](https://n4rzi.csb.app) to see it in action and how to use it. The demo will adapt to your system preferences.\r\n\r\n## Additionals Features\r\n\r\nUse a custom tabindex with for your A11y components by providing a number to the tabIndex attribute\r\n\r\n```jsx\r\n\r\n```\r\n\r\nβ β β \r\n
\r\nAvoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on\r\nassistive technology to navigate and operate page content. Instead, write the document with the\r\nelements in a logical sequence.\r\n
\r\nMore about the use of tabIndex on{' '}\r\n\r\n developer.mozilla.org\r\n\r\n\r\n### Author:\r\n\r\n- [`twitter π @AlaricBaraou`](https://twitter.com/AlaricBaraou)\r\n","engines":{"node":">=10"},"gitHead":"f0e5e392d389d059fb495ef6e9c0ae1de3102f56","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.0.3","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"15.0.1","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":">=17.0","three":">=0.126.0","react-dom":">=17.0","@react-three/fiber":">=6.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_2.2.0-alpha.0_1624550022151_0.4018370601825838","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1":{"name":"@react-three/a11y","version":"2.2.0-alpha.1","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@2.2.0-alpha.1","maintainers":[{"name":"unframework","email":"nick.matantsev@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"69a1423aec2e66e4d4aa2547eb4ca2a350082bf7","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-2.2.0-alpha.1.tgz","fileCount":28,"integrity":"sha512-IlPV4I1jB+qK1VIlt7YFw44FZkJzRsdDFoEZaAyQO0BdSMY4qsWdiWwQy/geq5/5+0JbEcJMsKspkt9KGoiSUw==","signatures":[{"sig":"MEQCIGh/fDCmeW01raClDZ3M7FodlUMbVaR4Gab9+lS5dyoQAiBLKMRNMRku8it1PEtSaAnMPeF7vLdTvdvjvmd7aQSzJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":275628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2ZlRCRA9TVsSAnZWagAA+wUP/i7G95SOcI+5gFPbG1uu\nJsdGmaBUMVLlgMNbh4ENOOnkXDTEWkMPl49Meyxy34fJy1smtn75mRayOXpk\nJBYmy9QYrl6F9mZ/E9lYx6EvhUJYcb67IoWFkA/1ISZnU3MX7Nv2T+q5uObS\nI2orGapNAbtc3My4oC+UAukQ23bI1BMXp22gxCk97+HGOJRjuEt8NIvABTFq\n2Zy4nLvyDHNpuauuSGmr5E5utxN+yUkITsyHCakYJLWUKzi8lULy/oFuLxQ3\nJ9EbklEx0n3ctOk2DmZP1bD6CtQsgQjU94+taqjah5b27gdCHV0ZAmXShT/5\nGLczou2kaFGev5GhcIK1hWwl8kFqSoYTqVaTglza4tElq+PhhFc+g9qN/oOk\nH3xvO6eltXjXLWAb/x6CO75yGxjbAJJgCq/7JJq77iu1rmqsElqUzaou1TOu\n5oQJC/pW0Gtdrx9eskF5BX5yI1Uqrxjk4PxqtDLasA3yC4aC7PxaBBAHsupW\nGDhSuCgOAvqnNCjlAmVMhe/E8dptAdli8WHNTaeVEpTxRMMhiIUA4VUtozCK\nSDip8J2QfC2mMe7HzZjkpoGXrYVrqbHz9bCrPgEa0aHLFCRTZGaugpcdPetg\nl/shodSCZamc9RGiIQiyh0Sfb23oyzFMpYrm1/Pc/RoVVUd0su86Ot6NbeO6\nP4sU\r\n=hcdB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","readme":"@react-three/a11y
\r\n\r\n[](https://www.npmjs.com/package/@react-three/a11y)\r\n[](https://www.npmjs.com/package/@react-three/a11y)\r\n[](https://discord.gg/ZZjjNvJ)\r\n\r\n\r\n\r\n@react-three/a11y brings accessibility to webGL with easy-to-use react-three-fiber components:\r\n\r\n- Focus and focus indication\r\n- Tab index and keyboard navigation\r\n- Screen reader support and alt-text\r\n- Roles and cursor shapes\r\n- Descriptive links\r\n\r\nYou can try a [live demo here](https://n4rzi.csb.app).\r\n\r\n```bash\r\nnpm install @react-three/a11y\r\n```\r\n\r\n## Quick overview to get started\r\n\r\nnote: The full documentation can be found on the [pmndrs website](https://docs.pmnd.rs/a11y/introduction).\r\n\r\n### The A11yAnnouncer component\r\n\r\nFirst, place the A11yAnnouncer component next to the R3F Canvas component. this componant is critical since it manage some screen-reader features.\r\n\r\n```jsx\r\nimport { Canvas } from '@react-three/fiber'\r\nimport { A11yAnnouncer } from '@react-three/a11y'\r\n\r\nfunction App() {\r\n return (\r\n <>\r\n \r\n \r\n \r\n )\r\n}\r\n```\r\n\r\n### Then wrap components you want to make accessible with the A11y component\r\n\r\nTo add accessibility features to your scene you'll have to wrap components you want to make focusable with the `A11y` component:\r\n\r\n```jsx\r\nimport { A11y } from '@react-three/a11y'\r\n[...]\r\n\r\n \r\n\r\n```\r\n\r\n`MyComponent` can now receive focus. More accurately, the emulated \"focus\" will be handled at the `A11y` components which acts as a provider\r\nfor children to access its state. But even if objects are focusable, nothing will be displayed or shown by default.\r\n\r\n## Call function on focus\r\n\r\nThe `focusCall` prop of `A11y` will be called each time this component receives focus (usually through tab navigation).\r\n\r\n```jsx\r\n console.log(\"in focus\")} ... />\r\n```\r\n\r\n## Call function on click / keyboard Click\r\n\r\nThe `actionCall` prop of `A11y` will be called each time this component gets clicked, focused, keyboard activated etc.\r\n\r\n```jsx\r\n console.log(\"clicked\")} ... />\r\n```\r\n\r\n## Provide a description of the currently focused / hovered element\r\n\r\nWhen using the `description` prop in combination with the `role` prop, the `A11y` component will provide a description to the screen reader users on focus/hover.\r\nOptionally, you can also show the description to the user on hover by setting `showAltText={true}`.\r\n\r\n```jsx\r\n// Reads \"A rotating red square\" to screen readers on focus / hover while also showing it on mouseover\r\n\r\n// Reads \"Button, open menu + (description on how to activate depending on the screen reader)\" to screen readers on focus / hover\r\n{someFunction()}} ... />\r\n```\r\n\r\n## The four roles of the A11y component\r\n\r\nLike in HTML, you can focus different kind of elements and expect different things depending on what you're focusing.\r\n\r\n#### Content\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `default` cursor. This role is meant to provide information to screen readers or to serve as a step for a user to navigate your site using Tab for instance. It's not meant to trigger anything on click or to be activable with the Keyboard. Therefore it won't show a pointer cursor on hover.\r\n\r\n[Read more about role content](/a11y/roles/content)\r\n\r\n#### Button\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `pointer` cursor. Special attributes: `activationMsg`.\r\n\r\nThis role is meant to emulate the behaviour of a button or a togglable button. It will display a cursor pointer when your cursor is over the linked 3D object. It will call a function on click but also on any kind of action that would trigger a focused button (Enter, Double-Tap, ...). It is also actionnable by user using a screen reader.\r\n\r\n[Read more about role button](https://docs.pmnd.rs/a11y/roles/button)\r\n\r\n#### ToggleButton\r\n\r\nBy using the role togglebutton, you'll emulate a button with two state that will have the `aria-pressed` attribute.\r\nYou'll then be able to use the deactivationMsg property in addition to the usual description and activationMsg properties.\r\n\r\n```jsx\r\n\r\n```\r\n\r\nSpecial attributes: `deactivationMsg`\r\n\r\n[Read more about role ToggleButton](https://docs.pmnd.rs/a11y/roles/togglebutton)\r\n\r\n#### Link\r\n\r\n```jsx\r\n\r\n```\r\n\r\nUses the `pointer` cursor. Special attributes: `href`.\r\n\r\nThis role is meant to emulate the behaviour of a regular html link. It should be used in combination with something that will trigger navigation on click.\r\n\r\n\r\n - Don't forget to provide the href attribute as he is required for screen readers to read it\r\n correctly ! - It will have no effect on the navigation, it's just used as information\r\n\r\n\r\n[Read more about role link](https://docs.pmnd.rs/a11y/roles/link)\r\n\r\n## Screen Reader Support\r\n\r\nIn order to provide informations to screen reader users and use this package at its full potential, fill the `description` prop of all your `A11y` components and use the appropriate `role` prop on each of them.\r\n\r\n### Use of section\r\n\r\nFor screen readears, it might be useful to provide additionnal information on how to use some unconventional UI.\r\nYou can do it by wrapping the concerned part of your code relative to this UI in the A11ySection like so.\r\n\r\n```jsx\r\n\r\n [...]\r\n\r\n```\r\n\r\n## Access user preferences\r\n\r\nThe A11yUserPreferences component is available in order to access user preferences such as\r\n\r\n- prefers-reduced-motion\r\n- prefers-color-scheme\r\n\r\nTake a look at [the A11yUserPreferences page](https://docs.pmnd.rs/a11y/access-user-preferences) or the [demo](https://n4rzi.csb.app) to see it in action and how to use it. The demo will adapt to your system preferences.\r\n\r\n## Additionals Features\r\n\r\nUse a custom tabindex with for your A11y components by providing a number to the tabIndex attribute\r\n\r\n```jsx\r\n\r\n```\r\n\r\nβ β β \r\n
\r\nAvoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on\r\nassistive technology to navigate and operate page content. Instead, write the document with the\r\nelements in a logical sequence.\r\n
\r\nMore about the use of tabIndex on{' '}\r\n\r\n developer.mozilla.org\r\n\r\n\r\n### Author:\r\n\r\n- [`twitter π @AlaricBaraou`](https://twitter.com/AlaricBaraou)\r\n","engines":{"node":">=10"},"gitHead":"644ede5d3166911db1414e1c947b48c19590c8ee","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.0.3","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"15.0.1","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":">=17.0","three":">=0.126.0","react-dom":">=17.0","@react-three/fiber":">=6.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_2.2.0-alpha.1_1624873297111_0.1534008076322766","host":"s3://npm-registry-packages"}},"2.2.3":{"name":"@react-three/a11y","version":"2.2.3","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@2.2.3","maintainers":[{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"unframework","email":"nick.matantsev@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"aedfe0b4cf125c833ab46e831d19d0ac2b7954ba","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-2.2.3.tgz","fileCount":28,"integrity":"sha512-hcPbGOLfYnBzv0EgBMWfq9upQL4EBSVjb20AUH5t5nZ6qoY/2II0yWHM3xFVzk8ZdZBDTHMe9tpoI0aQ0u82hQ==","signatures":[{"sig":"MEYCIQCqmpnoy7420Wk/X1zhSD7XbHjhy0C5h57S0NPzLbbe0QIhALOmDbV+YBYn3V0ingsMtS79ZO0vVG4pb6Jj70ae82H8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":278897},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"225f58eccad1d0ad2961f67edc0831ac6e5b434f","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.0.3","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"15.0.1","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":">=17.0","three":">=0.126.0","react-dom":">=17.0","@react-three/fiber":">=6.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_2.2.3_1632918378715_0.54750668039657","host":"s3://npm-registry-packages"}},"2.2.4":{"name":"@react-three/a11y","version":"2.2.4","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@2.2.4","maintainers":[{"name":"codyjasonbennett","email":"hi@codyb.co"},{"name":"farazshaikh","email":"farazzshaikh@gmail.com"},{"name":"joergjaeckel","email":"jojaecke@gmail.com"},{"name":"bjornstar","email":"bjorn@bjornstar.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"unframework","email":"nick.matantsev@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"f5c58496abcb7daff7d1da97c3f24b91fd618e31","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-2.2.4.tgz","fileCount":28,"integrity":"sha512-EELVPNQC4JwXXAHRGQ9iA6O5S6stOk8zl+6alOdeQoYlXuVKyPGL3dCLGsaOqgudJERDFqxATDXRc/8JTNC/3Q==","signatures":[{"sig":"MEUCIQDuufv/vJwFwfUR0Sk8PvgWQPo5ENCjP26myn+cpvxP7QIgFzakdIcSwLvUJRuia2S9LpTBTF7mR215q8LNB+4b5N8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSMXHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcehAAlyNAIstpe2xfJdYwEUYSAK74ckEsO9JizjgzE34WCGz5md3m\r\nxdAhHCy+GDEENFV6yedUaYFMql1aYMQZoER6uX6eCTWBJhBMszng/AT7iV1h\r\njqwPddrHkoNLptPLxjTaxaJ4J5XkqC8hrVBjGdR74R5cG+DiRS52ywR1W4zx\r\nT/P7xXwWt2rVqkOIUQNl6L1ZoN28X+lKCAPczaH9mOyuS5zZ92aqtiWjLBcR\r\nkpQdWZi+Mj2ucbxY9EUcVe6wBDb6xtmbrFiHvirhSLPKhEJGrQxqatZYq9BB\r\nM6bWzNZmYkx9gw9/xd5kPFp69W3ob71imuEMLIXXRLHNeSzzBnLb+SqW6xvQ\r\nGWrfI/+D0YrxwiIn0vhkrNq5YDCJrgvbQJGXg1QSY/1o9jlF0e7MtJiSsBjl\r\n6ZT7nPSOaW7wDODQZkPH/kUbi6aqtAaWtF/fLVVoL33ltZQR2WDf6l4zGSku\r\n0BYfUcfiaZIl3BLbt7HVPiswkaZhoizxscZpoEkN6pt+7x+K2fe8iqavfFFX\r\nFs8g4UoaNp73cplDACfHcEYm0CrF2fF+N1cT6+76gObDR6cojXpJvaxWIwtx\r\nboCVa9gsVTXmTIiw36OifcUg1c05gg2HKg2DsCb2XAcUc6RaMV6/BHJChU/H\r\nRRmQtITj6P/+ULmdWaJXfhJWDhnFFlxenkc=\r\n=fFn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"24a32403fed185008a92569d887a456637622ad1","scripts":{"lint":"tsdx lint","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"8.5.0","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"16.14.2","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^17.0.1","three":"^0.124.0","tslib":"^2.1.0","react-is":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.10.1","typescript":"^4.2.3","@babel/core":"^7.13.10","@types/react":"^17.0.3","babel-loader":"^8.2.2","@storybook/react":"^6.1.21","@types/react-dom":"^17.0.2","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":">=17.0","three":">=0.126.0","react-dom":">=17.0","@react-three/fiber":">=6.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_2.2.4_1648936390841_0.8459188815954084","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@react-three/a11y","version":"3.0.0","keywords":["a11y","accessibility","three","react","react-three-fiber"],"author":{"name":"Alaric Baraou"},"license":"MIT","_id":"@react-three/a11y@3.0.0","maintainers":[{"name":"wiledal","email":"hugo.wiledal@gmail.com"},{"name":"codyjasonbennett","email":"hi@codyb.co"},{"name":"farazshaikh","email":"farazzshaikh@gmail.com"},{"name":"joergjaeckel","email":"jojaecke@gmail.com"},{"name":"bjornstar","email":"bjorn@bjornstar.com"},{"name":"gsimone","email":"gianmarcosimone89@gmail.com"},{"name":"giulioz","email":"mail.zausa.giulio@gmail.com"},{"name":"stephencorwin","email":"stephenjcorwin@gmail.com"},{"name":"dropthebeatbro","email":"pilll.PL22@gmail.com"},{"name":"mlperego","email":"mlp.perego@gmail.com"},{"name":"sniok","email":"dubenko.oleksandr@gmail.com"},{"name":"iinfin","email":"han@iinf.in"},{"name":"codynova","email":"codyrnova@gmail.com"},{"name":"drcmda","email":"drcmda@gmail.com"},{"name":"marcofugaro","email":"marco.fugaro@gmail.com"},{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},{"name":"tdfka_rick","email":"Joshua.ellis18@gmail.com"},{"name":"stockhuman","email":"mikemingway@gmail.com"},{"name":"unframework","email":"nick.matantsev@gmail.com"}],"homepage":"https://github.com/pmndrs/react-three-a11y#readme","bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"dist":{"shasum":"5cdb9a7ca910162041f4373da4fe4f754322728b","tarball":"https://registry.npmjs.org/@react-three/a11y/-/a11y-3.0.0.tgz","fileCount":28,"integrity":"sha512-lnKIK8oPQBDWdzVMKm4kNi7W8RoGE7s5sHbw7Wz++MhyXih5L4aLyNkWedCn9v/PjRl2x3zIbzzZIWqoabwkJA==","signatures":[{"sig":"MEQCIBs+nFfDwLRRl29AuvpfO9BQIcS7Ll/DBaP5itQMPxZqAiA/5XdN1/LBaH+OitMxrGpNtFzelrFGopisNjsgYpXOAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":274008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigHvNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYIA/+P32UZ75d4Imdo+FcIbG8gwODA5BZxD57lsk1YfgTHywgVj6M\r\nSflduuEWX3NJjQnqc1M/QQEQE4szZW4qtgN1DQwqurdnj7ov8R33wE+9Bo3i\r\nNABy3yil+IRpssEbspy69mTAU+oX9QKaMf0XISgu+DpUbVpMWcMtlG7NKOCA\r\ng4V2Zi5r63t8z3b3L5IRLC6l0EBrHk7Q4qAXTy5+yvpjAtSow+9VmN1mbXzQ\r\n0wCpyud6+FfsvV+Dyf67Bg9gYWfhY0Wap21x0wNRGq+ggQhSSQf0ocCK5zws\r\nZAYLpNyCgUIwojz9StquD/FJ4xZv7MaUHg1wbWPEs9tjZORnQ+UfR00otP4D\r\nNlSGmemvXCdg41BdviW/pYZNlVJXbc6bna5MhPMbUNVSlaPauH9t37bheg0F\r\nxH3WI4mfROhi6TAlJnIoSyKuerTHFN/oBEh5DE0kgFQUD+jfiQyVPb1tNoJ/\r\nh5pMY7R3iEAmialwtP3F1FqkdhK/GFDnncFuHY/Z2Sw4puLu8prpZCZUAucP\r\ntapjAzBkN6aEuBTTiVAvc7LuVPSrO41v8kKrrFK7ptybJPw/4Ti571dDy2uE\r\nNfuyFAT0zt6Gd+sGrGC/Y0kehBK2jetMq3HhJ6vWNGlL/GgR7DT/z7WZsHWH\r\nCVTR3vVVtU2DIps4lNN1Lv48yOyC1Q2X7+Y=\r\n=LanR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"tsdx lint"}},"module":"dist/a11y.esm.js","engines":{"node":">=10"},"gitHead":"321a7e3074d12f883f5c5dd78cf576b1cfdcaecf","scripts":{"lint":"tsdx lint --fix","size":"size-limit","test":"tsdx test --passWithNoTests","build":"tsdx build","start":"tsdx watch","analyze":"size-limit --why","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"typings":"dist/index.d.ts","_npmUser":{"name":"alaric.baraou","email":"alaric.baraou@gmail.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"size-limit":[{"path":"dist/a11y.cjs.production.min.js","limit":"10 KB"},{"path":"dist/a11y.esm.js","limit":"10 KB"}],"_npmVersion":"7.22.0","description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","directories":{},"_nodeVersion":"15.5.1","dependencies":{"zustand":"^3.2.0","utility-types":"^3.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","husky":"^5.1.3","react":"^18.0.0","three":"^0.124.0","tslib":"^2.1.0","react-is":"^18.0.0","react-dom":"^18.0.0","size-limit":"^4.10.1","typescript":"^4.5.2","@babel/core":"^7.13.10","@types/jest":"^26.0.10","@types/react":"^17.0.5","@types/three":"^0.139.0","babel-loader":"^8.2.2","@storybook/react":"^6.4.9","@types/lodash-es":"^4.17.3","@types/react-dom":"^18.0.4","@storybook/addons":"^6.1.21","@react-three/fiber":"^6.0.1","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.1.21","@storybook/addon-essentials":"^6.1.21","@size-limit/preset-small-lib":"^4.10.1"},"peerDependencies":{"react":">=18.0","three":">=0.133.0","react-dom":">=18.0","@react-three/fiber":">=8.0"},"_npmOperationalInternal":{"tmp":"tmp/a11y_3.0.0_1652587469516_0.08629082986994052","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-01-04T12:54:23.803Z","modified":"2026-08-07T16:12:50.072Z","0.1.0":"2021-01-04T12:54:24.171Z","0.2.0":"2021-01-11T15:33:36.418Z","0.3.0":"2021-01-19T14:16:32.921Z","0.4.0":"2021-02-07T18:09:58.814Z","0.5.0":"2021-02-11T12:46:36.882Z","0.5.1":"2021-03-13T12:28:58.990Z","1.0.0":"2021-03-13T12:42:17.887Z","1.0.1-0":"2021-03-14T18:25:35.047Z","1.0.2-0":"2021-03-14T18:58:24.782Z","1.0.0-alpha.0":"2021-03-14T19:57:55.765Z","1.0.0-alpha.1":"2021-03-14T20:06:55.930Z","1.0.0-alpha.2":"2021-03-14T21:54:52.568Z","1.0.0-alpha.4":"2021-03-14T22:04:40.736Z","1.0.0-alpha.5":"2021-03-14T22:26:43.303Z","1.0.0-alpha.6":"2021-03-15T16:27:58.586Z","1.0.0-alpha.7":"2021-03-15T17:32:55.246Z","1.0.0-alpha.8":"2021-03-15T19:31:38.770Z","1.0.0-alpha.9":"2021-03-15T20:25:44.002Z","1.0.1":"2021-03-15T20:36:31.184Z","1.0.2-alpha-0":"2021-03-16T21:51:48.368Z","2.0.0":"2021-04-01T16:16:30.733Z","2.0.1":"2021-04-10T17:56:45.571Z","2.0.2":"2021-05-02T15:57:08.948Z","2.1.0":"2021-06-16T09:54:41.774Z","2.2.0":"2021-06-24T15:48:08.918Z","2.2.0-alpha.0":"2021-06-24T15:53:42.307Z","2.2.0-alpha.1":"2021-06-28T09:41:37.254Z","2.2.1":"2021-09-29T12:12:05.074Z","2.2.2":"2021-09-29T12:21:45.610Z","2.2.3":"2021-09-29T12:26:18.985Z","2.2.4":"2022-04-02T21:53:11.039Z","3.0.0":"2022-05-15T04:04:29.701Z"},"bugs":{"url":"https://github.com/pmndrs/react-three-a11y/issues"},"author":{"name":"Alaric Baraou"},"license":"MIT","homepage":"https://github.com/pmndrs/react-three-a11y#readme","keywords":["a11y","accessibility","three","react","react-three-fiber"],"repository":{"url":"git+https://github.com/pmndrs/react-three-a11y.git","type":"git"},"description":"π©βπ¦― Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support","maintainers":[{"email":"gianmarcosimone89@gmail.com","name":"gsimone"},{"email":"drcmda@gmail.com","name":"drcmda"},{"email":"joshua.ellis18@gmail.com","name":"tdfka_rick"},{"email":"farazzshaikh@gmail.com","name":"farazshaikh"},{"email":"isaac@isaacmason.com","name":"isaacmason"},{"email":"bela@bohlender.email","name":"bela-bohlender"},{"email":"dennis@smolek.dev","name":"dennissmolek"},{"email":"kjbaumgartner@gmail.com","name":"krispyaa"},{"email":"alaric.baraou@gmail.com","name":"alaric.baraou"}],"readme":"@react-three/a11y
\n\n[](https://www.npmjs.com/package/@react-three/a11y)\n[](https://www.npmjs.com/package/@react-three/a11y)\n[](https://discord.gg/ZZjjNvJ)\n\n\n\n@react-three/a11y brings accessibility to webGL with easy-to-use react-three-fiber components:\n\n- Focus and focus indication\n- Tab index and keyboard navigation\n- Screen reader support and alt-text\n- Roles and cursor shapes\n- Descriptive links\n\nYou can try a [live demo here](https://n4rzi.csb.app).\n\n```bash\nnpm install @react-three/a11y\n```\n\n## Quick overview to get started\n\nnote: The full documentation can be found on the [pmndrs website](https://docs.pmnd.rs/a11y/introduction).\n\n### The A11yAnnouncer component\n\nFirst, place the A11yAnnouncer component next to the R3F Canvas component. this componant is critical since it manage some screen-reader features.\n\n```jsx\nimport { Canvas } from '@react-three/fiber'\nimport { A11yAnnouncer } from '@react-three/a11y'\n\nfunction App() {\n return (\n <>\n \n \n \n )\n}\n```\n\n### Then wrap components you want to make accessible with the A11y component\n\nTo add accessibility features to your scene you'll have to wrap components you want to make focusable with the `A11y` component:\n\n```jsx\nimport { A11y } from '@react-three/a11y'\n[...]\n\n \n\n```\n\n`MyComponent` can now receive focus. More accurately, the emulated \"focus\" will be handled at the `A11y` components which acts as a provider\nfor children to access its state. But even if objects are focusable, nothing will be displayed or shown by default.\n\n## Call function on focus\n\nThe `focusCall` prop of `A11y` will be called each time this component receives focus (usually through tab navigation).\n\n```jsx\n console.log(\"in focus\")} ... />\n```\n\n## Call function on click / keyboard Click\n\nThe `actionCall` prop of `A11y` will be called each time this component gets clicked, focused, keyboard activated etc.\n\n```jsx\n console.log(\"clicked\")} ... />\n```\n\n## Provide a description of the currently focused / hovered element\n\nWhen using the `description` prop in combination with the `role` prop, the `A11y` component will provide a description to the screen reader users on focus/hover.\nOptionally, you can also show the description to the user on hover by setting `showAltText={true}`.\n\n```jsx\n// Reads \"A rotating red square\" to screen readers on focus / hover while also showing it on mouseover\n\n// Reads \"Button, open menu + (description on how to activate depending on the screen reader)\" to screen readers on focus / hover\n{someFunction()}} ... />\n```\n\n## The four roles of the A11y component\n\nLike in HTML, you can focus different kind of elements and expect different things depending on what you're focusing.\n\n#### Content\n\n```jsx\n\n```\n\nUses the `default` cursor. This role is meant to provide information to screen readers or to serve as a step for a user to navigate your site using Tab for instance. It's not meant to trigger anything on click or to be activable with the Keyboard. Therefore it won't show a pointer cursor on hover.\n\n[Read more about role content](/a11y/roles/content)\n\n#### Button\n\n```jsx\n\n```\n\nUses the `pointer` cursor. Special attributes: `activationMsg`.\n\nThis role is meant to emulate the behaviour of a button or a togglable button. It will display a cursor pointer when your cursor is over the linked 3D object. It will call a function on click but also on any kind of action that would trigger a focused button (Enter, Double-Tap, ...). It is also actionnable by user using a screen reader.\n\n[Read more about role button](https://docs.pmnd.rs/a11y/roles/button)\n\n#### ToggleButton\n\nBy using the role togglebutton, you'll emulate a button with two state that will have the `aria-pressed` attribute.\nYou'll then be able to use the deactivationMsg property in addition to the usual description and activationMsg properties.\n\n```jsx\n\n```\n\nSpecial attributes: `deactivationMsg`\n\n[Read more about role ToggleButton](https://docs.pmnd.rs/a11y/roles/togglebutton)\n\n#### Link\n\n```jsx\n\n```\n\nUses the `pointer` cursor. Special attributes: `href`.\n\nThis role is meant to emulate the behaviour of a regular html link. It should be used in combination with something that will trigger navigation on click.\n\n\n - Don't forget to provide the href attribute as he is required for screen readers to read it\n correctly ! - It will have no effect on the navigation, it's just used as information\n\n\n[Read more about role link](https://docs.pmnd.rs/a11y/roles/link)\n\n## Screen Reader Support\n\nIn order to provide informations to screen reader users and use this package at its full potential, fill the `description` prop of all your `A11y` components and use the appropriate `role` prop on each of them.\n\n### Use of section\n\nFor screen readears, it might be useful to provide additionnal information on how to use some unconventional UI.\nYou can do it by wrapping the concerned part of your code relative to this UI in the A11ySection like so.\n\n```jsx\n\n [...]\n\n```\n\n## Access user preferences\n\nThe A11yUserPreferences component is available in order to access user preferences such as\n\n- prefers-reduced-motion\n- prefers-color-scheme\n\nTake a look at [the A11yUserPreferences page](https://docs.pmnd.rs/a11y/access-user-preferences) or the [demo](https://n4rzi.csb.app) to see it in action and how to use it. The demo will adapt to your system preferences.\n\n## Additionals Features\n\nUse a custom tabindex with for your A11y components by providing a number to the tabIndex attribute\n\n```jsx\n\n```\n\nβ β β \n
\nAvoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on\nassistive technology to navigate and operate page content. Instead, write the document with the\nelements in a logical sequence.\n
\nMore about the use of tabIndex on{' '}\n\n developer.mozilla.org\n\n\n### Author:\n\n- [`twitter π @AlaricBaraou`](https://twitter.com/AlaricBaraou)\n","readmeFilename":"README.md"}