v13.32.0

Minor Release v13.32.0

Build

#2659 Import @ibm/plex fonts using @use AND

#2603 Replace @import with @use/@forward in elyra-canvas

In Sass, @import is now deprecated.
https://sass-lang.com/blog/import-is-deprecated/

To get ahead of the curve, Elyra Canvas has been converted to use @use or @forward instead of @import.

Consequently, to prepare for @import being removed from Sass, there is a new recommended way to pull IBM Plex fonts into Elyra Canvas, which is documented here:
https://elyra-ai.github.io/canvas/02-set-up/#loading-fonts

If you want to do a similar conversion on your application's SCSS, this article is very useful to understand how to use @use/@forward
http://mr-alien.medium.com/use-forward-in-sass-70b9cd44218b.

And this is the official documentation on @use and @forward.

Common Canvas

#2657 Keyboard accessibility: ports should be focusable

In this release, the user can navigate focus highlighting to the node's individual elements (sub-objects) such as input ports and output ports. To enable this behavior, the application must set one of these two node layout properties to true in the canvas configuration object.

    const config = {
        enableNodeLayout: {
            inputPortFocusable: false,
            outputPortFocusable: true
       }
    };

When enabled, if the user moves focus to a node and then presses Option + Tab the focus will be moved to the first focusable port. The user can then press Tab to move focus around the different ports. This will move the focus in a loop around the ports.

The user can click Shift + Tab to move the focus in the opposite direction. The user can press the Return key if they want to activate a port which is the equivalent of clicking on the port with the mouse/trackpad. The user can press the Esc key to escape from the tabbing behavior of the sub-objects and move the focus back to the node.

See keyboard support docs

#2662 Enable sub-object navigation with an embedded React object (for Prompt sample application)

A number of changes have been made in this release to enable keyboard navigation when the node contents are provided by a React object. An accessibility page has been added to the documentation that explains the steps that need to be implemented in the React object to make keyboard navigation work consistently.

To support this, the following functions have been added to the canvas controller:

// Sets the focus function for the node identified by the node ID passed in.
// The focus function will be function on a React object which is used to
// display the contents of the node. The focus function will be called when the
// user presses shortcuts to move the focus highlighting to the node's sub-objects.
setSubObjectFocusFunction(nodeId, focusFunction, pipelineId);

// Sets focus on the next sub-object in the object provided.
setFocusNextSubObject(parentObj, evt);

// Sets focus on the previous sub-object in the object provided.
setFocusPreviousSubObject(parentObj, evt);

Additionally, the Common Canvas Palette object has been extended to take a new prop called tabOutOfPalette. This is a callback function which the palette will call when the user presses Tab on the bottom-most object in the palette: this can be different depending on whether the user has entered a search string or not into the palette's search field.

These functions are used in the Prompt sample application's prompt-react-node.jsx.

#2636 When comment is moved, move any nodes positioned inside it

A new experimental feature has been added in this release. It can be switched on by setting the enableMoveNodesInComment config property to true. When set to true if a comment is positioned under one or more nodes, when the comment is moved the nodes will move with it. You can play with it in the test harness as shown below. Please provide feedback on this feature. Thanks!

Common Properties

Bug fixes only.

Issues Resolved

• #2636 When comment is moved, move any nodes positioned i… by @tomlyn in #2648
• #2642 Adjust build script to deploy test-harness cloud by @srikant-ch5 in #2643
• #2649 Table toolbar looks odd for Cancel Text - small flyout by @veenas1 in #2650
• #2651 Custom ctrl paramDef fails to open in test harness by @srikant-ch5 in #2652
• #2603 Replace @import with @use/@forward in elyra-canvas by @nmgokhale in #2604
• #2655 Prevent header click while resizing column by @nmgokhale in #2656
• #2659 Import @ibm/plex fonts using @use by @nmgokhale in #2660
• #2657 Keyboard accessibility: ports should be focusable by @tomlyn in #2658
• #2666 Tabbing to a new group of nodes does not call zoomToReveal when… by @tomlyn in #2667
• #2664 Select all in table should not select checkboxes that are hidden or disabled by @caritaou in #2665
• #2668 After entering multiline comments, position of the comment box … by @Jerinjk14 in #2669
• #2662 Enable sub-object navigation with an embedded React object (for… by @tomlyn in #2663

Full Changelog: v13.31.0...v13.32.0