Updates Image Editor so that cropper move and resize are keyboard-accessible

src/templates/_special/image_editor.twig

@@ -1,4 +1,5 @@
 {% import "_includes/forms" as forms %}
+{% set orientation = craft.app.locale.getOrientation() -%}
 {% do view.registerTranslations('app', [
   'Original',
   'Square',
@@ -8,6 +9,22 @@
     class: 'visually-hidden',
     text: 'Edit Image'|t('app'),
 }) }}
+
+{% macro iconButton(config) %}
+    {% set id = config.id ?? null %}
+    {% tag 'button' with {
+        id: id,
+        class: ['btn', 'flex', 'flex-nowrap', 'gap-s'],
+        type: 'button',
+        aria: {
+            pressed: 'false',
+        },
+    }|merge(config.buttonAttributes ?? {}, recursive=true) %}
+        <div class="cp-icon puny">{{ iconSvg(config.icon) }}</div>
+        <div>{{ config.label }}</div>
+    {% endtag %}
+{% endmacro %}
+
 <div class="tabs">
     <ul role="tablist">
         <li id="rotate-tab" data-view="rotate" role="tab" tabindex="0" aria-selected="true"><i></i>{{ 'Rotate'|t('app') }}</li>
@@ -60,9 +77,72 @@
             value: 'none',
             options: constraintOptions,
         }) }}
+
+        {% set cropHandleBtns = [
+            {
+                label: orientation == 'ltr' ? 'Top Left Handle'|t('app') : 'Top Right Handle'|t('app'),
+                corner: 'top-left',
+            },
+            {
+                label: orientation == 'ltr' ? 'Top Right Handle'|t('app') : 'Top Left Handle'|t('app'),
+                corner: 'top-right',
+            },
+            {
+                label: orientation == 'ltr' ? 'Bottom Left Handle'|t('app') : 'Bottom Right Handle'|t('app'),
+                corner: 'bottom-left',
+            },
+            {
+                label: orientation == 'ltr' ? 'Bottom Right Handle'|t('app') : 'Bottom Left Handle'|t('app'),
+                corner: 'bottom-right',
+            },
+        ] %}
+        <fieldset class="cropper-edit">
+            <legend>
+                {{ 'Edit {type}'|t('app', {
+                    type: 'Cropping Rectangle'|t('app'),
+                }) }}
+            </legend>
+            <div class="cropper-edit__btns">
+                {{ _self.iconButton({
+                    icon: 'up-down-left-right',
+                    label: 'Cropping Rectangle'|t('app'),
+                    id: 'cropper-handle',
+                    buttonAttributes: {
+                        data: {
+                            'crop-editor': 'rectangle',
+                        },
+                        class: ['cropper-edit__btn']
+                    }
+                }) }}
+                {% for button in cropHandleBtns %}
+                    {{ _self.iconButton({
+                        icon: 'expand',
+                        label: button.label,
+                        buttonAttributes: {
+                            data: {
+                                'crop-editor': 'corner',
+                                'corner-handle': button.corner,
+                            },
+                            class: ['cropper-edit__btn']
+                        }
+                    }) }}
+                {% endfor %}
+            </div>
+        </fieldset>
     </div>
 </div>
+
+
 <div class="image-container">
+    <div id="cropper-actions" class="hidden">
+        {% for button in cropHandleBtns %}
+            {{ tag ('button', {
+                type: 'button',
+                text: button.label,
+                class: 'visually-hidden',
+            }) }}
+        {% endfor %}
+    </div>
     <div class="image">
         <canvas id="image-canvas">
         </canvas>

src/translations/en/app.php

@@ -488,6 +488,7 @@
     'Credentialed' => 'Credentialed',
     'Critical' => 'Critical',
     'Crop' => 'Crop',
+    'Cropping Rectangle' => 'Cropping Rectangle',
     'Currency' => 'Currency',
     'Current Password' => 'Current Password',
     'Current User Condition' => 'Current User Condition',
@@ -1907,6 +1908,7 @@
     'Use defaults' => 'Use defaults',
     'Use for element thumbnails' => 'Use for element thumbnails',
     'Use shapes to represent statuses' => 'Use shapes to represent statuses',
+    'Use the arrow keys to change position, Spacebar to drop, Escape key to cancel.' => 'Use the arrow keys to change position, Spacebar to drop, Escape key to cancel.',
     'Use the loaded project config' => 'Use the loaded project config',
     'Use this field’s values as search keywords' => 'Use this field’s values as search keywords',
     'Used by' => 'Used by',
@@ -2213,6 +2215,7 @@
     '{filename} isn’t selectable for this field.' => '{filename} isn’t selectable for this field.',
     '{first, number}-{last, number} of {total, number} {total, plural, =1{{item}} other{{items}}}' => '{first, number}–{last, number} of {total, number} {total, plural, =1{{item}} other{{items}}}',
     '{first}-{last} of {total}' => '{first}–{last} of {total}',
+    '{item} picked up.' => '{item} picked up.',
     '{max, plural, =1{Author} other {Authors}}' => '{max, plural, =1{Author} other {Authors}}',
     '{names} {total, plural, =1{is installed as a trial} other{are installed as trials}}.' => '{names} {total, plural, =1{is installed as a trial} other{are installed as trials}}.',
     '{name} Setup' => '{name} Setup',

src/web/assets/cp/src/css/_image_editor.scss

@@ -530,3 +530,25 @@ html.noscroll body {
     }
   }
 }
+
+#cropping-canvas {
+  --focus-ring: none;
+}
+
+#cropper-actions {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.cropper-edit__btns {
+  max-width: 400px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  .btn {
+    flex: 0 1 50%;
+  }
+}

src/web/assets/cp/src/css/_main.scss

@@ -3670,6 +3670,10 @@ table {
     @include mixins.svg-mask(var(--icon-color, var(--ui-control-color)));
   }
 
+  &.xl {
+    --icon-size: calc(24rem / 16);
+  }
+
   &.large {
     --icon-size: calc(20rem / 16);
   }