some accessibility improvements

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js

@@ -40,7 +40,15 @@
         var vm = this;
 
         vm.loading = true;
-        vm.moveFocusToBlock = null;
+        vm.currentBlockInFocus = null;
+        vm.setBlockFocus = function(block) {
+            console.log("setBlockFocus", block.label)
+            if(vm.currentBlockInFocus !== null) {
+                vm.currentBlockInFocus.focus = false;
+            }
+            vm.currentBlockInFocus = block;
+            block.focus = true;
+        }
         vm.showCopy = clipboardService.isSupported();
 
         var layout = [];// The layout object specific to this Block Editor, will be a direct reference from Property Model.
@@ -174,7 +182,7 @@
             vm.blocks.splice(index, 0, blockModel);
             
             // lets move focus to this new block.
-            vm.moveFocusToBlock = blockModel;
+            vm.setBlockFocus(blockModel);
 
             return true;
 
@@ -206,6 +214,8 @@
 
         function editBlock(blockModel, openSettings) {
 
+            blockModel.active = true;
+
             // make a clone to avoid editing model directly.
             var blockContentClone = Utilities.copy(blockModel.content);
             var blockSettingsClone = null;
@@ -228,9 +238,10 @@
                     
                     blockModel.retriveValuesFrom(blockEditorModel.content, blockEditorModel.settings)
 
-                    editorService.close();
+                    blockEditorModel.close();
                 },
                 close: function() {
+                    blockModel.active = false;
                     editorService.close();
                 }
             };
@@ -280,13 +291,18 @@
                     }
                     
                     if(!(mouseEvent.ctrlKey || mouseEvent.metaKey)) {
-                        blockPickerModel.close();
+                        editorService.close();
                         if (added && vm.model.config.useInlineEditingAsDefault !== true && vm.blocks.length > createIndex) {
                             editBlock(vm.blocks[createIndex]);
                         }
                     }
                 },
                 close: function() {
+                    // if opned by a inline creator button(index less than length), we want to move the focus away, to hide line-creator.
+                    if (createIndex < vm.blocks.length) {
+                        vm.setBlockFocus(vm.blocks[Math.max(createIndex-1, 0)]);
+                    }
+
                     editorService.close();
                 }
             };
@@ -382,7 +398,7 @@
             // insert block model at the decired location in blocks.
             vm.blocks.splice(index, 0, blockModel);
             
-            vm.moveFocusToBlock = blockModel;
+            vm.currentBlockInFocus = blockModel;
 
             return true;
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less

@@ -42,6 +42,7 @@
     padding-left: 5px;
     padding-right: 5px;
     .action {
+        position: relative;
         display: inline-block;
         color: @ui-action-discreet-type;
         font-size: 18px;
@@ -137,6 +138,7 @@
     }
 }
 .umb-block-list__create-button {
+    position: relative;
     display: flex;
     width: 100%;
     align-items: center;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html

@@ -1,5 +1,5 @@
 <div class="blockelement-inlineblock-editor" ng-controller="Umbraco.PropertyEditors.BlockEditor.InlineBlockEditor as vm">
-    <button type="button" class="btn-reset umb-outline blockelement__draggable-element" ng-click="vm.openBlock(block)">
+    <button type="button" class="btn-reset umb-outline blockelement__draggable-element" ng-click="vm.openBlock(block)" ng-focus="block.focus">
         <span class="caret"></span>
         <i class="icon {{block.content.icon}}"></i>
         <span>{{block.label}}</span>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html

@@ -1,4 +1,4 @@
-<button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element" ng-click="api.editBlock(block)">
+<button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element" ng-click="api.editBlock(block)" ng-focus="block.focus" ng-class="{'--active':block.active}">
     <i class="icon {{block.content.icon}}"></i>
     <span>{{block.label}}</span>
 </button>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less

@@ -1,5 +1,6 @@
 .blockelement-labelblock-editor {
 
+    position: relative;
     display: block;
     margin-bottom: 4px;
     margin-top: 4px;
@@ -34,4 +35,10 @@
         color: @ui-action-discreet-type-hover;
         border-color: @gray-8;
     }
+
+    &.--active {
+        color: @ui-active-type;
+        border-color: @ui-active;
+        background-color: @ui-active;
+    }
 }