@carbon/charts-vue 0.51.1 → 0.52.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.52.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.51.4...v0.52.0) (2021-11-18)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.51.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.51.3...v0.51.4) (2021-11-16)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.51.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.51.2...v0.51.3) (2021-11-03)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.51.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.51.1...v0.51.2) (2021-11-02)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
 ## [0.51.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.51.0...v0.51.1) (2021-11-02)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/charts-vue.common.js

@@ -18240,11 +18240,25 @@ var legend_Legend = /** @class */ (function (_super) {
                 hoveredElement: hoveredItem,
             });
         });
-        svg.selectAll('div.legend-item div.checkbox').on('keyup', function (event, d) {
-            if (event.key && (event.key === 'Enter' || event.key === ' ')) {
+        svg.selectAll('div.legend-item div.checkbox').on('keyup', function (event) {
+            if (event.key && event.key === 'Tab') {
+                // Higlight group
+                self.services.events.dispatchEvent(Events.Legend.ITEM_HOVER, {
+                    hoveredElement: src_select(this),
+                });
+            }
+        });
+        svg.selectAll('div.legend-item div.checkbox').on('keydown', function (event, d) {
+            if (event.key && event.key === ' ') {
                 event.preventDefault();
                 self.model.toggleDataLabel(d.name);
             }
+            else if (event.key && event.key === 'Tab') {
+                // Unhiglight group
+                self.services.events.dispatchEvent(Events.Legend.ITEM_MOUSEOUT, {
+                    hoveredElement: src_select(this),
+                });
+            }
         });
         svg.selectAll('g.additional-item').on('mouseover', function (event) {
             var hoveredItem = src_select(this);
@@ -35380,8 +35394,9 @@ var axis_Axis = /** @class */ (function (_super) {
                     var mockTextPiece = invisibleAxisRef
                         .append('text')
                         .text('A');
-                    var averageLetterWidth_1 = mockTextPiece.node().getBBox()
-                        .width;
+                    var averageLetterWidth_1 = dom_utils_DOMUtils.getSVGElementSize(mockTextPiece.node(), {
+                        useBBox: true,
+                    }).width;
                     var lastStartPosition_1;
                     // Find out whether any text nodes roughly collide
                     invisibleAxisRef.selectAll('g.tick').each(function () {
@@ -38556,6 +38571,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                 .append('div')
                 .attr('class', 'toolbar-control bx--overflow-menu')
                 .attr('role', 'button');
+            var self_1 = this;
             var allToolbarControls = enteringToolbarControls
                 .merge(toolbarControls)
                 .classed('disabled', function (d) {
@@ -38566,16 +38582,23 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             })
                 .attr('aria-label', function (d) { return d.title; })
                 .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"" + _this.services.domUtils.generateElementIDString("control-" + d.id) + "\" aria-label=\"" + d.title + "\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: " + (d.iconWidth !== undefined ? d.iconWidth : '20px') + "; height: " + (d.iconWidth !== undefined ? d.iconHeight : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVGContent + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
-                .each(function (d) {
+                .each(function (d, index) {
                 src_select(this)
                     .select('button')
                     .on('click', !d.shouldBeDisabled() ? d.clickFunction : null)
-                    .on('keyup', function (event) {
+                    .on('keydown', function (event) {
                     if ((event.key && event.key === 'Enter') ||
                         event.key === ' ') {
                         event.preventDefault();
                         d.clickFunction();
                     }
+                    else if (event.key && event.key === 'ArrowLeft') {
+                        self_1.focusOnPreviousEnabledToolbarItem(index);
+                    }
+                    else if (event.key &&
+                        event.key === 'ArrowRight') {
+                        self_1.focusOnNextEnabledToolbarItem(index);
+                    }
                 });
             });
             this.overflowButton = this.getComponentContainer().select("button.bx--overflow-menu__trigger#" + this.services.domUtils.generateElementIDString('control-toolbar-overflow-menu'));
@@ -38629,6 +38652,43 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             this.services.events.dispatchEvent(Events.Toolbar.HIDE_OVERFLOW_MENU);
         }
     };
+    // Toolbar controllers
+    Toolbar.prototype.focusOnPreviousEnabledToolbarItem = function (currentItemIndex) {
+        var buttonList = this.getToolbarButtonItems();
+        var previousItemIndex = buttonList.length;
+        for (var i = currentItemIndex - 1; i >= 0; i--) {
+            var previousButtonItem = buttonList[i];
+            if (!previousButtonItem.shouldBeDisabled()) {
+                previousItemIndex = i;
+                break;
+            }
+        }
+        // only if previous enabled menu item found
+        if (previousItemIndex < buttonList.length) {
+            var previousItemNode = src_select("button#" + this.services.domUtils.generateElementIDString("control-" + buttonList[previousItemIndex].id)).node();
+            if ('focus' in previousItemNode) {
+                previousItemNode.focus();
+            }
+        }
+    };
+    Toolbar.prototype.focusOnNextEnabledToolbarItem = function (currentItemIndex) {
+        var buttonList = this.getToolbarButtonItems();
+        var nextItemIndex = -1;
+        for (var i = currentItemIndex + 1; i < buttonList.length; i++) {
+            var nextOverflowMenuItem = buttonList[i];
+            if (!nextOverflowMenuItem.shouldBeDisabled()) {
+                nextItemIndex = i;
+                break;
+            }
+        }
+        // only if next enabled menu item found
+        if (nextItemIndex > -1) {
+            var nextItemNode = src_select("button#" + this.services.domUtils.generateElementIDString("control-" + buttonList[nextItemIndex].id)).node();
+            if ('focus' in nextItemNode) {
+                nextItemNode.focus();
+            }
+        }
+    };
     Toolbar.prototype.focusOnPreviousEnabledMenuItem = function (currentItemIndex) {
         var overflowMenuItems = this.getOverflowMenuItems();
         var previousItemIndex = overflowMenuItems.length;
@@ -38675,7 +38735,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             // show overflow menu
             this.updateOverflowMenu(true);
             // setup overflow menu item event listener
-            var self_1 = this;
+            var self_2 = this;
             var overflowMenuItems = this.getOverflowMenuItems();
             overflowMenuItems.forEach(function (menuItem, index) {
                 var element = src_select("#" + _this.services.domUtils.generateElementIDString("control-" + menuItem.id));
@@ -38684,29 +38744,37 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                         // call the specified function
                         menuItem.clickFunction();
                         // hide overflow menu
-                        self_1.updateOverflowMenu(false);
+                        self_2.updateOverflowMenu(false);
                     });
-                    element.on('keyup', function () {
-                        if (event.key === 'Enter') {
+                    element.on('keydown', function (keyEvent) {
+                        if (keyEvent && keyEvent.key === 'Enter') {
                             // call the specified function
                             menuItem.clickFunction();
                         }
-                        else if (event.key === 'ArrowUp') {
+                        else if (keyEvent && keyEvent.key === 'ArrowUp') {
                             // focus on previous menu item
-                            self_1.focusOnPreviousEnabledMenuItem(index);
+                            self_2.focusOnPreviousEnabledMenuItem(index);
                         }
-                        else if (event.key === 'ArrowDown') {
+                        else if (keyEvent && keyEvent.key === 'ArrowDown') {
                             // focus on next menu item
-                            self_1.focusOnNextEnabledMenuItem(index);
+                            self_2.focusOnNextEnabledMenuItem(index);
+                        }
+                        else if (keyEvent && keyEvent.key === 'Escape') {
+                            self_2.updateOverflowMenu(false);
                         }
                         // Not hide overflow menu by keyboard arrow up/down event
+                        // Prevent page from scrolling up/down
+                        keyEvent.preventDefault();
                     });
                 }
             });
             // default to focus on the first enabled menu item
-            self_1.focusOnNextEnabledMenuItem(-1);
+            self_2.focusOnNextEnabledMenuItem(-1);
+        }
+        // propogation should not be stopped for keyboard events
+        if (!!event) {
+            event.stopImmediatePropagation();
         }
-        event.stopImmediatePropagation();
     };
     Toolbar.prototype.getControlConfigs = function () {
         var _this = this;
@@ -38739,6 +38807,16 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             overflowMenuItemList: controlList.concat(overflowSpecificControls),
         };
     };
+    Toolbar.prototype.getToolbarButtonItems = function () {
+        var _a = this.getControlConfigs(), buttonList = _a.buttonList, overflowMenuItemList = _a.overflowMenuItemList;
+        if (!!overflowMenuItemList) {
+            buttonList.push(this.getOverflowButtonConfig());
+        }
+        if (!!buttonList) {
+            return buttonList;
+        }
+        return [];
+    };
     Toolbar.prototype.getOverflowMenuItems = function () {
         var overflowMenuItemList = this.getControlConfigs().overflowMenuItemList;
         if (!!overflowMenuItemList) {