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

scripts/copyicons.php

@@ -111,6 +111,8 @@
     'solid/apple-core.svg',
     'solid/apple-whole.svg',
     'solid/archway.svg',
+    'solid/arrow-down-left.svg',
+    'solid/arrow-down-right.svg',
     'solid/arrow-down-short-wide.svg',
     'solid/arrow-down-wide-short.svg',
     'solid/arrow-down.svg',
@@ -124,6 +126,8 @@
     'solid/arrow-trend-down.svg',
     'solid/arrow-trend-up.svg',
     'solid/arrow-turn-down-left.svg',
+    'solid/arrow-up-left.svg',
+    'solid/arrow-up-right.svg',
     'solid/arrow-up-right-from-square.svg',
     'solid/arrow-up.svg',
     'solid/arrows-rotate-reverse.svg',

src/icons/index.php

@@ -259,6 +259,18 @@
     'terms' => ' downwards arrow download ',
     'pro' => false,
   ),
+  'arrow-down-left' =>
+  array(
+    'name' => ' arrow down left ',
+    'terms' => ' diagonal southwest ',
+    'pro' => true,
+  ),
+  'arrow-down-right' =>
+  array(
+    'name' => ' arrow down right ',
+    'terms' => ' diagonal southeast ',
+    'pro' => true,
+  ),
   'arrow-down-short-wide' =>
   array(
     'name' => ' arrow down short wide ',
@@ -337,6 +349,18 @@
     'terms' => ' upwards arrow forward upgrade upload ',
     'pro' => false,
   ),
+  'arrow-up-left' =>
+  array(
+    'name' => ' arrow up left ',
+    'terms' => ' diagonal northwest ',
+    'pro' => true,
+  ),
+  'arrow-up-right' =>
+  array(
+    'name' => ' arrow up right ',
+    'terms' => ' diagonal northeast ',
+    'pro' => true,
+  ),
   'arrow-up-right-from-square' =>
   array(
     'name' => ' arrow up right from square ',

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 data-item-name>{{ 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,6 +77,136 @@
             value: 'none',
             options: constraintOptions,
         }) }}
+
+        {% set cropHandleBtns = [
+            {
+                label: orientation == 'ltr' ? 'Top Left Handle'|t('app') : 'Top Right Handle'|t('app'),
+                handle: orientation == 'ltr' ? 'tl' : 'tr',
+                icon: orientation == 'ltr' ? 'arrow-up-left' : 'arrow-up-right',
+            },
+            {
+                label: 'Top Handle'|t('app'),
+                handle: 't',
+                icon: 'arrow-up',
+            },
+            {
+                label: orientation == 'ltr' ? 'Top Right Handle'|t('app') : 'Top Left Handle'|t('app'),
+                handle: orientation == 'ltr' ? 'tr' : 'tl',
+                icon: orientation == 'ltr' ? 'arrow-up-right' : 'arrow-up-left',
+            },
+            {
+                label: orientation == 'ltr' ? 'Left Handle'|t('app') : 'Right Handle'|t('app'),
+                handle: orientation == 'ltr' ? 'l' : 'r',
+                icon: orientation == 'ltr' ? 'arrow-left' : 'arrow-right',
+            },
+            {
+                label: orientation == 'ltr' ? 'Right Handle'|t('app') : 'Left Handle'|t('app'),
+                handle: orientation == 'ltr' ? 'r' : 'l',
+                icon: orientation == 'ltr' ? 'arrow-right' : 'arrow-left',
+            },
+            {
+                label: orientation == 'ltr' ? 'Bottom Left Handle'|t('app') : 'Bottom Right Handle'|t('app'),
+                handle: orientation == 'ltr' ? 'bl' : 'br',
+                icon: orientation == 'ltr' ? 'arrow-down-left' : 'arrow-down-right',
+            },
+            {
+                label: 'Bottom Handle'|t('app'),
+                handle: 'b',
+                icon: 'arrow-down',
+            },
+            {
+                label: orientation == 'ltr' ? 'Bottom Right Handle'|t('app') : 'Bottom Left Handle'|t('app'),
+                handle: orientation == 'ltr' ? 'br' : 'bl',
+                icon: orientation == 'ltr' ? 'arrow-down-right' : 'arrow-down-left',
+            },
+        ] %}
+
+        {% set directionalButtons = [
+            {
+                label: 'Up'|t('app'),
+                direction: 'up',
+            },
+            {
+                label: orientation == 'ltr' ? 'Left'|t('app') : 'Right'|t('app'),
+                direction: orientation == 'ltr' ? 'left' : 'right',
+            },
+            {
+                label: 'Down'|t('app'),
+                direction: 'down',
+            },
+            {
+                label: orientation == 'ltr' ? 'Right'|t('app') : 'Left'|t('app'),
+                direction: orientation == 'ltr' ? 'right' : 'left',
+            },
+        ] %}
+        <craft-disclosure>
+            {{ _self.iconButton({
+                icon: 'eye',
+                label: 'Crop Edit Controls'|t('app'),
+                buttonAttributes: {
+                    'aria-controls': 'cropper-edit'
+                }
+            }) }}
+        </craft-disclosure>
+
+        <fieldset id="cropper-edit" class="cropper-edit">
+            <div id="move-icon-wrapper" style="display: none;">{{ iconSvg('up-down-left-right') }}</div>
+            <legend class="cropper-edit__legend">
+                {{ 'Edit {type}'|t('app', {
+                    type: 'Cropping Rectangle'|t('app'),
+                }) }}
+            </legend>
+
+            <div class="cropper-edit__wrapper">
+                {{ _self.iconButton({
+                    icon: 'frame',
+                    label: 'Cropping Rectangle'|t('app'),
+                    id: 'cropper-handle',
+                    buttonAttributes: {
+                        data: {
+                            'crop-editor': 'rectangle',
+                        },
+                        class: ['cropper-edit__btn']
+                    }
+                }) }}
+            </div>
+
+            <div class="cropper-edit__wrapper cropper-edit__wrapper--handles">
+                {% for button in cropHandleBtns %}
+                    {% if loop.index == 5 %}
+                        <div></div>
+                    {% endif %}
+                    {{ _self.iconButton({
+                        icon: button.icon,
+                        label: button.label,
+                        buttonAttributes: {
+                            data: {
+                                'crop-editor': button.handle,
+                            },
+                            class: ['cropper-edit__btn']
+                        }
+                    }) }}
+                {% endfor %}
+            </div>
+
+            <div class="cropper-edit__wrapper cropper-edit__wrapper--arrows directional-buttons hidden">
+                {% for button in directionalButtons %}
+                    {% tag 'button' with {
+                        class: ['btn'],
+                        type: 'button',
+                        aria: {
+                            label: button.label,
+                        },
+                        data: {
+                            direction: button.direction,
+                        }
+                    } %}
+                        <div class="cp-icon puny">{{ iconSvg(button.direction) }}</div>
+                    {% endtag %}
+                {% endfor %}
+            </div>
+
+        </fieldset>
     </div>
 </div>
 <div class="image-container">

