Skip to content

Updates Image Editor so that cropper move and resize are accessible for SR and keyboard users #17358

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 76 commits into
base: 5.8
Choose a base branch
from
Open

Updates Image Editor so that cropper move and resize are accessible for SR and keyboard users #17358

wants to merge 76 commits into from
+908 −168

Conversation

gcamacho079
Copy link
Contributor

@gcamacho079 gcamacho079 commented May 28, 2025 •
edited
Loading

Description

Adds visually hidden buttons to the Image Editor that allow screen reader and keyboard users to resize and move the cropping rectangle.

Still outstanding (but planned for a future release):

  • Visual UI for allowing users to resize and move the cropping rectangle without using a dragging motion.

Related issues

@gcamacho079
Make cropper container keyboard focusable
66092d2
@gcamacho079
Move toggle function, add keydown listener for cropper
d4f0b04
@gcamacho079
Commit
d5c39e3
@gcamacho079
Merge branch '5.7' into feature/pt-475-crop-frame-cannot-be-moved-usi…
f0a3994 
…ng-keyboard-alone
@gcamacho079
Remove default focus outline from cropping canvas, make cropping rect…
98aab89 
…angle outline wider when focused
@gcamacho079
Exit keydown handler if not a directional key
ad12b4d
@gcamacho079
Update cropper rectangle placement based on keyboard input
1e74d0f
@gcamacho079
Remove unused function
9aca6ee
@gcamacho079
Reuse code for both drag and keyboard move
b34ca22
@gcamacho079
Start moving to button versus having the canvas be focuable
24c329e
@gcamacho079
Toggle button state on activate, toggle picked up mode
fd7c25a
@gcamacho079
Add temp announcer to troubleshoot sr messages, when we add those in
79c68fe
@gcamacho079
Find position of cropper center
cfc1a5c
@gcamacho079
Fix bug where arrows were still activating tab change, move cropping …
faad842 
…rectangle button into container
@gcamacho079
Add button macro and use for all corner resize and crop moving buttons
d2de5c7
@gcamacho079
Pass corner info to data attribute on resize handle button
7595227
@gcamacho079
Merge 5.8 and build
420219b
@gcamacho079
Start refactoring for exclusive button functionality
556d5d2
@gcamacho079
Track which corner is picked up and change handle color (WIP)
44d7d5b
@gcamacho079
Add circle around selected corner based on which one has been picked up
663cf3a
@gcamacho079
Make corner focus ring more apparent and add new fxn for getting corn…
c3dc123 
…er coordinates
@gcamacho079
Refactor position message code
660cd22
@gcamacho079
Clean up styles and containers
f649e64
@gcamacho079
Toggle directional controls when a handle or the crop rectangle are p…
1e0fffc 
…icked up
@gcamacho079
Move crop rectangle on directional arrow press
dc81003
@gcamacho079
Get resize working for keyboard; TODO add edges as handles
aafa346
@gcamacho079
Make corners move on directional keypress, combine handlePickedUp wit…
0062459 
…h cornerPickedUp
@gcamacho079
Revert "Make corners move on directional keypress, combine handlePick…
44ab675 
…edUp with cornerPickedUp"

This reverts commit 0062459.
@gcamacho079
Rename twig corner property to handle
7d80d16
@gcamacho079
Rename focus outline property to refer to handle, not just corner
86c8d49
@gcamacho079 gcamacho079 added the accessibility 👤 features related to accessibility label May 28, 2025
@linear Linear
Copy link

linear bot commented May 28, 2025

A11Y-362 Crop frame cannot be moved using keyboard alone

@gcamacho079 gcamacho079 changed the title Feature/pt 475 crop frame cannot be moved using keyboard alone Updates Image Editor so that cropper move and resize are keyboard-accessible Jun 2, 2025
@gcamacho079 gcamacho079 changed the title Updates Image Editor so that cropper move and resize are keyboard-accessible Updates Image Editor so that cropper move and resize are accessible for SR and keyboard users Jun 2, 2025
@gcamacho079 gcamacho079 marked this pull request as ready for review June 2, 2025 23:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brandonkelly brandonkelly Awaiting requested review from brandonkelly

@brianjhanson brianjhanson Awaiting requested review from brianjhanson

Assignees
No one assigned
Labels
accessibility 👤 features related to accessibility
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@gcamacho079