react-three-a11y

Updated @react-three/a11y in order to use it with React 18.

Thanks to indiejoseph for the help

Adds an optional dragThreshold prop to the A11y component. If the onClick event delta ( Distance between mouse down and mouse up event in pixels ) is greater than this value, the action event handler doesn't fire.

This can help when using this library with the drei MapControls, where drags that start and end on the same A11y target to prevent trigger a click event when the user's intention is to just pan the camera.

thanks to @claytercek for the PR

fix: add support for older browsers (b913ecf)

fix: correct sections' default styling (9bd4416)

fix: correct section wrapping (0f4758d)

feat: added custom DOM tags (161de54)

feat: added new role: image (a2f5310)

Buf fix :

• click actionCall could be fired twice for mouse users on the component A11y with role buttons and togglebutton

Updated peerDependencies

Fix some issues with wrongly required props.
https://github.com/pmndrs/react-three-a11y/issues/20

Minimum supported version of r3f is ">=6.0"

The drei's Html component have been replaced by a lighter version in order to fix some build issues making react-three-a11y not usable with react-three-next.
Also lost a few kb in the process.

Stable Version

Change logs :

General :

• Added a new A11ySection component. It's useful to provide additionnal information on how to use some unconventional UI.
• Added the role togglebutton to the A11y component
• A11y Component with content role are not focusable by default anymore.
• Use the native disabled attribute instead of aria-disabled
• removed the pressedDescription prop on A11y. It was encouraging to change the inner text of a button which is often more confusing than helpful.
• Removed all of the ARIA live call that could be a duplicate information.
• Changed the ARIA live region's politeness level to "polite" (not "assertive")
• Added the possibility to dynamically hide some 3D objects from screen readers using aria-hidden
• renamed the pressed props to startPressed to reflect more how it works

Demo changes :

• Removed action prompts like "Press" from the button text.
• Removed the word "button" from the button text.
• Hide carousel items that are not meant to be "visible" from screen reader users.
• Since this is a complex, non-standard UI, some screen-reader-only instructions should be provided to explain how to work with it. This is now done through the A11ySection component.
• The content order of the arrow buttons, 3D shapes, and light mode button now match the visual appearance.
• Color contrast has been improved

Change logs :

A new component is available in order to access user preferences such as

• prefers-reduced-motion
• prefers-color-scheme

The demo has been updated accordingly in order to showcase this feature.
If you access it with a browser exposing your preference for reduced animation or a dark theme you'll see the app design / behaviour adapt to it.

Change logs :

• Allow screen readers users to explore freely the screen without using the swipe gesture ( tab equivalent )
• Add a debug mode ( pass the debug={true} prop to the a11y components to display the htm accessible to screen readers )
• Fix a bug that occurred when one click could trigger x actions if multiple 3D objects are under it
• Provide a way to deal with edge case shape while we don't have a smarter html positioning ( cf below )

In the case of a donut for instance, the button would be positioned in the middle of it, where it shouldn't be anything to trigger an hover etc
With the a11yElStyle props the user can fix it
before

after

First release ! 🚀