v8: Ensure all other elements can't be focused while infinite editing is active (Focus/Tab lock)

src/Umbraco.Core/Models/PublishedContent/PublishedContentType.cs

@@ -105,13 +105,13 @@ private void EnsureMemberProperties(List<IPublishedPropertyType> propertyTypes,
             { "Email", Constants.DataTypes.Textbox },
             { "Username", Constants.DataTypes.Textbox },
             { "PasswordQuestion", Constants.DataTypes.Textbox },
-            { "Comments", Constants.DataTypes.Textbox },
+            { "Comments", Constants.DataTypes.Textarea },
             { "IsApproved", Constants.DataTypes.Boolean },
             { "IsLockedOut", Constants.DataTypes.Boolean },
-            { "LastLockoutDate", Constants.DataTypes.DateTime },
-            { "CreateDate", Constants.DataTypes.DateTime },
-            { "LastLoginDate", Constants.DataTypes.DateTime },
-            { "LastPasswordChangeDate", Constants.DataTypes.DateTime },
+            { "LastLockoutDate", Constants.DataTypes.LabelDateTime },
+            { "CreateDate", Constants.DataTypes.LabelDateTime },
+            { "LastLoginDate", Constants.DataTypes.LabelDateTime },
+            { "LastPasswordChangeDate", Constants.DataTypes.LabelDateTime }
         };
 
         #region Content type

src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js

@@ -237,6 +237,14 @@ function dependencies() {
             "name": "underscore",
             "src":  ["node_modules/underscore/underscore-min.js"],
             "base": "./node_modules/underscore"
+        },
+        {
+            "name": "wicg-inert",
+            "src": [
+                "./node_modules/wicg-inert/dist/inert.min.js",
+                "./node_modules/wicg-inert/dist/inert.min.js.map"
+            ],
+            "base": "./node_modules/wicg-inert"
         }
     ];
 

src/Umbraco.Web.UI.Client/package.json

@@ -1,85 +1,86 @@
-{
-  "private": true,
-  "scripts": {
-    "test": "gulp runTests",
-    "unit": "gulp testUnit",
-    "e2e": "gulp testE2e",
-    "build": "gulp build",
-    "dev": "gulp dev",
-    "fastdev": "gulp fastdev",
-    "watch": "gulp watch"
-  },
-  "dependencies": {
-    "ace-builds": "1.4.2",
-    "angular": "1.7.9",
-    "angular-animate": "1.7.5",
-    "angular-aria": "1.7.9",
-    "angular-chart.js": "^1.1.1",
-    "angular-cookies": "1.7.5",
-    "angular-dynamic-locale": "0.1.37",
-    "angular-i18n": "1.7.5",
-    "angular-local-storage": "0.7.1",
-    "angular-messages": "1.7.5",
-    "angular-mocks": "1.7.5",
-    "angular-route": "1.7.5",
-    "angular-sanitize": "1.7.5",
-    "angular-touch": "1.7.5",
-    "angular-ui-sortable": "0.19.0",
-    "animejs": "2.2.0",
-    "bootstrap-social": "5.1.1",
-    "chart.js": "^2.8.0",
-    "clipboard": "2.0.4",
-    "diff": "3.5.0",
-    "flatpickr": "4.5.2",
-    "font-awesome": "4.7.0",
-    "jquery": "^3.4.1",
-    "jquery-ui-dist": "1.12.1",
-    "jquery-ui-touch-punch": "0.2.3",
-    "lazyload-js": "1.0.0",
-    "moment": "2.22.2",
-    "ng-file-upload": "12.2.13",
-    "nouislider": "14.1.1",
-    "npm": "6.13.6",
-    "signalr": "2.4.0",
-    "spectrum-colorpicker": "1.8.0",
-    "tinymce": "4.9.7",
-    "typeahead.js": "0.11.1",
-    "underscore": "1.9.1"
-  },
-  "devDependencies": {
-    "@babel/core": "7.6.4",
-    "@babel/preset-env": "7.6.3",
-    "autoprefixer": "9.6.5",
-    "caniuse-lite": "^1.0.30001037",
-    "cssnano": "4.1.10",
-    "fs": "0.0.2",
-    "gulp": "4.0.2",
-    "gulp-angular-embed-templates": "^2.3.0",
-    "gulp-babel": "8.0.0",
-    "gulp-clean-css": "4.2.0",
-    "gulp-cli": "^2.2.0",
-    "gulp-concat": "2.6.1",
-    "gulp-eslint": "6.0.0",
-    "gulp-imagemin": "6.1.1",
-    "gulp-less": "4.0.1",
-    "gulp-notify": "^3.0.0",
-    "gulp-postcss": "8.0.0",
-    "gulp-rename": "1.4.0",
-    "gulp-sort": "2.0.0",
-    "gulp-sourcemaps": "^2.6.5",
-    "gulp-watch": "5.0.1",
-    "gulp-wrap": "0.15.0",
-    "gulp-wrap-js": "0.4.1",
-    "jasmine-core": "3.5.0",
-    "karma": "4.4.1",
-    "karma-jasmine": "2.0.1",
-    "karma-junit-reporter": "2.0.1",
-    "karma-phantomjs-launcher": "1.0.4",
-    "karma-spec-reporter": "0.0.32",
-    "less": "3.10.3",
-    "lodash": "4.17.15",
-    "marked": "^0.7.0",
-    "merge-stream": "2.0.0",
-    "run-sequence": "2.2.1"
-  }
-}
+{
+  "private": true,
+  "scripts": {
+    "test": "gulp runTests",
+    "unit": "gulp testUnit",
+    "e2e": "gulp testE2e",
+    "build": "gulp build",
+    "dev": "gulp dev",
+    "fastdev": "gulp fastdev",
+    "watch": "gulp watch"
+  },
+  "dependencies": {
+    "ace-builds": "1.4.2",
+    "angular": "1.7.9",
+    "angular-animate": "1.7.5",
+    "angular-aria": "1.7.9",
+    "angular-chart.js": "^1.1.1",
+    "angular-cookies": "1.7.5",
+    "angular-dynamic-locale": "0.1.37",
+    "angular-i18n": "1.7.5",
+    "angular-local-storage": "0.7.1",
+    "angular-messages": "1.7.5",
+    "angular-mocks": "1.7.5",
+    "angular-route": "1.7.5",
+    "angular-sanitize": "1.7.5",
+    "angular-touch": "1.7.5",
+    "angular-ui-sortable": "0.19.0",
+    "animejs": "2.2.0",
+    "bootstrap-social": "5.1.1",
+    "chart.js": "^2.8.0",
+    "clipboard": "2.0.4",
+    "diff": "3.5.0",
+    "flatpickr": "4.5.2",
+    "font-awesome": "4.7.0",
+    "jquery": "^3.4.1",
+    "jquery-ui-dist": "1.12.1",
+    "jquery-ui-touch-punch": "0.2.3",
+    "lazyload-js": "1.0.0",
+    "moment": "2.22.2",
+    "ng-file-upload": "12.2.13",
+    "nouislider": "14.1.1",
+    "npm": "6.13.6",
+    "signalr": "2.4.0",
+    "spectrum-colorpicker": "1.8.0",
+    "tinymce": "4.9.7",
+    "typeahead.js": "0.11.1",
+    "underscore": "1.9.1",
+    "wicg-inert": "^2.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.6.4",
+    "@babel/preset-env": "7.6.3",
+    "autoprefixer": "9.6.5",
+    "caniuse-lite": "^1.0.30001037",
+    "cssnano": "4.1.10",
+    "fs": "0.0.2",
+    "gulp": "4.0.2",
+    "gulp-angular-embed-templates": "^2.3.0",
+    "gulp-babel": "8.0.0",
+    "gulp-clean-css": "4.2.0",
+    "gulp-cli": "^2.2.0",
+    "gulp-concat": "2.6.1",
+    "gulp-eslint": "6.0.0",
+    "gulp-imagemin": "6.1.1",
+    "gulp-less": "4.0.1",
+    "gulp-notify": "^3.0.0",
+    "gulp-postcss": "8.0.0",
+    "gulp-rename": "1.4.0",
+    "gulp-sort": "2.0.0",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-watch": "5.0.1",
+    "gulp-wrap": "0.15.0",
+    "gulp-wrap-js": "0.4.1",
+    "jasmine-core": "3.5.0",
+    "karma": "4.4.1",
+    "karma-jasmine": "2.0.1",
+    "karma-junit-reporter": "2.0.1",
+    "karma-phantomjs-launcher": "1.0.4",
+    "karma-spec-reporter": "0.0.32",
+    "less": "3.10.3",
+    "lodash": "4.17.15",
+    "marked": "^0.7.0",
+    "merge-stream": "2.0.0",
+    "run-sequence": "2.2.1"
+  }
+}

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js

@@ -1,89 +1,87 @@
 (function () {
     'use strict';
 
-    function EditorsDirective($timeout, eventsService) {
+    function EditorsDirective($timeout, eventsService, focusLockService) {
 
         function link(scope, el, attr, ctrl) {
 
             var evts = [];
             var allowedNumberOfVisibleEditors = 3;
-            
+
             scope.editors = [];
-            
+
             function addEditor(editor) {
-
                 editor.inFront = true;
                 editor.moveRight = true;
                 editor.level = 0;
                 editor.styleIndex = 0;
-                                
+
                 // push the new editor to the dom
                 scope.editors.push(editor);
-                
+
                 $timeout(() => {
                     editor.moveRight = false;
                 })
-                
+
                 editor.animating = true;
                 setTimeout(revealEditorContent.bind(this, editor), 400);
-
-                updateEditors();
 
+                updateEditors();
             }
-            
+
             function removeEditor(editor) {
-
                 editor.moveRight = true;
-                
+
                 editor.animating = true;
                 setTimeout(removeEditorFromDOM.bind(this, editor), 400);
-                
+
                 updateEditors(-1);
-
             }
-            
+
             function revealEditorContent(editor) {
-                
+
                 editor.animating = false;
-                
+
                 scope.$digest();
-
+
+                focusLockService.addInfiniteFocusLock(el, scope.editors.length);
+
             }
-            
+
             function removeEditorFromDOM(editor) {
-                
+
                 // push the new editor to the dom
                 var index = scope.editors.indexOf(editor);
                 if (index !== -1) {
                     scope.editors.splice(index, 1);
                 }
-                
+
                 updateEditors();
-                
+
                 scope.$digest();
-
+
+                focusLockService.removeInfiniteFocusLock(el, scope.editors.length);
             }
-            
+
             /** update layer positions. With ability to offset positions, needed for when an item is moving out, then we dont want it to influence positions */
             function updateEditors(offset) {
-
                 offset = offset || 0;// fallback value.
-                
+
                 var len = scope.editors.length;
                 var calcLen = len + offset;
                 var ceiling = Math.min(calcLen, allowedNumberOfVisibleEditors);
                 var origin = Math.max(calcLen-1, 0)-ceiling;
                 var i = 0;
+
                 while(i<len) {
                     var iEditor = scope.editors[i];
                     iEditor.styleIndex = Math.min(i+1, allowedNumberOfVisibleEditors);
                     iEditor.level = Math.max(i-origin, -1);
                     iEditor.inFront = iEditor.level >= ceiling;
                     i++;
                 }
-
             }
-            
+
             evts.push(eventsService.on("appState.editors.open", function (name, args) {
                 addEditor(args.editor);
             }));