@syncfusion/ej2-image-editor 26.1.40 → 26.2.4

package/src/image-editor/renderer/toolbar.js

@@ -639,7 +639,7 @@ var ToolbarModule = /** @class */ (function () {
         var toolbarItems = [];
         if (isOkBtn) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -721,7 +721,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (isApplyOption) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -865,7 +865,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.widthAspectRatio = function (e) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        if (e.keyCode === 109) {
+        if (e.keyCode === 109 || e.keyCode === 9) {
             return;
         }
         var parent = this.parent;
@@ -909,7 +909,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.heightAspectRatio = function (e) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        if (e.keyCode === 109) {
+        if (e.keyCode === 109 || e.keyCode === 9) {
             return;
         }
         var parent = this.parent;
@@ -977,7 +977,8 @@ var ToolbarModule = /** @class */ (function () {
                 placeholder: isResize ? null : height, format: '###.## px' })
         });
         if (!this.isAspectRatio) {
-            toolbarItems.push({ id: id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center', tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button' });
+            toolbarItems.push({ id: id + '_aspectratio', prefixIcon: 'e-icons e-lock', align: 'Center',
+                tooltipText: this.l10n.getConstant('AspectRatio'), type: 'Button', tabIndex: 0 });
             this.isAspectRatio = true;
         }
         else {
@@ -986,7 +987,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -1631,7 +1632,7 @@ var ToolbarModule = /** @class */ (function () {
             { id: 'svg', text: 'SVG' }
         ];
         var inputObj = new TextBox({
-            placeholder: this.l10n.getConstant('ImageName'),
+            placeholder: this.l10n.getConstant('ImageName')
         });
         inputObj.appendTo('#' + id + '_imgNametext');
         var qualityContainer = document.getElementById(id + '_imgQualitydiv');
@@ -1802,7 +1803,7 @@ var ToolbarModule = /** @class */ (function () {
         else {
             imageNameLabel = document.getElementById(id + '_imageNameLabel');
         }
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/tslint/config */
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         tempCanvas.toBlob((function (blob) {
             fileSize = Math.floor(blob.size / 1024);
             if (fileSize > 1000) {
@@ -1882,7 +1883,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -1959,7 +1960,7 @@ var ToolbarModule = /** @class */ (function () {
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
             if (obj['shape'] !== 'path') {
                 toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                    tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                    tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
                 toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                     tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
             }
@@ -2573,7 +2574,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -2871,6 +2872,15 @@ var ToolbarModule = /** @class */ (function () {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
                 }
                 this.initShapesToolbarItem(args.toolbarItems);
+                if (parent.activeObj.shape === 'image') {
+                    var actObj = extend({}, parent.activeObj, {}, true);
+                    parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.activeObj = actObj;
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj,
+                            isCropRatio: null, points: null, isPreventDrag: true } });
+                    this.renderQAT(false);
+                }
                 break;
             case 'text':
                 if (Browser.isDevice) {
@@ -2954,8 +2964,46 @@ var ToolbarModule = /** @class */ (function () {
                 parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                 break;
         }
-        this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
+        this.updateKBDNavigation(type);
+        this.currToolbar = type;
+    };
+    ToolbarModule.prototype.updateKBDNavigation = function (type) {
+        var parent = this.parent;
+        var id = parent.element.id;
+        if (!parent.isKBDNavigation || this.currToolbar === type) {
+            return;
+        }
+        if (this.isToolbar()) {
+            var tbar = parent.element.querySelectorAll('#' + id + '_toolbar')[0];
+            var tbarInitialChild = void 0;
+            var tbarInitialBtn_1;
+            if (tbar) {
+                tbarInitialChild = tbar.querySelector('.e-toolbar-center');
+                if (!tbarInitialChild || !tbarInitialChild.children[0]) {
+                    return;
+                }
+                tbarInitialBtn_1 = tbarInitialChild.children[0].querySelector('.e-btn');
+                var tempElem = tbarInitialChild.children[1];
+                if (tempElem) {
+                    tempElem = tempElem.children[0];
+                }
+                if (tempElem) {
+                    tempElem = tempElem.children[0];
+                }
+                if (type === 'resize' && tempElem) {
+                    tbarInitialBtn_1 = tempElem;
+                }
+                if (tbarInitialBtn_1) {
+                    if (type === 'main') {
+                        setTimeout(function () { return tbarInitialBtn_1.focus(); }, 50);
+                    }
+                    else {
+                        tbarInitialBtn_1.focus();
+                    }
+                }
+            }
+        }
     };
     ToolbarModule.prototype.performCropTransformClick = function (shape, isTransform) {
         var parent = this.parent;
@@ -3021,7 +3069,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -3074,7 +3122,7 @@ var ToolbarModule = /** @class */ (function () {
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
             toolbarItems.push({ id: id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Default'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + id + '_defaultCanvas' + ' tabindex=0></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
         if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
             toolbarItems.push({ id: id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
@@ -3147,7 +3195,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
-                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right', tabIndex: 0 });
             toolbarItems.push({ id: id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
@@ -5415,8 +5463,10 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: false } });
                 if (type === 'transparency') {
-                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
-                    parent.element.querySelector('#' + parent.element.id + '_transparency').click();
+                    setTimeout(function () {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                        parent.element.querySelector('#' + parent.element.id + '_transparency').click();
+                    }, 50);
                 }
             }
         });

package/styles/bootstrap-dark.css

@@ -757,8 +757,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #131313;
-  color: #f0f0f0;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap.css

@@ -759,8 +759,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #f8f8f8;
-  color: #333;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap4.css

@@ -770,6 +770,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important;
+          box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #545b62;

package/styles/bootstrap5-dark.css

@@ -787,6 +787,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #565e64;

package/styles/bootstrap5.css

@@ -787,6 +787,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #565e64;

package/styles/fabric-dark.css

@@ -759,8 +759,6 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #333232;
-  color: #dadada;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -776,6 +774,7 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #6f6c6c;

package/styles/fabric.css

@@ -762,8 +762,6 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #fff;
-  color: #333;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -779,6 +777,7 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #333;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #c8c8c8;

package/styles/fluent-dark.css

@@ -772,8 +772,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #252423;
-  color: #a19f9d;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -789,6 +787,9 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: inset 0 0 0 1px !important;
+          box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #292827;

package/styles/fluent.css

@@ -772,8 +772,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #f3f2f1;
-  color: #605e5c;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -789,6 +787,9 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #323130;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: inset 0 0 0 1px !important;
+          box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #edebe9;

package/styles/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);
@@ -1345,6 +1345,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
+.e-bigger .e-image-editor .e-dropdown-btn.e-ie-ddb-popup,
+.e-image-editor.e-bigger .e-dropdown-btn.e-ie-ddb-popup {
+  padding-left: 16px;
+}
+
 .e-image-editor {
   border: 1px solid var(--color-sf-border-light);
   position: relative;
@@ -1514,6 +1519,13 @@
   margin-left: calc(50% - 137px);
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-dropdown-btn.e-ie-ddb-popup {
+  padding-left: 14px;
+}
+.e-image-editor .e-dropdown-btn, .e-image-editor .e-dropdown-btn span {
+  font-weight: normal;
+}
+
 .e-ie-straighten-value-span,
 .e-ie-straighten-span,
 .e-ie-toolbar-straighten {
@@ -1807,8 +1819,6 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: var(--color-sf-content-bg-color-alt1);
-  color: var(--color-sf-icon-color);
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -1825,6 +1835,10 @@
           box-shadow: none;
   color: var(--color-sf-secondary-text-color-hover);
 }
+.e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important;
+          box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: var(--color-sf-secondary-bg-color-pressed);
   -webkit-box-shadow: none;

package/styles/highcontrast-light.css

@@ -755,8 +755,7 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #fff;
-  color: #000;
+  border: 2px solid #000;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -772,6 +771,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #000;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #400074;

package/styles/highcontrast.css

@@ -764,8 +764,7 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #000;
-  color: #fff;
+  border: 2px solid #000;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -781,6 +780,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #ffd939;

package/styles/image-editor/_layout.scss

@@ -185,6 +185,12 @@
         margin-top: 5px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
+
+    @if $skin-name == 'fluent2' {
+      & .e-dropdown-btn.e-ie-ddb-popup {
+        padding-left: 16px;
+      }
+    }
   }
   
   .e-image-editor {
@@ -491,6 +497,16 @@
         width: 16px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
+
+    @if $skin-name == 'fluent2' {
+      & .e-dropdown-btn.e-ie-ddb-popup {
+        padding-left: 14px;
+      }
+      & .e-dropdown-btn,
+      & .e-dropdown-btn span {
+        font-weight: normal;
+      }
+    }
   }
   
   .e-ie-img-save-dlg .e-btn {

package/styles/image-editor/_theme.scss

@@ -36,10 +36,13 @@
           background: inherit;
           border: none;
           margin-top: $image-editor-ddbtn-margin-top;
-          @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' $skin-name == 'bootstrap5-dark' {
+          @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
             background: $tbar-default-bg;
             color: $tbar-default-icon-color;
           }
+          @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+            border: 2px solid #000;
+          }
           @if $skin-name == 'Material3' {
             box-shadow: none;
           }
@@ -58,6 +61,36 @@
             background: $btn-focus-bgcolor;
             box-shadow: none;
             color: $btn-focus-color;
+            @if $skin-name == 'FluentUI' {
+              outline: none !important; /* stylelint-disable-line declaration-no-important */
+              box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
+              outline: none !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+              outline: none !important; /* stylelint-disable-line declaration-no-important */
+              border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'bootstrap4' {
+              $color-rgba: rgba(mix(lighten($btn-focus-bgcolor, 50%), $btn-focus-border-color, 15%), .5);
+              box-shadow: 0 0 0 .25em $color-rgba !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'bootstrap5' {
+              box-shadow: $secondary-shadow-focus !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'Material3' {
+              box-shadow: $shadow-focus-ring1 !important; /* stylelint-disable-line declaration-no-important */
+            }
+            @else if $skin-name == 'tailwind' {
+              box-shadow: 0 0 0 1px #4f46e5 !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+
+          &:focus-visible {
+            @if $skin-name == 'fluent2' {
+              box-shadow: $keyboard-focus !important; /* stylelint-disable-line declaration-no-important */
+            }
           }
 
           &:active {

package/styles/image-editor/bootstrap-dark.css

@@ -757,8 +757,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #131313;
-  color: #f0f0f0;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/bootstrap.css

@@ -759,8 +759,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #f8f8f8;
-  color: #333;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/bootstrap4.css

@@ -770,6 +770,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important;
+          box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #545b62;

package/styles/image-editor/bootstrap5-dark.css

@@ -787,6 +787,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #565e64;

package/styles/image-editor/bootstrap5.css

@@ -787,6 +787,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #565e64;

package/styles/image-editor/fabric-dark.css

@@ -759,8 +759,6 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #333232;
-  color: #dadada;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -776,6 +774,7 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #6f6c6c;

package/styles/image-editor/fabric.css

@@ -762,8 +762,6 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #fff;
-  color: #333;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -779,6 +777,7 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #333;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #c8c8c8;

package/styles/image-editor/fluent-dark.css

@@ -772,8 +772,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #252423;
-  color: #a19f9d;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -789,6 +787,9 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: inset 0 0 0 1px !important;
+          box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #292827;