Feature/image editor a11y #11496
Feature/image editor a11y #11496
Conversation
…; refactor show/hide functions
…e; update radio inputs for minimum touch target size
…raint button container
…d refocus on close
gcamacho079
requested review from
benjamindavid,
nfourtythree and
a team
as code owners
DEV-499 When editing image assets, Rotate and crop options are not keyboard accessible
Rotate and Crop "buttons" are not keyboard accessible, so users can't switch between Image Editor panels The Rotate and Crop buttons should be built using the Tabs with Manual Activation authoring guidelines, and vertical (up and down arrow) keyboard handlers should be included along with the ones outlined in the document Resolves CMS-015 DEV-505 Image crop constraints are not keyboard accessible
Image crop constraints are built using clickable divs, which are not accessible to keyboard users Crop constraints should be built using a set of radio buttons Resolves CMS-152 DEV-510 Custom constraint text inputs do not have programmatically determined labels
There is no programmatic label for the constraint width/height inputs for the custom option The fields should be given at least visually-hidden labels to solve this issue Resolves CMS-157 DEV-500 Slider for image rotation is not keyboard accessible
The image rotation slider is not accessible to keyboard or screen reader users, as it requires clicking and dragging the Recommendation is to use an accessible component like the Horizontal Slider to build the rotation component Screen Shot 2022-04-18 at 6.28.48 AM.png Resolves CMS-017 DEV-495 When closing the Image Editor modal, focus is not returned to the element that triggered it
Location: Asset (Single) When closing the image editor with the keyboard using the ESC key, focus is not returned to the button that triggered it Return focus to the "Edit" button when the modal is closed Resolves CMS-144 DEV-503 Doubling size of text content causes loss of rotation angle information
When a user with low vision doubles the size of text content, the text bar below the rotation control becomes clipped so that a user can no longer see the angle of rotation. Element heights and positioning should be adjusted so that they are not clipped when the content is zoomed. Resolves CMS-150 DEV-507 Constraints should come after portrait/landscape option, instead of after
When a user selects a new orientation, the constraint options are updated. A screen reader user would not know that the content has updated, and a keyboard user would have to tab backwards to take advantage of the new options. The orientation selector should be moved ahead of the constraints in the DOM order to maintain a meaningful focus order. Resolves CMS-153 |
# Conflicts: # src/web/assets/cp/dist/cp.js # src/web/assets/cp/dist/cp.js.map # src/web/assets/garnish/dist/garnish.js # src/web/assets/garnish/dist/garnish.js.map
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
[ci skip]
New Crowdin updates
Avoids JS errors that could occur via a race condition, by switching modes too quickly with the keyboard
Description
Related issues