Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard Support for Crop Area Movement #569

Open
JGuardiola95 opened this issue Sep 30, 2024 · 2 comments
Open

Keyboard Support for Crop Area Movement #569

JGuardiola95 opened this issue Sep 30, 2024 · 2 comments

Comments

@JGuardiola95
Copy link
Contributor

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! :)

@ValentinH
Copy link
Owner

Thanks for the issue.

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 👍

@JGuardiola95
Copy link
Contributor Author

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 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants