Keyboard navigation. Custom events instead of jQuery.

css/builder.css

@@ -63,22 +63,22 @@
     cursor: default;
   }
 }
-.js-lpb-component[data-focus="true"] {
+.js-lpb-component[data-active="true"] {
   outline: var(--lp-focus-outline-width) solid var(--lp-focus-outline-color);
   &:hover {
     cursor: grab;
   }
 }
-.js-lpb-component[data-focus="true"] .js-lpb-region {
+.js-lpb-component[data-active="true"] .js-lpb-region {
   outline: 1px dotted blue;
 }
-.js-lpb-component[data-focus="true"] .js-lpb-component:not([data-focus="true"]) .js-lpb-region {
+.js-lpb-component[data-active="true"] .js-lpb-component:not([data-active="true"]) .js-lpb-region {
   outline: none;
 }
 .lp-builder.is-dragging .js-lpb-region,
 .lp-builder.is-navigating .js-lpb-region,
 .lp-builder.is-dragging .js-lpb-component,
-.lp-builder.is-navigating .js-lpb-component:not([data-focus="true"]) {
+.lp-builder.is-navigating .js-lpb-component:not([data-active="true"]) {
   outline: 1px dotted blue;
 }
 
@@ -86,20 +86,19 @@
 .js-lpb-ui {
   transition: opacity .25s linear;
 }
-.js-lpb-component:not([data-focus="true"]) .js-lpb-ui,
-.js-lpb-component[data-focus="true"] .js-lpb-component:not([data-focus="true"]) .js-lpb-ui {
-  visibility: hidden;
-}
-.js-lpb-component[data-focus="true"]:not(.is-dragging) .js-lpb-ui {
-  visibility: visible;
+.js-lpb-component:not([data-active="true"]) .js-lpb-ui,
+.js-lpb-component[data-active="true"] .js-lpb-component:not([data-active="true"]) .lpb-controls {
+  opacity: 0;
 }
-.js-lpb-component[data-focus="true"]:not(.is-dragging) .lpb-controls {
+.js-lpb-component[data-active="true"]:not(.is-dragging) .lpb-controls {
   opacity: 1;
 }
-.js-lpb-component[data-focus="true"]:not(.is-dragging):hover > .js-lpb-ui {
+.js-lpb-component[data-active="true"]:not(.is-dragging):hover > .lpb-btn--add,
+.js-lpb-component[data-active="true"]:not(.is-dragging) > .lpb-btn--add:focus {
   opacity: 1;
 }
-.js-lpb-component[data-focus="true"] .js-lpb-region:hover > .js-lpb-ui {
+.js-lpb-component[data-active="true"] .js-lpb-region:hover > .lpb-btn--add,
+.js-lpb-component[data-active="true"] .js-lpb-region > .lpb-btn--add:focus {
   opacity: 1;
 }
 

layout_paragraphs.module

@@ -150,20 +150,6 @@ function layout_paragraphs_preprocess_layout_paragraphs_builder_controls(&$varia
   $id = Html::getUniqueId('lpb-controls');
 
   $variables['controls'] += [
-    'drag_handle' => [
-      '#type' => 'link',
-      '#title' => t('Drag'),
-      '#url' => Url::fromUri('internal:#move'),
-      '#attributes' => [
-        'class' => [
-          'lpb-drag',
-          'lpb-tooltip--hover',
-          'lpb-tooltip--focus',
-        ],
-        'aria-describedby' => $id . '--tip',
-      ],
-      '#weight' => 10,
-    ],
     'nav_tooltip' => [
       '#type' => 'html_tag',
       '#tag' => 'span',