src/translations/en/app.php

@@ -220,8 +220,11 @@
     'Blue' => 'Blue',
     'Body' => 'Body',
     'Bottom-Center' => 'Bottom-Center',
+    'Bottom Handle' => 'Bottom Handle',
     'Bottom-Left' => 'Bottom-Left',
+    'Bottom-Left Handle' => 'Bottom-Left Handle',
     'Bottom-Right' => 'Bottom-Right',
+    'Bottom-Right Handle' => 'Bottom-Right Handle',
     'Branch Limit' => 'Branch Limit',
     'Breadcrumbs' => 'Breadcrumbs',
     'Briefly describe your issue or idea.' => 'Briefly describe your issue or idea.',
@@ -488,6 +491,7 @@
     'Credentialed' => 'Credentialed',
     'Critical' => 'Critical',
     'Crop' => 'Crop',
+    'Cropping Rectangle' => 'Cropping Rectangle',
     'Currency' => 'Currency',
     'Current Password' => 'Current Password',
     'Current User Condition' => 'Current User Condition',
@@ -925,6 +929,7 @@
     'Leave blank if entries don’t have URLs' => 'Leave blank if entries don’t have URLs',
     'Leave blank if the entry doesn’t have a URL' => 'Leave blank if the entry doesn’t have a URL',
     'Leave it uninstalled' => 'Leave it uninstalled',
+    'Left Handle' => 'Left Handle',
     'Let each entry choose which sites it should be saved to' => 'Let each entry choose which sites it should be saved to',
     'Letterbox' => 'Letterbox',
     'Level {num}' => 'Level {num}',
@@ -1395,6 +1400,7 @@
     'Revision' => 'Revision',
     'Revisions for “{title}”' => 'Revisions for “{title}”',
     'Revisions' => 'Revisions',
+    'Right Handle' => 'Right Handle',
     'Rose' => 'Rose',
     'Rotate Left' => 'Rotate Left',
     'Rotate Right' => 'Rotate Right',
@@ -1807,8 +1813,11 @@
     'Toggle sidebar' => 'Toggle sidebar',
     'Tokens' => 'Tokens',
     'Top-Center' => 'Top-Center',
+    'Top Handle' => 'Top Handle',
     'Top-Left' => 'Top-Left',
+    'Top-Left Handle' => 'Top-Left Handle',
     'Top-Right' => 'Top-Right',
+    'Top-Right Handle' => 'Top-Right Handle',
     'Total Price' => 'Total Price',
     'Total releases' => 'Total releases',
     'Townland' => 'Townland',
@@ -1907,6 +1916,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, Tab or Spacebar to drop.' => 'Use the arrow keys to change position, Tab or Spacebar to drop.',
     '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 +2223,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

@@ -18,6 +18,50 @@ html.noscroll body {
   @include mixins.light-focus-ring;
   opacity: 0;
   user-select: none;
+
+  .cropper-edit {
+    display: grid;
+    max-width: 400px;
+    grid-gap: var(--s);
+
+    &:not([data-state='expanded']) {
+      @include mixins.visually-hidden;
+    }
+
+    &[data-state='collapsed'] {
+      .directional-buttons {
+        display: none;
+      }
+    }
+  }
+
+  .cropper-edit__wrapper--handles {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .cropper-edit__wrapper--handles,
+  .cropper-edit__wrapper--arrows {
+    grid-gap: var(--xs);
+  }
+
+  .cropper-edit__wrapper--arrows {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-areas:
+      '. up .'
+      'dir dir dir';
+
+    [data-direction='up'] {
+      grid-area: up;
+    }
+
+    [data-direction='down'],
+    [data-direction='left'],
+    [data-direction='right'] {
+      grid-row-start: 2;
+    }
+  }
 }
 
 .modal.imageeditor.modal {
@@ -530,3 +574,7 @@ html.noscroll body {
     }
   }
 }
+
+#cropping-canvas {
+  --focus-ring: none;
+}