You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is your feature request related to a problem? Please describe.
It is not exactly a problem, but currently the Cropper component lacks built-in keyboard accessibility. This makes it difficult for users who rely on keyboard navigation to adjust the crop area.
Describe the solution you'd like
I would like to see built-in support for keyboard interactions within react-easy-crop. Specifically, I’d like users to be able to:
Focus on the crop area using keyboard navigation.
Move the crop area incrementally using arrow keys (e.g., by 1px or a customizable amount per key press).
Describe alternatives you've considered
I've implemented keyboard accessibility manually using a combination of DOM manipulation and event listeners. This involves adding a tabindex to the crop area and attaching keydown event handlers to adjust the crop position. However, this doesn't feel right, since this doesn't trigger the onCropChange, onInteractionStart, etc functions.
I'm open to review a pull request adding keyboard support. I'm wondering what keys should be used to zoom in and out though? What about rotation?
Padding seems easy to implement and could be a good first step 👍
Just opened a PR that handles the crop area movement for now. Please let me know if there's anything else you'd like me to address. Regarding zoom, we could use something like +/-, and for rotation, perhaps Ctrl + Arrow keys would work well 🤔
Is your feature request related to a problem? Please describe.
It is not exactly a problem, but currently the Cropper component lacks built-in keyboard accessibility. This makes it difficult for users who rely on keyboard navigation to adjust the crop area.
Describe the solution you'd like
I would like to see built-in support for keyboard interactions within react-easy-crop. Specifically, I’d like users to be able to:
Focus on the crop area using keyboard navigation.
Move the crop area incrementally using arrow keys (e.g., by 1px or a customizable amount per key press).
Describe alternatives you've considered
I've implemented keyboard accessibility manually using a combination of DOM manipulation and event listeners. This involves adding a tabindex to the crop area and attaching keydown event handlers to adjust the crop position. However, this doesn't feel right, since this doesn't trigger the onCropChange, onInteractionStart, etc functions.
Examples:
I haven't dig deeper in https://www.npmjs.com/package/react-image-crop implementation, but they have fully keyboard accessibility.
Thanks for the amazing work you’ve done on this library! :)
The text was updated successfully, but these errors were encountered: