feat: Allow visiting and activating icons via keyboard navigation. (#532)

* feat: Support activating focused icons.

* fix: Add a focus indicator to icons.

Author: gonfunko

src/actions/enter.ts

@@ -15,6 +15,7 @@ import {
   RenderedConnection,
   WorkspaceSvg,
   Field,
+  icons,
   FocusableTreeTraverser,
 } from 'blockly/core';
 
@@ -107,6 +108,8 @@ export class EnterAction {
       curNode instanceof WorkspaceSvg
     ) {
       this.navigation.openToolboxOrFlyout(workspace);
+    } else if (curNode instanceof icons.Icon) {
+      curNode.onClick();
     }
   }
 

test/index.html

@@ -104,7 +104,10 @@
         .blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath),
       .blocklyKeyboardNavigation
         .blocklyActiveFocus.blocklyField
-        > .blocklyFieldRect {
+        > .blocklyFieldRect,
+      .blocklyKeyboardNavigation
+        .blocklyActiveFocus.blocklyIconGroup
+        > .blocklyIconShape:first-child {
         stroke: var(--blockly-active-node-color);
         stroke-width: var(--blockly-selection-width);
       }
@@ -115,7 +118,10 @@
         ),
       .blocklyKeyboardNavigation
         .blocklyPassiveFocus.blocklyField
-        > .blocklyFieldRect {
+        > .blocklyFieldRect,
+      .blocklyKeyboardNavigation
+        .blocklyPassiveFocus.blocklyIconGroup
+        > .blocklyIconShape:first-child {
         stroke: var(--blockly-active-node-color);
         stroke-dasharray: 5px 3px;
         stroke-width: var(--blockly-selection-width);