@sapui5/sap.viz 1.139.0 → 1.141.0

package/src/sap/viz/libs/sap-viz-info-charts.js

@@ -1688,6 +1688,7 @@ define('sap/viz/chart/components/util/TextUtils',['sap/viz/framework/common/util
     });
 
 define('sap/viz/chart/components/title/Title',[
+    'sap/viz/framework/common/util/Constants',
     'sap/viz/framework/common/util/oo',
     'sap/viz/chart/components/UIComponent',
     'sap/viz/framework/common/lang/LangManager',
@@ -1697,7 +1698,8 @@ define('sap/viz/chart/components/title/Title',[
     'sap/viz/framework/common/util/UADetector',
     'sap/viz/framework/common/util/PropertyZoneUtil',
     'sap/viz/framework/common/util/TitleUtil'
-], function(oo, UIComponent, langManager, BoundUtil, TextUtils, StyleUtils, UADetector, PropertyZoneUtil,TitleUtil) {
+], function(Constants,oo, UIComponent,langManager, BoundUtil, TextUtils,
+    StyleUtils,UADetector,PropertyZoneUtil,TitleUtil) {
 
     var Title = function(runtime, options) {
         Title.superclass.constructor.apply(this, arguments);
@@ -1938,12 +1940,20 @@ define('sap/viz/chart/components/title/Title',[
             var fill = this.runtime().effectManager().register({
                 fillColor: style.color
             });
+            /**
+             *  role="heading":
+             *  A semantic attribute that helps screen readers, 
+             *  better understand and announce the content structure.
+             *  aria-level="1" :  Indicates the heading level.
+             **/
+            var ariaLevel = parseInt(this._properties.get('ariaLevel'));
+            ariaLevel = ariaLevel > 0 ? ariaLevel : Constants.TITLE.ARIALEVEL;
             wrapper.attr('fill', fill).attr('font-family', style.fontFamily).attr('font-size', style.fontSize).attr(
                 'font-weight', style.fontWeight).attr('font-style', style.fontStyle)
                 .attr('text-anchor', textAnchor).attr('x', xPos)
                 .attr('y', 'top' == this.getPosition() ? this._pfSize.height/2 : height - this._pfSize.height/2)
-                .attr('dominant-baseline', 'central');
-
+                .attr('dominant-baseline', 'central').attr('role', 'heading').attr('aria-level', ariaLevel);
+                
             if (UADetector.isIE()) {
                 wrapper.attr('y', 'top' == this.getPosition() ? this._pfSize.height : height)
                 .attr('dominant-baseline', 'auto');
@@ -4214,6 +4224,79 @@ define('sap/viz/chart/components/util/ColorUtil',["sap/viz/framework/common/util
         return bgColor;
     };
 
+    function parseColorToRgbArray(color) {
+        if (color === null || typeof color === 'undefined') { return null; }
+        try {
+            var c = d3.rgb(String(color).trim());
+            // d3.rgb returns NaN components for invalid input; guard against that
+            if (isNaN(c.r) || isNaN(c.g) || isNaN(c.b)) { return null; }
+            return [c.r, c.g, c.b];
+        } catch (e) {
+            return null;
+        }
+    }
+
+    /**
+     * Calculates the relative luminance of an RGB color, as per WCAG 2.1.
+     * @param {number[]} rgb - An array of [R, G, B] values.
+     * @returns {number} The relative luminance value (0-1).
+     */
+    function getLuminance(rgb) {
+        var r = rgb[0];
+        var g = rgb[1];
+        var b = rgb[2];
+        // Convert RGB values from 0-255 to 0-1
+        function gammaCorrection(v) {
+            v /= 255;
+            // Apply gamma correction formula
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+        }
+
+        r = gammaCorrection(r);
+        g = gammaCorrection(g);
+        b = gammaCorrection(b);
+
+        // Calculate luminance with specified weights
+        // https://www.w3.org/WAI/GL/wiki/Relative_luminance#:~:text=Note%201:%20For%20the%20sRGB,+0.055)/1.055)%20%5E%202.4
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    }
+
+    /**
+     * Calculates the contrast ratio between two hex colors and checks if it meets a given threshold.
+     * Defaults follow WCAG guidance:
+     *  - text (normal text) minimum: 4.5
+     *  - non-text / large-text / graphics minimum: 3.0
+     *  - High contrast mode minimum: 7.0
+     * @param {string} color1 - The first hex color string (e.g., '#333333').
+     * @param {string} color2 - The second hex color string (e.g., '#F0F0F0').
+     * @param {number} [threshold=3] - The minimum contrast ratio required. Defaults to 3.
+     * @returns {{ratio: number, meetsThreshold: boolean}} An object containing the calculated ratio and a boolean.
+     */
+    ColorUtil.checkColorContrast = function (color1, color2, threshold) {
+        // keep existing behavior: if threshold not provided, fallback to 3
+        if (typeof threshold !== 'number') { threshold = 3; }
+
+        var rgbArr1 = parseColorToRgbArray(color1);
+        var rgbArr2 = parseColorToRgbArray(color2);
+        if (!rgbArr1 || !rgbArr2) {
+            return { ratio: 0, meetsThreshold: false };
+        }
+
+        var luminance1 = getLuminance(rgbArr1);
+        var luminance2 = getLuminance(rgbArr2);
+
+        var lighter = Math.max(luminance1, luminance2);
+        var darker = Math.min(luminance1, luminance2);
+        // +0.05 in WCAG for preventing division by zero. eg. black (#000000) has luminance of 0.
+        var ratio = (lighter + 0.05) / (darker + 0.05);
+        var meetsThreshold = ratio >= threshold;
+
+        return {
+            ratio: parseFloat(ratio.toFixed(2)),
+            meetsThreshold: meetsThreshold
+        };
+    };
+
     return ColorUtil;
 });
 
@@ -7163,6 +7246,7 @@ define('sap/viz/chart/components/legend/ColorLegend',[
     var HORIZONTAL_OFFSET = Constants.LEGEND.HORIZONTAL_OFFSET;
     var INTERACTION_CLASS =  Constants.CSS.CLASS.LEGENDITEM,
         ID_CLASS = "v-legend-element";
+    var MIN_ELEMENT_SIZE = Constants.MIN_INTERACTIVE_ELEMENT_SIZE;
 
     function ColorLegend(runtime, options) {
         ColorLegend.superclass.constructor.apply(this, arguments);
@@ -8134,6 +8218,8 @@ define('sap/viz/chart/components/legend/ColorLegend',[
         colorMarkerSize = colorMarkerSize && parseFloat(colorMarkerSize);
         var isHorizontal = this.isHorizontal();
         var isScrollable = this._isScrollable();
+        var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
+        var isInteractive = !this._properties.origin.get('interaction.noninteractiveMode');
         var paddingBottom = markerMargin.bottom * textHeight;
         var markerSize = this._colorLabelSize * textHeight;
         var markerWidth = this._getMarkerWidth(markerSize);
@@ -8146,6 +8232,10 @@ define('sap/viz/chart/components/legend/ColorLegend',[
             markerWidth = this._getMarkerWidth(markerSize);
             eachRowHeight = (1 + markerMargin.bottom) * colorMarkerSize;
         }
+        var isMinimumSize = eachRowHeight < MIN_ELEMENT_SIZE;
+        if(isAccEnable && isInteractive && isMinimumSize){
+            eachRowHeight = MIN_ELEMENT_SIZE;
+        }
         this._markerSize = markerSize;
 
         var textWidthLimit = cDomain.maxWidth - paddingWidth - markerWidth;
@@ -8202,6 +8292,12 @@ define('sap/viz/chart/components/legend/ColorLegend',[
         var textY = ((overallHeight - textHeight) / 2 + bottom);
         var postRenderX = markerSize / 2 + HORIZONTAL_OFFSET;
         var postRenderY = overallHeight / 2 + bottom;
+        if(isAccEnable && isInteractive && isMinimumSize){
+            bottom = (MIN_ELEMENT_SIZE - textHeight) / 2;
+            textY = bottom;
+            shapeY = eachRowHeight / 2;
+            postRenderY = eachRowHeight / 2 ;
+        }
 
         cDomain.shapeX = shapeX;
         cDomain.shapeY = shapeY;
@@ -9931,6 +10027,7 @@ return {
         "plotArea.dataPoint.stroke.color": "#000000",
         "plotArea.dataPoint.stroke.visible": false,
         "title.alignment": "center",
+        "title.ariaLevel": 2,
         "title.layout.height": null,
         "title.layout.maxHeight": 0.2,
         "title.layout.respectPlotPosition": true,
@@ -10015,6 +10112,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -10033,6 +10131,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -10243,6 +10342,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -10262,6 +10362,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -10505,6 +10606,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -10524,6 +10626,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.behavior": {
             "access": "internal",
@@ -10680,6 +10783,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -10699,6 +10803,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.behavior": {
             "access": "internal",
@@ -10940,6 +11045,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -10959,6 +11065,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -11222,6 +11329,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -11613,6 +11721,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -12066,6 +12175,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -12084,6 +12194,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -14074,6 +14185,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -14093,6 +14205,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -14274,6 +14387,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -14671,6 +14785,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -14690,6 +14805,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -15063,6 +15179,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -15082,6 +15199,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -16496,6 +16614,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -16515,6 +16634,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectByTimeAxisGroup": {
             "access": "internal",
@@ -16807,6 +16927,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -16826,6 +16947,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -17095,6 +17217,7 @@ return {
         "interaction.deselected.stroke.color": "darken(20%)",
         "interaction.deselected.stroke.visible": false,
         "interaction.deselected.stroke.width": "1px",
+        "interaction.enableAccUpdates": false,
         "interaction.enableDeselectAll": true,
         "interaction.enableInternalEvents": {
             "access": "internal",
@@ -17114,6 +17237,7 @@ return {
         "interaction.hover.stroke.width": "2px",
         "interaction.keyboard.color": "#000000",
         "interaction.keyboard.width": "1px",
+        "interaction.keyboard.style": "solid",
         "interaction.noninteractiveMode": false,
         "interaction.selectability.axisLabelSelection": true,
         "interaction.selectability.behavior": {
@@ -17914,16 +18038,22 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         if (!isTriggerable(service) || isOnFirstLastOnlyAxis(event, service)) {
             return;
         }
-
+        var isAccEnable = service && service.getProperties().get("interaction.enableAccUpdates");
         var isRadarChart = service._getRenderType().indexOf("radar") > -1;
         var polarAxis = "plotArea.polarAxis";
         var axisName = isRadarChart ? polarAxis : getAxisName(event);
         service.fireEvent("processUnhighlight");
         var color = service.getProperties().get(axisName + ".hoverShadow.color");
         if (color) {
-            d3.select(event.data.currentTarget).select("rect")
-            .attr("fill", event.data.byKeyboard ? "transparent" : color)
-            .classed(CSS_CLASS.HOVER_SHADOW, true);
+            if(isAccEnable){
+                d3.select(event.data.currentTarget).select("polygon")
+                .attr("fill", event.data.byKeyboard ? "transparent" : color)
+                .classed(CSS_CLASS.HOVER_SHADOW, true);
+            }else{
+                d3.select(event.data.currentTarget).select("rect")
+                .attr("fill", event.data.byKeyboard ? "transparent" : color)
+                .classed(CSS_CLASS.HOVER_SHADOW, true);
+            }
         }
 
         //get targets. Hovering on data points does not support trellis.
@@ -18072,9 +18202,19 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         }
 
         var color;
+        var lineColor = service.getProperties().get("interaction.selected.stroke.color");
+        var outlineWidth = service.getProperties().get("interaction.keyboard.width");
+
         if(isTriggerable(service)) {
+            var radar = service._getChartType().toLowerCase() === 'radar';
             var axisName = getAxisName(event);
+
+            if(radar){
+                axisName = 'plotArea.polarAxis'; 
+            }
+
             color = service.getProperties().get(axisName+".mouseDownShadow.color");
+           
         }
         else if(isTimeAxisTriggerable(service)) {
             color = service.getProperties().get("timeAxis"+".mouseDownShadow.color");
@@ -18082,13 +18222,19 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         else {
             return;
         }
+
         service.getNodes(service.NodeType.AXIS_ITEM_BACKGROUND)
         .attr("fill", "transparent")
         .classed(CSS_CLASS.HOVER_SHADOW, false);
+
+        var label_selector = service.NodeType.AXIS_ITEM_BACKGROUND.get('value');
+
         if (color) {
-            d3.select(event.data.currentTarget).select("rect")
+            d3.select(event.data.currentTarget).select(label_selector)
             .attr("fill", color)
-            .classed(CSS_CLASS.FOCUS_SHADOW, true);
+            .classed(CSS_CLASS.FOCUS_SHADOW, true)
+            .attr("stroke", lineColor)
+            .attr("stroke-width", outlineWidth);
         }
     };
 
@@ -18098,7 +18244,13 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         }
         var color;
         if(isTriggerable(service)) {
+            var radar = service._getChartType().toLowerCase() === 'radar';
             var axisName = getAxisName(event);
+
+            if(radar){
+                axisName = 'plotArea.polarAxis'; 
+            }
+            
             color = service.getProperties().get(axisName+".hoverShadow.color");
         }
         else if(isTimeAxisTriggerable(service)) {
@@ -18113,10 +18265,13 @@ define('sap/viz/chart/behavior/config/handler/AxisBehaviorHandler',[
         if (UADetector.isMobile()) {
             axisBackground.classed(CSS_CLASS.HOVER_SHADOW, false);
         } else {
+            var label_selector = service.NodeType.AXIS_ITEM_BACKGROUND.get('value');
             if (color) {
-                d3.select(event.data.currentTarget).select("rect")
+                d3.select(event.data.currentTarget).select(label_selector)
                 .attr("fill", color)
-                .classed(CSS_CLASS.HOVER_SHADOW, true);
+                .classed(CSS_CLASS.HOVER_SHADOW, true)
+                .attr("stroke", null)
+                .attr("stroke-width", null);
             }
         }
     };
@@ -20405,7 +20560,9 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
     'sap/viz/framework/common/util/DOM',
     "sap/viz/framework/common/util/DataGraphics",
     "sap/viz/framework/common/util/TypeUtils",
-    "sap/viz/chart/behavior/config/ContextualDataUtil"
+    "sap/viz/chart/behavior/config/ContextualDataUtil",
+    "sap/viz/framework/common/util/ACCStyleUtils",
+    "sap/viz/chart/components/util/ColorUtil"
 ], function(
     Constants,
     SDKConstants,
@@ -20418,7 +20575,9 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
     DOM,
     DataGraphics,
     TypeUtils,
-    ContextualDataUtil
+    ContextualDataUtil,
+    ACCStyleUtils,
+    ColorUtil
 ) {
     var BehaviorConstants = SDKConstants.BEHAVIOR;
     var CSS_CLASS = Constants.CSS.CLASS;
@@ -21430,7 +21589,7 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
 
         var plot = service.getModule("main.plot");
         var dataModel = service.getDataModel();
-
+        
         elements.forEach(function (e) {
             if(service.isTrellis()){
                 //bar
@@ -21445,7 +21604,6 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
                         HighlightHelper.drawStroke(service, e, 'path, rect', prop.stroke, 2);
                         HighlightHelper.drawFill(service, e, 'path, rect', prop, isMarkerRendererExist, true);
                     } else {
-                        //bar
                         if (!event.data.byKeyboard) {
                             var extraData = DataGraphics.getData(e);
                             HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, 2, undefined, extraData);
@@ -21480,7 +21638,7 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
 
         var plot = service.getModule("main.plot");
         var dataModel = service.getDataModel();
-
+        var isAccEnable = service.getProperties().get("interaction.enableAccUpdates");
         elements.forEach(function (e) {
             var dataId = DataPointUtils.getDataPointId(e);
             var dataPoint = dataModel.getDataPoint(dataId);
@@ -21514,6 +21672,29 @@ define('sap/viz/chart/behavior/config/handler/DataPointBehaviorHandler',[
                     }
                 }else{
                     extraData = DataGraphics.getData(e);
+                    if (isAccEnable) {
+                        var BGCOLORPROPS = [ "plotArea.grid.background.color",
+                         "plotArea.background.color",
+                         "general.background.color"];
+                        var propMgr = service.getProperties();
+                        var textVisible = propMgr.get('plotArea.dataLabel.visible');
+                        var template = service.getEffectManager()._getTemplate().name;
+                        var theme =  ACCStyleUtils.getTheme(template);
+                        var chartType = service._getChartType();
+                        var threshold = ACCStyleUtils.getThreshold(theme, chartType, textVisible);
+                        var strokeColor = "plotArea.dataPoint.stroke.color";
+                        var strokeVisible = "plotArea.dataPoint.stroke.visible";
+                        var bgcolor =  ColorUtil.getBgColor(propMgr,
+                        propMgr.get(strokeVisible) ? BGCOLORPROPS.concat(strokeColor) : BGCOLORPROPS);
+                        var fill = extraData.color;
+                        if (fill && bgcolor) {
+                            var ratioObj = ColorUtil.checkColorContrast(bgcolor, fill, threshold);
+                            if (!ratioObj.meetsThreshold) {
+                                var stroke = ACCStyleUtils.getBorderColor(extraData.color);
+                                prop.stroke.color = stroke ? stroke : prop.stroke.color;
+                            }
+                        }
+                    }
                     HighlightHelper.drawStroke(service, e, 'rect', prop.stroke, width, undefined, extraData);
                     HighlightHelper.drawFill(service, e, 'rect, path', prop, isMarkerRendererExist);
                 }
@@ -27394,6 +27575,10 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
     var HOURS = "hours";
     var MINUTES = "minutes";
     var SENCONDS = "senconds";
+    var CATEGORY_LABEL_ID = "categorylabel-id";
+    var LEGEND_ITEM = Constants.CSS.CLASS.LEGENDITEM;
+    var MBC_LEGEND_ITEM = Constants.CSS.CLASS.MBCLEGENDITEM;
+    var SELECTED = Constants.CSS.CLASS.SELECTED;
     
     var setNonInteractiveScreenReaderDesc = function(chartArguments, service) {
         
@@ -27492,6 +27677,7 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
         var valuesArray;
         var ctx;
         var units = service.getStatusManager().get("data.unit");
+        var isSelectionFeedback = service.getProperties().get('legend.selectionFeedback');
         switch (tabOrder) {
             case 1:
                 if (isTreeMap(service) && !targetId){
@@ -27586,7 +27772,12 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
                 //.attr('aria-posinset', DataPointUtils.getDataId(target) + 1)
                 // .attr('aria-setsize', service.getDataModel().getDataPointCount())
                 if (!isNonInteractive) {
-                    d3.select(target).attr("role", "listitem");
+                    var parent = d3.select(target).node().parentNode;
+                    var dataId = parseInt(DataPointUtils.getDataId(target)) + 1;
+                    var dataSize = service.getDataModel().getDataPointCount();
+                    d3.select(target).attr("role", "option").attr('aria-posinset', dataId)
+                    .attr('aria-setsize', dataSize);
+                    d3.select(parent).attr("role", "listbox");
                 }
                 break;
             case 2:
@@ -27595,7 +27786,10 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
                 text = (isTimeseries ? ' Time Axis Item ' : ' Category Axis Item ') + text;
                 text += DataGraphics.getContext(target).text;
                 if (!isNonInteractive) {
-                    d3.select(target).attr("role", "option");
+                    var categorySize = d3.select(target.parentNode).selectAll('.v-axis-item').size();
+                    var categoryId = parseInt(d3.select(target).attr(CATEGORY_LABEL_ID) || 0)+1;
+                    d3.select(target).attr("role", "option").attr('aria-posinset', categoryId)
+                    .attr('aria-setsize', categorySize);
                 }
                 break;
             case 3:
@@ -27648,7 +27842,7 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
                     });
                 }
                 if (!isNonInteractive) {
-                    d3.select(target).attr("role", "option").attr("tabindex", "0");
+                    d3.select(target).attr("role", "option");
                 }
                 break;
         }
@@ -27749,9 +27943,18 @@ define('sap/viz/chart/behavior/config/ScreenReaderUtil',[
         }
         text += ". ";
         if(!isNonInteractive) {
-            d3.select(target).attr('aria-label', text).attr("focusable", true)
+            d3.select(target).attr('aria-label', text).attr("tabindex", 0).attr("focusable", true)
                 .style('outline', 'none');
-
+            if(isSelectionFeedback){
+                var isLegendItemSelected = d3.select(target).attr('class').indexOf(LEGEND_ITEM + SELECTED);
+                if(isLegendItemSelected > -1){
+                    d3.select(target).attr('aria-label', text + ' Selected');
+                }
+                var isMBCLegendItemSelected = d3.select(target).attr('class').indexOf(MBC_LEGEND_ITEM + SELECTED);
+                if(isMBCLegendItemSelected > -1){
+                    d3.select(target).attr('aria-label', text + ' Selected');
+                }
+            }
             if (typeof target.focus === "function") {
                 target.focus();
             } else {
@@ -27913,11 +28116,13 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     var LEGEND_NODE_BOUND = Constants.CSS.CLASS.LEGEND_BOUND_SELECTION;
     var PLOT_NODE_BOUND = Constants.CSS.CLASS.PLOT_BOUND_SELECTION;
     var LEGEND_ITEM_BOUND = Constants.CSS.CLASS.LEGEND_ITEM_BOUND_SELECTION;
+    var AXIS_ITEM_NODE_BOUND_ACC = Constants.CSS.CLASS.AXIS_ITEM_BOUND_SELECTION_ACC;
     var AXIS_ITEM_NODE_BOUND = Constants.CSS.CLASS.AXIS_ITEM_BOUND_SELECTION;
     var DATAPOINTHOVER = Constants.CSS.CLASS.DATAPOINTHOVER;
     var ZEROVALUEHOVER = Constants.CSS.CLASS.ZEROVALUEHOVER;
     var ZERO_LINE_GROUP = Constants.CSS.CLASS.ZERO_LINE_GROUP;
     var STACK = Constants.CSS.CLASS.STACK;
+    var CLIPPATH = Constants.CSS.CLASS.CLIPPATH;
     var FOCUS_INSIDE_CLASS = "v-focusInside";
     var ZERO_FOCUS = {
         RECT: 2,
@@ -28313,13 +28518,13 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 if (dps) {
                     dps.forEach(function(target) {
                         highlightNode(mainBoundNode,
-                            d3.select(target), boundNode, highlightProps);
+                            d3.select(target), boundNode, highlightProps, service);
                     });
                 }
             } else {
                 highlightNode(mainBoundNode, isTreeMapHeader ?
                     d3.select(hoveredTargetNode.parentNode) :
-                    d3.select(hoveredTargetNode), boundNode, highlightProps);
+                    d3.select(hoveredTargetNode), boundNode, highlightProps, service);
             }
         }
     };
@@ -28424,7 +28629,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         return closestNode;
     };
 
-    var highlightNode = function(mainBoundNode, hoverNode, selectBound, properties) {
+    var highlightNode = function (mainBoundNode, hoverNode, selectBound, properties, service) {
         blurNode(hoverNode);
         var d3Node = hoverNode.select(selectBound),
             currentNode = d3Node.node();
@@ -28432,7 +28637,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
             return;
         }
         var stackNode = d3.select(hoverNode.node().parentNode).node();
-        var stackPos = TypeUtils.isExist(stackNode) ? 
+        var stackPos = TypeUtils.isExist(stackNode) ?
             stackNode.getBoundingClientRect() : {};
         var data = DataGraphics.getData(currentNode);
         if (TypeUtils.isExist(data)) {
@@ -28441,63 +28646,87 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         var svgRect = currentNode.getBoundingClientRect(),
             digitalWidth = parseFloat(properties.width) || 1,
             dasharray = digitalWidth + ', ' + digitalWidth;
+            
+            if(properties.style && properties.style.toLowerCase() === 'solid'){
+                dasharray = 'none';
+            }
+
         var boundNode = hoverNode.append("g").attr("class", "v-m-highlight");
         var bound = {
             rect: null,
-            line: null
+            line: null,
+            polygon: null
         };
-
         var isStackedChart;
         if (properties.renderType) {
             isStackedChart = properties.renderType.indexOf('stacked') > -1;
         }
-
         var angle = properties.angle;
-
+        var isAccEnable = service && service.getProperties().get("interaction.enableAccUpdates");
+        properties.width = properties.width ? parseFloat(properties.width.split('px')[0]) : 1;
         if (isStackedChart && properties.isZeroValueInStack && properties.isZeroOnFirstTab) {
             bound.line = boundNode.append('line').attr('class', 'v-highlight-bound')
                 .attr("stroke", properties.color)
                 .attr("stroke-width", properties.width).attr("stroke-dasharray", dasharray)
                 .style("pointer-events", "none" );
         } else {
-            bound.rect =  boundNode.append("rect").attr("class", "v-highlight-bound")
-                .attr("transform", d3Node.attr("transform"))
-                .attr("width", d3Node.attr("width")).attr("height", d3Node.attr("height"))
-                .attr("x", d3Node.attr("x")).attr("y", d3Node.attr("y"))
-                .attr("fill", "transparent").attr("fill-opacity", 0)
-                .attr("stroke", properties.color)
-                .attr("stroke-width", properties.width).attr("stroke-dasharray", dasharray)
-                .attr("shape-rendering", "crispEdges").style("pointer-events", "none");
+            if(isAccEnable && selectBound === AXIS_ITEM_NODE_BOUND_ACC){
+                var id = "clip-path=" + Math.random().toString(36).slice(2);
+                boundNode.append('clipPath')
+                    .attr("class", CLIPPATH)
+                    .attr("id", id)
+                    .append("polygon")
+                    .attr("points", d3Node.attr("points"));
+                bound.polygon = boundNode.append("polygon").attr("class", "v-highlight-bound")
+                    .attr("points", d3Node.attr("points"))
+                    .attr("fill", "transparent")
+                    .attr("fill-opacity", 0)
+                    .attr("stroke", properties.color)
+                    .attr("stroke-width", properties.width * 2)
+                    .attr("stroke-dasharray", dasharray)
+                    .attr("shape-rendering", "crispEdges")
+                    .style("pointer-events", "none")
+                    .attr("clip-path", "url(#" + id + ")");
+            }else{
+                bound.rect =  boundNode.append("rect").attr("class", "v-highlight-bound")
+                    .attr("transform", d3Node.attr("transform"))
+                    .attr("width", d3Node.attr("width")).attr("height", d3Node.attr("height"))
+                    .attr("x", d3Node.attr("x")).attr("y", d3Node.attr("y"))
+                    .attr("fill", "transparent").attr("fill-opacity", 0)
+                    .attr("stroke", properties.color)
+                    .attr("stroke-width", properties.width).attr("stroke-dasharray", dasharray)
+                    .attr("shape-rendering", "crispEdges").style("pointer-events", "none");
+            }
         }
 
         if (selectBound === "rect" || selectBound === "path") {
             var transform = SVG.getTransformToElement(currentNode, hoverNode.node());
-            var axisNode = d3.select(CATEGORYAXIS_NODE_BOUND).node() || 
+            var axisNode = d3.select(CATEGORYAXIS_NODE_BOUND).node() ||
                 d3.select(CATEGORYAXIS2_NODE_BOUND).node() || d3.select(TIMEAXIS_NODE_BOUND).node();
-            var axisPos = TypeUtils.isExist(axisNode) ? 
+            var axisPos = TypeUtils.isExist(axisNode) ?
                 axisNode.getBoundingClientRect() : {};
             var plotNode = d3.select(PLOT_NODE_BOUND).node();
-            var plotPos = TypeUtils.isExist(plotNode) ? 
+            var plotPos = TypeUtils.isExist(plotNode) ?
                 plotNode.getBoundingClientRect() : {};
             var zeroLineNode = d3.select('.' + ZERO_LINE_GROUP).node();
-            var zeroLinePos = TypeUtils.isExist(zeroLineNode) ? 
+            var zeroLinePos = TypeUtils.isExist(zeroLineNode) ?
                 zeroLineNode.getBoundingClientRect() : {};
             var wtfLineNode = [];
             if (properties.isZeroValue) {
                 var wtf = d3.selectAll('.v-wtf-linkline');
-                for (var i = 0; i < wtf[0].length; ++i) {
-                    wtfLineNode.push(wtf[0][i]);
+                for (var q = 0; q < wtf[0].length; ++q) {
+                    wtfLineNode.push(wtf[0][q]);
                 }
             }
             var hoverPos = boundNode.node().getBoundingClientRect();
-            var wtfLinePos = wtfLineNode.length > 0 ? 
+            var wtfLinePos = wtfLineNode.length > 0 ?
                 getWTFLineNode(wtfLineNode, hoverPos, !properties.isVerticalRender).getBoundingClientRect() : {};
             if (properties.isZeroValue && properties.isZeroOnFirstTab) {
                 if (properties.isVerticalRender) {
-                    properties.bCloseCategory = (axisPos.top <= hoverPos.top) || 
+                    properties.bCloseCategory = (axisPos.top <= hoverPos.top) ||
                         (plotPos.top <= hoverPos.top);
                 } else {
-                    properties.bCloseCategory = (axisPos.right <= hoverPos.left) || 
+                    properties.bCloseCategory = (axisPos.right <= hoverPos.left) ||
                         (plotPos.right <= hoverPos.left);
                 }
             }
@@ -28507,14 +28736,14 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                 }
                 transform = reShapeTransform(transform, properties);
                 boundNode.attr("transform", "translate(" + transform.e + "," + transform.f + ") " +
-                "scale(" + transform.a + "," + transform.d + ") ");
+                    "scale(" + transform.a + "," + transform.d + ") ");
             } else {
                 var posTransformLine, negTransformLine;
                 negTransformLine = {
-                    a: properties.isVerticalRender ? 0 : 
-                        isPercentageStackedChart(properties.renderType) ? 
-                        (-1) * 0.5 * ZERO_FOCUS.LINE : 0.5 * ZERO_FOCUS.LINE,
-                    b: properties.isVerticalRender ? isPercentageStackedChart(properties.renderType) ? 
+                    a: properties.isVerticalRender ? 0 :
+                        isPercentageStackedChart(properties.renderType) ?
+                            (-1) * 0.5 * ZERO_FOCUS.LINE : 0.5 * ZERO_FOCUS.LINE,
+                    b: properties.isVerticalRender ? isPercentageStackedChart(properties.renderType) ?
                         0.5 * ZERO_FOCUS.LINE : (-1) * 0.5 * ZERO_FOCUS.LINE : 0
                 };
                 posTransformLine = negTransformLine;
@@ -28550,11 +28779,11 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
             }
             if (TypeUtils.isExist(bound.line) || TypeUtils.isExist(bound.rect)) {
                 var pos = {
-                    plotPos: plotPos, 
+                    plotPos: plotPos,
                     axisPos: axisPos,
                     zeroLine: {
                         zeroLinePos: zeroLinePos,
-                        strokeWidth: TypeUtils.isExist(zeroLineNode) ? 
+                        strokeWidth: TypeUtils.isExist(zeroLineNode) ?
                             parseFloat(zeroLineNode.getAttribute('stroke-width')) : 0
                     },
                     hoverPos: hoverPos,
@@ -28623,19 +28852,21 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
             var parentRect = mainBoundNode.getBoundingClientRect();
             var intersectionBoundRect = BoundingBox.intersection(parentRect, svgRect);
             if (intersectionBoundRect) {
-                bound.rect.attr("width", intersectionBoundRect.width)
-                    .attr("height", intersectionBoundRect.height);
-                /*
-                * When there's scrollbar on the legend, set x = 0 or y = 0 instead of
-                * keeping x/y as null, will make the Chrome render differently
-                */
-                if (intersectionBoundRect.left !== svgRect.left) {
-                    bound.rect.attr("x", (parseFloat(d3Node.attr("x")) || 0) +
-                        intersectionBoundRect.left - svgRect.left);
-                }
-                if (intersectionBoundRect.top !== svgRect.top) {
-                    bound.rect.attr("y", (parseFloat(d3Node.attr("y")) || 0) +
-                        intersectionBoundRect.top - svgRect.top);
+                if(!isAccEnable || (selectBound !== AXIS_ITEM_NODE_BOUND_ACC)){
+                    bound.rect.attr("width", intersectionBoundRect.width)
+                        .attr("height", intersectionBoundRect.height);
+                    /*
+                    * When there's scrollbar on the legend, set x = 0 or y = 0 instead of
+                    * keeping x/y as null, will make the Chrome render differently
+                    */
+                    if (intersectionBoundRect.left !== svgRect.left) {
+                        bound.rect.attr("x", (parseFloat(d3Node.attr("x")) || 0) +
+                            intersectionBoundRect.left - svgRect.left);
+                    }
+                    if (intersectionBoundRect.top !== svgRect.top) {
+                        bound.rect.attr("y", (parseFloat(d3Node.attr("y")) || 0) +
+                            intersectionBoundRect.top - svgRect.top);
+                    }
                 }
             }
         }
@@ -28689,6 +28920,52 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         }
     };
 
+    var clearTabIndexForTabbingOut = function(service){
+        var tabindex0 = service._rootNode.selectAll('[tabindex="0"]')[0];
+        if(tabindex0.length>1){
+            //need to have exactly one element have tabindex 0,
+            //otherwise can'tab out of the DOM
+            //the element can be axis or legend item, preferably not datapoint
+
+            service._rootNode.selectAll('.v-datapoint[tabindex="0"]').attr("tabindex",null);
+            tabindex0 = service._rootNode.selectAll('[tabindex="0"]')[0];
+
+            var isTreeMap = function (service) {
+                var chartType = service._getRenderType();
+                return (chartType.indexOf("treemap") > -1);
+            };
+
+            var isHeatMap = function (service) {
+                var chartType = service._getRenderType();
+                return (chartType.indexOf("heatmap") > -1);
+            };
+
+            var legend_indicator = isTreeMap(service) || isHeatMap(service) ? '.v-mbc-legend-item' : '.v-legend-item';
+            var legend_node = service._rootNode.select(legend_indicator.concat('[tabindex="0"]')).node();
+
+            var not_legend_selector = ":not(" + legend_indicator + ")";
+
+            if(isHeatMap(service)){
+                //heat map behaving differently for some reason
+                return;
+            } 
+
+            if(legend_node){
+                service._rootNode
+                .selectAll('[tabindex="0"]')
+                .filter(not_legend_selector)
+                .attr("tabindex", null);
+            }else{
+                service._rootNode
+                .selectAll('[tabindex="0"]')
+                .filter(function(d,i){return i<tabindex0.length-1;})
+                .attr("tabindex", null);
+            }   
+
+        }
+    };
+
+
     var clearAllHoveredEffectAndStatus = function(service) {
         var hoveredTarget = service.getStatus("keyArrowHoveredDataPoint");
         if (isTreeMap(service) && hoveredTarget) {
@@ -28724,7 +29001,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         service.setStatus("hoveredLegendLabelId", null);
         service.setStatus("hoveredRadarLabelId", null);
 
-        service._rootNode.selectAll('g[focusable="true"]').attr('focusable', false);
+        service._rootNode.selectAll('[focusable="true"]').attr('focusable', null);
     };
 
     // make sure the direct handle functions only 2 parameters
@@ -28764,6 +29041,13 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
         var renderType = service._getRenderType();
         var isTreeMapHeader = false;
         var isRadarChart = service._getRenderType().indexOf('radar') > -1;
+        var isAccEnable = service && service.getProperties().get("interaction.enableAccUpdates");
+
+        //backwards tabbing (shift+tab into chart) -- remove chart border when backwards tabbing
+        var backwardsTabbingIdx = service.getStatus("backwardsTabbingIdx");
+        if(tabOrder === backwardsTabbingIdx && event.data.originalEvent.shiftKey){
+            d3.select(event.data.rootHandler).classed(FOCUS_INSIDE_CLASS, true);
+        }
 
         switch (tabOrder) {
             case 1:
@@ -28950,8 +29234,10 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                     if(axisBody.isOnlyShowingFirstAndLastLabel && axisBody.isOnlyShowingFirstAndLastLabel()){
                         return;
                     }
-
                     boundNode = AXIS_ITEM_NODE_BOUND;
+                    if(isAccEnable && !this._isTimeseries) {
+                        boundNode = AXIS_ITEM_NODE_BOUND_ACC;
+                    }
                     componentNavigator = this._isTimeseries ? this[TIMEAXIS_NAVIGATOR] :
                         ((tabOrder == 2) ? this[CATEGORYAXIS_NAVIGATOR] : this[CATEGORYAXIS2_NAVIGATOR]);
                     hoveredTargetNode = this._isTimeseries ? service.getStatus("keyArrowHoveredTimeLabel") :
@@ -28964,6 +29250,14 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                         if(this._isTimeseries) {
                             componentNavigator.updateCells(
                                 service.getModule("main.timeAxis.axisBody").getActiveLabels());
+                        }else{
+                            if (tabOrder == 2) {
+                                componentNavigator.updateCells(
+                                    service.getModule('main.categoryAxis.axisBody').getActiveLevels());
+                            }else{
+                                componentNavigator.updateCells(
+                                    service.getModule('main.categoryAxis2.axisBody').getActiveLevels());
+                            }
                         }
                         hoveredTargetId = componentNavigator.getFirstStartPoint().id;
                     } else if(isFocusAgain){
@@ -29224,6 +29518,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     };
 
     var zoomKeyHandler = function(event, service) {
+        var isAccEnable = service && service.getProperties().get("interaction.enableAccUpdates");
         if (!service.getStatusManager().get("plot.zoom")) {
             return;
         }
@@ -29281,6 +29576,9 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                             hoveredCategoryId + "']");
                     service.setStatus("keyArrowHoveredTimeLabel", hoveredTarget);
                 } else {
+                    if(isAccEnable) {
+                        boundNode = AXIS_ITEM_NODE_BOUND_ACC;
+                    }
                     //Here use categoryLabel-id to query label because lazy rendering will mis-delete previous dom
                     hoveredCategoryId = service.getStatus("hoveredCategoryLabelId");
                     categoryGroupNode = service.getNodes(service.NodeType.CATEGORY_LABEL_GROUP);
@@ -29420,6 +29718,8 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
     KeyboardBehaviorHandler.prototype = {
         initialized: function(event, service) {
             service.setStatus("tabOrder", -1);
+            service.setStatus("backwardsTabbing", false);
+            service.setStatus("backwardsTabbingIdx", 1);
             this[MAIN_NODE] = service.getNodes(service.NodeType.MAIN_NODE);
             this[LEGEND_GROUP] = service.getNodes(service.NodeType.LEGEND_GROUP);
             this[PLOT_NODE] = service.getNodes(service.NodeType.PLOT_NODE);
@@ -29660,6 +29960,8 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
             service.removeStatus("tabOrder");
             service.removeStatus("hoveredTimeLabelId");
             service.removeStatus("orgHoveredTimeLabelId");
+            service.removeStatus("backwardsTabbing");
+            service.removeStatus("backwardsTabbingIdx");
         },
 
         uparrowHandler: function(event, service) {
@@ -29707,9 +30009,11 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                     });
                     var mainBoundNode = mainNode.select(boundNode).node();
                     highlightNode(mainBoundNode, d3.select(mainBoundNode.parentNode),
-                        ".v-bound", highlightProps);
+                        ".v-bound", highlightProps, service);
                 }
             };
+            var backwardstabbing = service.getStatus("backwardsTabbing");
+            var backwardsTabbingIdx = service.getStatus("backwardsTabbingIdx");
             
             if (currentIdx === -1) {
                 if (!shiftKey){
@@ -29720,7 +30024,13 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                     currentIdx = -1;
                     releaseTab = true;
                 }
+                //entry point from backwards tabbing
+                if(backwardstabbing && shiftKey){
+                    currentIdx = backwardsTabbingIdx;
+                    releaseTab = false;
+                }
                 service.setStatus("tabOrder", currentIdx);
+                service.setStatus("backwardsTabbing", false);
             } else {
                 switch (currentIdx) {
                     case 1:
@@ -29746,10 +30056,12 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                             }else {
                                 currentIdx = -1;
                                 releaseTab = true;
+                                backwardstabbing = true;
                             }
                         } else {
                             currentIdx = -1;
                             releaseTab = true;
+                            service._rootNode.selectAll('[tabindex="0"]').attr('tabindex', null);
                         }
                         break;
                     case 2:
@@ -29767,6 +30079,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                             else {
                                 currentIdx = -1;
                                 releaseTab = true;
+                                backwardstabbing = true;
                             }
                         } else {
                             boundNode = PLOT_NODE_BOUND;
@@ -29782,6 +30095,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                             } else {
                                 currentIdx = -1;
                                 releaseTab = true;
+                                backwardstabbing = true;
                             }
                         } else {
                             if (service._getRenderType().indexOf('radar') > -1) {
@@ -29805,6 +30119,7 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                         if (!shiftKey) {
                             currentIdx = -1;
                             releaseTab = true;
+                            backwardstabbing = true;
                         } else if (legendModule && legendModule.isVisible()) {
                             mainNode = this[LEGEND_GROUP];
                             boundNode = LEGEND_NODE_BOUND;
@@ -29822,10 +30137,17 @@ define('sap/viz/chart/behavior/config/handler/KeyboardBehaviorHandler',[
                     mode: "infoMode",
                     action: "interrupt"
                 });
+                
+                if(currentIdx>0){
+                    service.setStatus("backwardsTabbingIdx", currentIdx);
+                }
+
                 service.setStatus("tabOrder", currentIdx);
+                service.setStatus("backwardsTabbing", backwardstabbing);
 
                 if (releaseTab) {
                     clearAllHoveredEffectAndStatus(service);
+                    clearTabIndexForTabbingOut(service);
                     if (event && event.data && event.data.rootHandler) {
                         d3.select(event.data.rootHandler).classed(FOCUS_INSIDE_CLASS, false);
                     }
@@ -32817,7 +33139,6 @@ define('sap/viz/chart/views/ChartView',[
 
         this._rootContainer = rootElement.node().parentNode;
         if (this._rootContainer) {
-            this._rootContainer.setAttribute("tabIndex", this._properties.get('general.tabIndex'));
             if (this._outline.visible || this._properties.get("interaction.enableKeyboard")) {
                 this._rootContainer.style.outline = null;
             } else {
@@ -35083,9 +35404,10 @@ define('sap/viz/chart/components/axis/sub/AxisTitle',[
     "sap/viz/framework/common/util/UADetector",
     "sap/viz/framework/common/util/NameColorUtils",
     "sap/viz/framework/common/util/DataGraphics",
-    "sap/viz/migrate/PropertyUtil"
+    "sap/viz/migrate/PropertyUtil",
+    "sap/viz/framework/common/util/ACCStyleUtils"
 ], function(Constants, oo, AxisComponent, TypeUtils, NumberUtils, StyleUtils,
-    TextUtils, UADetector, NameColorUtils, DataGraphics, PropertyUtil) {
+    TextUtils, UADetector, NameColorUtils, DataGraphics, PropertyUtil, ACCStyleUtils) {
 
     var AXIS_CLASS_NAMES = Constants.CSS.CLASS.AXIS;
 
@@ -35125,7 +35447,12 @@ define('sap/viz/chart/components/axis/sub/AxisTitle',[
         if(this._isApplyAxisLineColor()){
             value = this._properties.get('color');
         }
-        return this._isAllHidden() ? Constants.AXIS.HIDDEN_TITLE.COLOR : value;
+        var color = Constants.AXIS.HIDDEN_TITLE.COLOR;
+        var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+        if(enableAccUpdates){
+            color = ACCStyleUtils.convertColor(Constants.AXIS.HIDDEN_TITLE.ACC_COLOR);
+        }
+        return this._isAllHidden() ? color : value;
     };
 
     AxisTitle.prototype.render = function(selection) {
@@ -35165,9 +35492,17 @@ define('sap/viz/chart/components/axis/sub/AxisTitle',[
                     NameColorUtils.convertColor(colorProps) :
                     styles.color
             });
-            var hiddenStyleColor = effectManager.register({
-                fillColor: Constants.AXIS.HIDDEN_TITLE.COLOR
-            });
+            var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+            var hiddenStyleColor = null;
+            if (enableAccUpdates) {
+                hiddenStyleColor = effectManager.register({
+                    fillColor: ACCStyleUtils.convertColor(Constants.AXIS.HIDDEN_TITLE.ACC_COLOR)
+                });
+            } else {
+                hiddenStyleColor = effectManager.register({
+                    fillColor: Constants.AXIS.HIDDEN_TITLE.COLOR
+                });
+            }
 
             var titleText = selection.append("g")
                 .attr("class", className)
@@ -35235,6 +35570,7 @@ define('sap/viz/chart/components/axis/sub/AxisTitle',[
                         !useCustomColor && !titleObj.noNeedApplyHiddenTitleColor) {
                         //note: you have to set v-hidden-title css after v-title (because of css rules)
                         tItem.attr("class", className + " " + hiddenClassName);
+                        tItem.attr("aria-hidden", true);
                         tItem.attr("fill", hiddenStyleColor);
                     }
 
@@ -35726,17 +36062,20 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
     "sap/viz/framework/common/util/NumberUtils",
     "sap/viz/framework/common/util/DataUtils",
     "sap/viz/framework/common/util/ArrayUtils",
+    'sap/viz/framework/common/util/Constants',
     "sap/viz/chart/components/axis/renderer/DefaultCategoryLabelRenderer"
 ], function(
     NumberUtils,
     DataUtils,
     ArrayUtils,
+    Constants,
     DefaultCategoryLabelRenderer
 ) {
 
     var LABEL_OFFSET = 6;
     var TICK_SIZE = 5;
     var VERTICAL_ANGLE = 90;
+    var MIN_ELEMENT_SIZE = Constants.MIN_INTERACTIVE_ELEMENT_SIZE;
 
     var _buildUtils = {};
 
@@ -35951,7 +36290,8 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
         }
         var propStyle = config.propStyle;
         var labelVisible = config.labelVisible;
-
+        var isAccEnable = axisBody._properties.origin.get('interaction.enableAccUpdates');
+        var isInteractive = !axisBody._properties.origin.get('interaction.noninteractiveMode');
         var checkLabelVisible = config.checkLabelVisible;
 
         var truncatedLabelRatioSetting = +config.truncatedLabelRatioSetting;
@@ -36102,7 +36442,7 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
 
                     //determine initial step value
                     var len = filteredCells.length;
-                    step = noAutoHide ? 1 : _misc.getStep(filteredCells, 0, getPreferredSizeFn);
+                    step = noAutoHide ? 1 : _misc.getStep(axisBody, filteredCells, 0, getPreferredSizeFn);
                     if(truncatedLabelRatio === 1) {
                         //no rotation. So we have to check each label "noLabelSpace"
                         step = 1;
@@ -36135,7 +36475,7 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
                             labelNumber = 0;
                             j = -step;
                             //step changed
-                            step = _misc.getStep(filteredCells, prevIdx, getPreferredSizeFn);
+                            step = _misc.getStep(axisBody, filteredCells, prevIdx, getPreferredSizeFn);
                             continue;
                         }
                         prevIdx = j;
@@ -36250,6 +36590,9 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
                     minMinLayerBand = -offset;
                 }
                 refSize = NumberUtils.preciseSimple(maxRefSize + offset);
+                if(isAccEnable && isInteractive && refSize < MIN_ELEMENT_SIZE){
+                    refSize = MIN_ELEMENT_SIZE;
+                }
                 for (j = 0, jLength = cells.length; j < jLength; ++j) {
                     cell = cells[j];
                     cell.isVisible = false;
@@ -36269,6 +36612,10 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
                 if(config.isFlexibleLayers && (isVertical || layer.rotated)) {
                     layer.reCalculateLayerContext = true;
                 }
+
+                if(isAccEnable && isInteractive){
+                    layer.reCalculateLayerContext = false;
+                }
             } else {
                 maxMinLayerBand = 0;
                 var pSizeCache = [];
@@ -36302,7 +36649,13 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
                     if (maxRefSize < psize[cellRefSizeField]) {
                         maxRefSize = psize[cellRefSizeField];
                     }
-                    if (!noAutoHide && psize[cellSizeField] > cell[cellSizeField]) {
+                    var reCalcSize;
+                    if(isAccEnable && isInteractive){
+                        reCalcSize = MIN_ELEMENT_SIZE;
+                    }else{
+                        reCalcSize = psize[cellSizeField];
+                    }
+                    if (!noAutoHide && reCalcSize > cell[cellSizeField]) {
                         if(config.isFlexibleLayers) {
                             layer.reCalculateLayerContext = true;
                         }
@@ -36314,6 +36667,9 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
                     }
                 }
                 refSize = NumberUtils.preciseSimple(maxRefSize + offset);
+                if(isAccEnable && isInteractive && refSize < MIN_ELEMENT_SIZE){
+                    refSize = MIN_ELEMENT_SIZE;
+                }
                 
                 var visibleLabelNum = 0;
                 for (j = 0, jLength = cells.length; j < jLength; ++j) {
@@ -36329,6 +36685,17 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
                 if(visibleLabelNum <= 0) {
                     layer.isVisible = false;
                 }
+                var realSize;
+                if(axisBody._isVertical()){
+                    realSize = axisBody._realSize.height;
+                }else{
+                    realSize = axisBody._realSize.width;
+                }
+                var eachLabelSpace = realSize / layer.cells.length;
+                if(isAccEnable && isInteractive && eachLabelSpace < MIN_ELEMENT_SIZE){
+                    layer.isVisible = false;
+                    continue;
+                }
             }
             
             if(layer.reCalculateLayerContext) {
@@ -36441,7 +36808,7 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
     var hideOverlappedLabels = function(allCells, layers, layerIndex, isVertical, cellsToShow, 
             cellsToMeasure, isAllowEmptySegement) {
         //detect text height
-        var labelBand;        
+        var labelBand;
         for(var i = 0; i < allCells.length; i++) {
             if(isVertical) {
                 if(allCells[i].contentHeight) {
@@ -37136,18 +37503,34 @@ define('sap/viz/chart/components/util/BuildLayerUtil',[
         }
     };
 
-    _misc.getStep = function(cells, startIdx, getPreferredSizeFn) {
+    _misc.getStep = function(axisBody, cells, startIdx, getPreferredSizeFn) {
+        var isAccEnable = axisBody._properties.origin.get('interaction.enableAccUpdates');
+        var isInteractive = !axisBody._properties.origin.get('interaction.noninteractiveMode');
+        var rotateAngle = parseFloat(axisBody._properties.origin.get('categoryAxis.label.angle'));
+        var rad = rotateAngle * Math.PI / 180;
         if (cells.length <= 1) {
             return 1;
         }
         var step;
         var cell0 = cells[startIdx];
+        var start0 = cell0.cellStart;
         var end0 = cell0.end - 0.001; //fix javascript precision issue
         var len = cells.length;
         var cell;
         for (var j = startIdx + 1; j < len; j++) {
             cell = cells[j];
-            if (cell.cellStart >= end0) { //TODO: use cell.start to compare for better space usage
+            var isSkip;
+            if (isAccEnable && isInteractive){
+                if(rotateAngle && rotateAngle !== 0 && rotateAngle !== 90){
+                    isSkip = cell.cellStart - start0 >= MIN_ELEMENT_SIZE / Math.sin(rad);
+                }else{
+                    isSkip = cell.cellStart - start0 >= MIN_ELEMENT_SIZE;
+                }
+            }else{
+                isSkip = cell.cellStart >= end0;
+            }
+            //TODO: use cell.start to compare for better space usage
+            if (isSkip){
                 for (var k = j; k < len; k++) {
                     getPreferredSizeFn(cells[k]);
                     if (cells[k].start >= end0) {
@@ -39336,6 +39719,97 @@ define('sap/viz/chart/components/axis/ValueAxis',[
     return ValueAxis;
 });
 
+define('sap/viz/chart/components/util/PolygonUtil',[], function() {
+    
+    var polygonUtilObj = {};
+
+    polygonUtilObj.calRotatedRect = function(x, y, width, height, angle) {
+        var rad = angle * Math.PI / 180;
+        var rotateCenterX = x, rotateCenterY = y;
+        var corners = [
+            [x, y], [x + width, y],
+            [x + width, y + height], [x, y + height]
+        ];
+        var result = corners.map(function(point) {
+            var dx = point[0] - rotateCenterX, dy = point[1] - rotateCenterY;
+            return {
+                x: dx * Math.cos(rad) - dy * Math.sin(rad) + rotateCenterX,
+                y: dx * Math.sin(rad) + dy * Math.cos(rad) + rotateCenterY
+            };
+        });
+        return result;
+    };
+    
+    polygonUtilObj.calSkewRect = function(x, y, width, height, angle) {
+        var rad = angle * Math.PI / 180;
+        return [
+            {x: x, y: y}, 
+            {x: x + width, y: y},
+            {x: x + width + height * Math.tan(rad), y: y + height}, 
+            {x: x + height * Math.tan(rad), y: y + height}
+        ];
+    };
+
+    polygonUtilObj.calIntersection = function(line1A, line1B, line2A, line2B) {
+        var d = (line2B.y - line2A.y) * (line1B.x - line1A.x) - (line2B.x - line2A.x) * (line1B.y - line1A.y);
+        
+        if (Math.abs(d) < 1e-10) {
+            return null;
+        }
+        
+        var ua = ((line2B.x - line2A.x) * (line1A.y - line2A.y) - (line2B.y - line2A.y) * (line1A.x - line2A.x)) / d;
+        var ub = ((line1B.x - line1A.x) * (line1A.y - line2A.y) - (line1B.y - line1A.y) * (line1A.x - line2A.x)) / d;
+        
+        if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
+            return null;
+        }
+        
+        return {
+            x: line1A.x + ua * (line1B.x - line1A.x),
+            y: line1A.y + ua * (line1B.y - line1A.y)
+        };
+    };
+
+    polygonUtilObj.isPointInConvexPolygon = function(point, polygon) {
+        for (var i = 0; i < polygon.length; i++) {
+            var pointA = polygon[i];
+            var pointB = polygon[(i + 1) % polygon.length];
+            
+            var edge = { x: pointB.x - pointA.x, y: pointB.y - pointA.y };
+            var toPoint = { x: point.x - pointA.x, y: point.y - pointA.y };
+            
+            var cross = edge.x * toPoint.y - edge.y * toPoint.x;
+            
+            if (cross < 0) {
+                return false;
+            }
+        }
+        return true;
+    };
+    polygonUtilObj.sortPoints = function(points) {
+        if (points.length < 3) {
+            return points;
+        }
+        
+        var center = points.reduce(function(acc, p) {
+            return {
+                x: acc.x + p.x,
+                y: acc.y + p.y
+            };
+        }, { x: 0, y: 0 });
+        center.x /= points.length;
+        center.y /= points.length;
+        
+        var result = points.sort(function(a, b) {
+            var angleA = Math.atan2(a.y - center.y, a.x - center.x);
+            var angleB = Math.atan2(b.y - center.y, b.x - center.x);
+            return angleA - angleB;
+        });
+        return result;
+    };
+
+    return polygonUtilObj;
+});
 define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     "sap/viz/framework/common/util/Constants",
     "sap/viz/framework/common/util/ArrayUtils",
@@ -39348,6 +39822,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     "sap/viz/framework/common/util/PositionUtil",
     "sap/viz/framework/common/util/RuleUtil",
     "sap/viz/chart/components/util/StyleUtils",
+    "sap/viz/chart/components/util/PolygonUtil",
     "sap/viz/framework/common/util/GeometryUtils",
     "sap/viz/framework/common/util/DataGraphics",
     "sap/viz/framework/common/util/ObjectUtils"
@@ -39363,6 +39838,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     PositionUtils,
     RuleUtil,
     StyleUtils,
+    PolygonUtil,
     GeometryUtils,
     DataGraphics,
     ObjectUtils
@@ -39373,6 +39849,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     var TICK_SIZE = 5;
     var LABEL_OFFSET = 6;
     var VERTICAL_ANGLE = 90;
+    var MIN_ELEMENT_SIZE = Constants.MIN_INTERACTIVE_ELEMENT_SIZE;
 
     var LONG_TICK_STROKE = "#B3B3B3";
     var TICK_LABEL_SPACING = TICK_SIZE + LABEL_OFFSET - 1;
@@ -39616,7 +40093,7 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     };
 
     rendererFunc.prototype.drawLabels = function(selection, layers, bound, position, props, effectManager,
-        needRowAxisOffset, labelOffset, additionalWidth, rebuildUI) {
+        needRowAxisOffset, labelOffset, additionalWidth, rebuildUI, isAccEnable, lineSize, clippathRect) {
         var layersReversed = layers.slice().reverse();
         var layersLength = layersReversed.length;
         var baseline = 0;
@@ -39626,7 +40103,8 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
             baseline = getLayersBand(layersReversed, i);
             this.drawSingleLayerLabels(selection, layersReversed[i], bound,
                 position, props, baseline, i, layersReversed, effectManager,
-                needRowAxisOffset, labelOffset, additionalWidth, rebuildUI);
+                needRowAxisOffset, labelOffset, additionalWidth, rebuildUI,
+                isAccEnable, lineSize, clippathRect);
         }
         //remove labels out of layer limitation
         while(selection.select(".index_"+i).node()){
@@ -39665,11 +40143,41 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
             realXOffset = xOffset - baseYOffset * Math.cos(refAngle * Math.PI/180);
         }
 
-        return "translate(" + realXOffset + "," + realYOffset + ")";
+        return { 
+            offsetX: parseFloat(realXOffset),
+            offsetY: parseFloat(realYOffset)
+        };
     };
 
-    rendererFunc.prototype._setLabelRectSize = function(rectNode, labelSize, textSize) {
-        if(rectNode && labelSize){
+    rendererFunc.prototype._setLabelRectSize = function(rectNode, labelSize, textSize, isAccEnable,
+        isVertical, sizeLimit) {
+        if(isAccEnable){
+            var x = parseFloat(rectNode.getAttribute('x'));
+            var y = parseFloat(rectNode.getAttribute('y'));
+            var rectPoints;
+            if(rectNode && labelSize){
+                if(isVertical){
+                    rectPoints = PolygonUtil.calRotatedRect(
+                        1, 
+                        y, 
+                        sizeLimit + TICK_SIZE, 
+                        labelSize.height, 
+                        0);
+                }else{
+                    rectPoints = PolygonUtil.calRotatedRect(
+                        x,
+                        y, 
+                        labelSize.width, 
+                        Math.min(labelSize.height, sizeLimit), 
+                        0);
+                }
+            }
+            rectNode.setAttribute("points", rectPoints.map(function(d) {
+                var pointX = NumberUtils.preciseSimple(d.x);
+                var pointY = NumberUtils.preciseSimple(d.y);
+                return pointX + "," + pointY;
+            }).join(" "));
+        }else{
             rectNode.setAttribute("width", labelSize.width);
             rectNode.setAttribute("height", labelSize.height);
         }
@@ -39753,9 +40261,12 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
     var MIN_LABEL_CHAR_NUM = 3;
     var ELLIPSIS_NUM = 3;
     var MIN_SPACING = 24;
-    
+
     rendererFunc.prototype.drawSingleLayerLabels = function(selection, layer, bound, position, props,
-        baseline, index, layers, effectManager, needRowAxisOffset, labelOffset, additionalWidth, rebuildUI) {
+        baseline, index, layers, effectManager, needRowAxisOffset, labelOffset, additionalWidth, rebuildUI,
+        isAccEnable, lineSize, clippathRect) {
+        
+        var MARGIN_SIZE = 2;
         var clid = CATEGORY_LABEL_ID;
         var width = bound.width;
         var realWidth = bound.realSize && bound.realSize.width;
@@ -39905,11 +40416,24 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
             var fontWeight = propStyle.fontWeight;
             var fontFamily = propStyle.fontFamily;
             var fontStyle = propStyle.fontStyle;
-            
+            var lineSizeOffset = lineSize / 2;
+
             config.styles = propStyle;
             
             this.setAttribute(clid, d.id);
-            this.setAttribute("transform", "translate(" + d.x + "," + d.y + ")");
+            var labelX = d.x;
+            var labelY = d.y;
+            if(isAccEnable){
+                if(isVertical){
+                    labelX = d.x - lineSizeOffset;
+                    this.setAttribute("transform", "translate(" + labelX + "," + d.y + ")");
+                }else{
+                    labelY = d.y + lineSizeOffset;
+                    this.setAttribute("transform", "translate(" + d.x + "," + labelY + ")");
+                }
+            }else{
+                this.setAttribute("transform", "translate(" + d.x + "," + d.y + ")");
+            }
             var psize = d._preferredSize;
             var refSize = Math.max(d[cellSizeField], psize[cellSizeField]);
 
@@ -39966,14 +40490,17 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
                 //the axis can display the label text. we draw the rect.
                 rect = this.querySelector("." + AXIS_CLASS_NAMES.BACKGROUND_RECT);
                 if (!rect) {
-                    rect = SVG.create("rect");
+                    if(isAccEnable){
+                        rect = SVG.create("polygon");
+                    }else{
+                        rect = SVG.create("rect");
+                    }
                     rect.setAttribute("class", AXIS_CLASS_NAMES.BACKGROUND_RECT);
                     rect.setAttribute("fill", "transparent");
                     this.appendChild(rect);
                 }else if(keepFirstAndLastLabel){
                     rect.setAttribute("fill", "transparent");  
                 }
-
                 rect.setAttribute("x", d.rectX);
                 rect.setAttribute("y", d.rectY);
             }
@@ -40043,35 +40570,110 @@ define('sap/viz/chart/components/axis/renderer/OrdinalCommonBodyRenderer',[
                     width: forceLabelRotation && rotated ? d.rectHeight :d.rectWidth,
                     height: forceLabelRotation && rotated ? d.rectWidth: d.rectHeight
                 };
-                me._setLabelRectSize(rect, labelSize, textNodeSize);
-                var textSize, textHeight, textWidth;
+                me._setLabelRectSize(rect, labelSize, textNodeSize, isAccEnable, isVertical,
+                    sizeLimit + 2 * MARGIN_SIZE);
+                var textSize, textHeight, textWidth, rectHeight, rectOffset, refRectWidth;
 
                 if(layer.rotated && layer.rotationAngle !== VERTICAL_ANGLE && layer.rotationAngle !== 0) {
-                    if(d.isEventRectLimited) {
+                    if(isAccEnable){
+                        var clippathPoints = PolygonUtil.calRotatedRect(
+                            clippathRect.x - bound.offset.x,
+                            clippathRect.y,
+                            clippathRect.width,
+                            clippathRect.height,
+                            clippathRect.angle
+                        );
                         textSize = TextUtils.canvasMeasure(d.text, fontSize, fontWeight, fontFamily);
                         textHeight = NumberUtils.preciseSimple(textSize.height);
                         textWidth = NumberUtils.preciseSimple(textSize.width);
 
-                        var rectHeight = Math.min(sizeLimit, textWidth);
+                        rectHeight = Math.min(sizeLimit, textWidth);
+                        var rectWidth = Math.max(NumberUtils.preciseSimple(textHeight) + 2 * MARGIN_SIZE, 
+                        MIN_ELEMENT_SIZE);
+                        var rectPoints;
+                        var intersections = [];
+                        var innerPoints = [];
+                        if(d.isEventRectLimited) {
+                            rectOffset = rectWidth/4 * Math.sin(config.rotationAngle * Math.PI/180);
+
+                            //enlarge rect size to add margin
+                            var rectTranslate = addRectMargin(rect, config.rotationAngle, -rectOffset, TICK_SIZE);
+                            rectPoints = PolygonUtil.calRotatedRect(
+                                parseFloat(d.rectX + rectTranslate.offsetX + labelX), 
+                                parseFloat(d.rectY + rectTranslate.offsetY), 
+                                parseFloat(rectWidth),
+                                parseFloat(rectHeight) + 2 * MARGIN_SIZE, 
+                                parseFloat(90 - config.rotationAngle)
+                            );
+                        } else {
+                            refRectWidth = d.contentWidth * 3;
+                            if(refRectWidth < d.cellWidth) {
+                                rect.setAttribute("width", refRectWidth);
+                                rect.setAttribute("x", d.rectX + d.cellWidth/2 - refRectWidth/2);
+                            }
+                            rectPoints = PolygonUtil.calSkewRect(
+                                parseFloat(d.rectX + labelX + d.cellWidth/2 - refRectWidth/2), 
+                                parseFloat(d.rectY), 
+                                parseFloat(refRectWidth), 
+                                parseFloat(labelSize.height), 
+                                parseFloat(config.rotationAngle - 90)
+                            );
+                        }
+                        for (var j = 0; j < 4; j++) {
+                            var line1A = rectPoints[j], line1B = rectPoints[(j + 1) % 4];
+                            for (var k = 0; k < 4; k++) {
+                                var line2A = clippathPoints[k], line2B = clippathPoints[(k + 1) % 4];
+                                var pt = PolygonUtil.calIntersection(line1A, line1B, line2A, line2B);
+                                if (pt) {
+                                    intersections.push(pt);
+                                }
+                            }
+                        }
+                        rectPoints.forEach(function(pt) { 
+                            if (PolygonUtil.isPointInConvexPolygon(pt, clippathPoints)) {
+                                innerPoints.push(pt); 
+                            }
+                        });
+                        clippathPoints.forEach(function(pt) { 
+                            if (PolygonUtil.isPointInConvexPolygon(pt, rectPoints)) {
+                                innerPoints.push(pt); 
+                            }
+                        });
+                        var allPoints = intersections.concat(innerPoints);
+                        var sortedPoints = PolygonUtil.sortPoints(allPoints);
+                        rect.setAttribute("points", sortedPoints.map(function(d) {
+                            var pointX = NumberUtils.preciseSimple(d.x);
+                            var pointY = NumberUtils.preciseSimple(d.y);
+                            return pointX - labelX + "," + pointY;
+                        }).join(" "));
+                    }else{
+                        if(d.isEventRectLimited) {
+                            textSize = TextUtils.canvasMeasure(d.text, fontSize, fontWeight, fontFamily);
+                            textHeight = NumberUtils.preciseSimple(textSize.height);
+                            textWidth = NumberUtils.preciseSimple(textSize.width);
+
+                            rectHeight = Math.min(sizeLimit, textWidth);
 
-                        rect.setAttribute("width", textHeight);
-                        rect.setAttribute("height", rectHeight);
+                            rect.setAttribute("width", textHeight);
+                            rect.setAttribute("height", rectHeight);
 
-                        var rectOffset = textHeight/4 * Math.sin(config.rotationAngle * Math.PI/180);
+                            rectOffset = textHeight/4 * Math.sin(config.rotationAngle * Math.PI/180);
 
-                        //enlarge rect size to add margin
-                        var translateStr = addRectMargin(rect, config.rotationAngle, -rectOffset, TICK_SIZE);
-                        var rotateStr = "rotate(" + (90 - config.rotationAngle) + "," +
-                            d.rectX + "," + d.rectY + ") ";
+                            //enlarge rect size to add margin
+                            var realOffset = addRectMargin(rect, config.rotationAngle, -rectOffset, TICK_SIZE);
+                            var translateStr = "translate(" + realOffset.offsetX + "," + realOffset.offsetY + ")";
+                            var rotateStr = "rotate(" + (90 - config.rotationAngle) + "," +
+                                d.rectX + "," + d.rectY + ") ";
 
-                        rect.setAttribute("transform", translateStr + ' ' + rotateStr);
-                    } else {
-                        rect.setAttribute("transform", "skewX(-" + (90-layer.rotationAngle) + ")");
+                            rect.setAttribute("transform", translateStr + ' ' + rotateStr);
+                        } else {
+                            rect.setAttribute("transform", "skewX(-" + (90-layer.rotationAngle) + ")");
 
-                        var refRectWidth = d.contentWidth * 3;
-                        if(refRectWidth < d.cellWidth) {
-                            rect.setAttribute("width", refRectWidth);
-                            rect.setAttribute("x", d.rectX + d.cellWidth/2 - refRectWidth/2);
+                            refRectWidth = d.contentWidth * 3;
+                            if(refRectWidth < d.cellWidth) {
+                                rect.setAttribute("width", refRectWidth);
+                                rect.setAttribute("x", d.rectX + d.cellWidth/2 - refRectWidth/2);
+                            }
                         }
                     }
                 }else {
@@ -40279,6 +40881,7 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
         this._hasNegativeValue = false;
         this._styleChanged = true;
         this._localeChanged = true;
+        this._additionalWidth = 0;
         //Default offset for trellis axis label is 5.
         this._labelOffset = 5;
         var styleChangeCallBack = function() {
@@ -40400,19 +41003,32 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
             additionalWidth = this.getAdditionalWidth();
         }
         var rect = this._selection.select('.v-clippath rect');
-        rect.attr('width', this._size.width + 2 + additionalWidth).attr('x', -1 - additionalWidth);        
+        rect.attr('width', this._size.width + 2 + additionalWidth).attr('x', -1 - additionalWidth);
     };
 
     OrdinalCommonAxisBody.prototype._update = function(rebuildUI) {
+        var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
         if(!this._tickGroupNode && !this._labelGroupNode){
             return;
         }
         var properties = this._properties.get();
+        var rect, clippathRect;
         if (this._data && properties.visible) {
             var width = this._size.width;
             var height = this._size.height;
             var position = this._position;
-
+            if(isAccEnable){
+                rect = this._selection.select('.v-clippath rect');
+                rect.attr('width', this._size.width + 2 + this._additionalWidth)
+                    .attr('x', -1 - this._additionalWidth);       
+                clippathRect = {
+                    width: this._size.width + 2 + this._additionalWidth,
+                    height: this._size.height + 2,
+                    x: -1 - this._additionalWidth,
+                    y: -1,
+                    angle: 0
+                };
+            }
             if(rebuildUI){
                 this._layers = this._buildLayers(this._data);
                 this.layout();
@@ -40437,7 +41053,7 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
                         position, properties, this.runtime().effectManager(), this._froce);
                 }
                 if (properties.label && properties.label.visible) {
-                    this._renderLabels(properties, layers, bound, position, rebuildUI);
+                    this._renderLabels(properties, layers, bound, position, rebuildUI, clippathRect);
                 }
             }
         }
@@ -40458,16 +41074,37 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
 
     OrdinalCommonAxisBody.prototype.render = function(selection) {
         this._selection = selection;
+        var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
         selection.select("g." + AXIS_CLASS_NAMES.LINE_GROUP).remove();
         selection.select("g." + AXIS_CLASS_NAMES.TICK_GROUP).remove();
         selection.select("g." + AXIS_CLASS_NAMES.LABEL_GROUP).remove();
-
-        var additionalWidth = 0;
-        if(this._needExtened() && this._otherSize) {
-            additionalWidth = this.getAdditionalWidth();
+        var clippathid;
+        var clippathRect;
+        if(isAccEnable) {
+            var lineSize = this._properties.get('axisLine.size');
+            if(this._needExtened() && this._otherSize) {
+                this._additionalWidth = this.getAdditionalWidth();
+            }
+            clippathRect = {
+                width: this._size.width + 2 + this._additionalWidth,
+                height: this._size.height + 2 + lineSize / 2,
+                x: -1 - this._additionalWidth,
+                y: -1,
+                angle: 0
+            };
+            clippathid = ClippathUtil.drawClippath(d3.select(selection.node()),
+                clippathRect.width, clippathRect.height,
+                clippathRect.x, clippathRect.y);
+        } else {
+            var additionalWidth = 0;
+            if(this._needExtened() && this._otherSize) {
+                additionalWidth = this.getAdditionalWidth();
+            }
+            clippathid = ClippathUtil.drawClippath(d3.select(selection.node()),
+                this._size.width + 2 + additionalWidth, this._size.height + 2,
+                -1 - additionalWidth, -1);
         }
-        var clippathid = ClippathUtil.drawClippath(d3.select(selection.node()),
-            this._size.width + 2 + additionalWidth, this._size.height + 2, -1 - additionalWidth, -1);
+        
         selection.attr('clip-path', 'url(#' + clippathid + ')');
         var properties = this._properties.get();
 
@@ -40499,7 +41136,7 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
 
                 if (properties.label && properties.label.visible) {
                     this._labelGroupNode = selection.append("g").attr("class", AXIS_CLASS_NAMES.LABEL_GROUP);
-                    this._renderLabels(properties, layers, bound, position);
+                    this._renderLabels(properties, layers, bound, position, undefined, clippathRect);
                 }
             }
         }
@@ -40509,16 +41146,20 @@ define('sap/viz/chart/components/axis/sub/OrdinalCommonAxisBody',[
         }
     };
     
-    OrdinalCommonAxisBody.prototype._renderLabels = function(properties, layers, bound, position, rebuildUI) {
+    OrdinalCommonAxisBody.prototype._renderLabels = function(properties, layers, bound, position,
+        rebuildUI, clippathRect) {
         var envManager = this.runtime().envManager();
         if (envManager) {
             properties.textAnchor = envManager.textAnchor();
             properties.reverseDots = envManager.reverseDots();
         }
-
+        var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
+        var isInteractive = !this._properties.origin.get('interaction.nonInteractiveMode');
+        var lineSize = this._properties.get('axisLine.size');
         this._bodyRenderer.drawLabels(this._labelGroupNode, layers, bound, position,
             properties, this.runtime().effectManager(), this._needRowAxisOffset(), this._labelOffset, 
-            this._needExtened() ? this.getAdditionalWidth(): 0, rebuildUI);
+            this._needExtened() ? this.getAdditionalWidth(): 0, rebuildUI, isAccEnable && isInteractive, 
+            lineSize, clippathRect);
         
         if(this._bodyRenderer && this._bodyRenderer.applyLabelStyle){
             this._bodyRenderer.applyLabelStyle(this._labelGroupNode);
@@ -41850,7 +42491,8 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
     'sap/viz/framework/common/util/ObjectUtils',
     'sap/viz/framework/common/util/FiscalUtil',
     "sap/viz/framework/common/util/GeometryUtils",
-    "sap/viz/framework/common/lang/LangManager"
+    "sap/viz/framework/common/lang/LangManager",
+    "sap/viz/framework/common/util/ACCStyleUtils"
 ], function (oo,
     TimeUtil,
     TypeUtils,
@@ -41868,7 +42510,8 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
     ObjectUtils,
     FiscalUtil,
     GeometryUtils,
-    langManager) {
+    langManager,
+    ACCStyleUtils) {
 
     function defaultRenderer(config) {
         var text = SVG.create("text");
@@ -42268,6 +42911,8 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
     };
 
     DataLabels.prototype._setDataLabelColor = function(item, range, backgroundColor, color, referColor) {
+        var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+        var outOfDataPoint, backColor, fill, textColor;
         if(!color || range === 'outside'){
             //dataLabelColor may need to be calculated.
             //check if dataLabel "covers" dataPoint.
@@ -42281,20 +42926,59 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
                 backColor = (outOfDataPoint ? backgroundColor : referColor) || "#000000";
             }
             if(backColor){
-                color = ColorUtil.getDataLabelColor(backColor);
-                var fill = this.runtime().effectManager().register({
-                    fillColor: color
-                });
+                fill = null;
+                if (!item.fillName) {
+                    item.fillName = ACCStyleUtils.getNameByColor(backColor);
+                }
+                if (enableAccUpdates && !outOfDataPoint) {
+                    textColor = ACCStyleUtils.getTextColor(item.fillName);
+                    fill = textColor;
+                    DataLabels.prototype._setTextShadow(item, item.fillName);
+                } else {
+                    color = ColorUtil.getDataLabelColor(backColor);
+                    fill = this.runtime().effectManager().register({
+                        fillColor: color
+                    });
+                }
                 item.node.setAttribute("fill", fill);
             }
+        } else if (color && enableAccUpdates) {
+            // only areaDataLabels need to check if the data label is out of the data point
+            if (this.constructor.name === 'AreaDataLabels') {
+            // use this maybe is AreaDataLabels, not DataLabels.
+            // AreaDataLabels.isDataLabelOutOfDataPoint return false
+            // so we need to check if the data label is out of the data point.
+                var selfProto = DataLabels.prototype;
+                outOfDataPoint = selfProto.isDataLabelOutOfDataPoint(item.node, item);
+                if (outOfDataPoint) {
+                    fill = item.fillName ? item.fillName : referColor;
+                    textColor = ACCStyleUtils.getTextColor(fill);
+                    if (textColor) {
+                        item.node.setAttribute("fill", textColor);
+                    }
+                }
+                selfProto._setTextShadow(item, fill);
+            }
+        }
+    };
+
+    DataLabels.prototype._setTextShadow = function(item, fill) {
+        var textShadow = ACCStyleUtils.getTextShadowStyle(fill);
+        if (textShadow) {
+            item.node.firstChild.setAttribute("style", 'text-shadow: ' + textShadow + ';');
         }
     };
 
     DataLabels.prototype.updateColor = function(dataLabelInfos, backgroundColor) {
         var dataLabelColor = this._properties.get('style.color');
         var range = this._properties.get("style.colorRange");
+        var rules = this._properties.origin.get('plotArea.dataPointStyle') &&
+        this._properties.origin.get('plotArea.dataPointStyle').rules || [];
         for (var iG = 0; iG < dataLabelInfos.length; iG++) {
             var item = dataLabelInfos[iG];
+            if (rules.length === item.length) {
+                item.fillName = rules[iG].properties && rules[iG].properties.color;
+            }
             if (item.node) {
                 this._setDataLabelColor(item, range, backgroundColor, dataLabelColor, item.referColor);
             }
@@ -42681,7 +43365,7 @@ define('sap/viz/chart/components/datalabels/DataLabels',[
                         step = Math.ceil((isDistributeByHeight ? labelBBox.height : labelBBox.width)/dPLength);
                         if (step === 0) {
                             break;
-                        } 
+                        }
                     }
                 }
             }
@@ -48079,7 +48763,8 @@ define('sap/viz/chart/components/plots/BasePlot',[
     "sap/viz/framework/interaction/utils/PlotZoomUtils",
     "sap/viz/chart/components/util/ZoomUtil",
     "sap/viz/chart/components/util/ColorUtil",
-    'sap/viz/framework/common/util/TimeUtil'
+    'sap/viz/framework/common/util/TimeUtil',
+    'sap/viz/framework/common/util/ACCStyleUtils'
 ], function Setup(
     oo,
     ObjectUtils,
@@ -48104,7 +48789,8 @@ define('sap/viz/chart/components/plots/BasePlot',[
     PlotZoomUtils,
     ZoomUtil,
     ColorUtil,
-    TimeUtil
+    TimeUtil,
+    ACCStyleUtils
 ) {
     var CSSCLASS = Constants.CSS.CLASS;
 
@@ -48662,7 +49348,7 @@ define('sap/viz/chart/components/plots/BasePlot',[
         var wrapper = SVG.create("g", selection);
         var mainNode = SVG.create("g", wrapper);
         mainNode.setAttribute("class", "v-plot-main");
-        mainNode.setAttribute('role', 'list');
+        mainNode.setAttribute('role', 'listbox');
         if (enableClipPath && !this._notNeedClippath) {
             wrapper.setAttribute("clip-path", "url(#" + clipPathId + ")");
         }
@@ -49115,11 +49801,33 @@ define('sap/viz/chart/components/plots/BasePlot',[
                 config.matchSemantic = true;
             }
 
-            if (result.properties.stroke) {
-                config.graphic.stroke = result.properties.stroke;
+            var excludeChart = ['info/treemap', 'info/pie', 'info/heatmap', 'info/donut'];
+            var isExcludedChartType = false;
+            if(excludeChart.indexOf(this._semanticMgr._chartType) >= 0){
+                isExcludedChartType = true;
             }
-            if (result.properties.strokeWidth) {
-                config.graphic.strokeWidth = result.properties.strokeWidth;
+            var enableAccUpdates = this._properties.origin.get('interaction.enableAccUpdates') || false;
+
+            if (enableAccUpdates && !isExcludedChartType) {
+                var theme = ACCStyleUtils.getTheme(config.effectManager._template.name);
+                if (this._checkColorContrast(config, theme)) {
+                    if (result.properties.stroke) {
+                        config.graphic.stroke = result.properties.stroke;
+                    }
+                    if (result.properties.strokeWidth) {
+                        config.graphic.strokeWidth = result.properties.strokeWidth;
+                    }
+                } else {
+                    config.graphic.stroke = ACCStyleUtils.getBorderColor(result.properties.color);
+                    config.graphic.strokeWidth = ACCStyleUtils.getBorderWidth();
+                }
+            } else {
+                if (result.properties.stroke) {
+                    config.graphic.stroke = result.properties.stroke;
+                }
+                if (result.properties.strokeWidth) {
+                    config.graphic.strokeWidth = result.properties.strokeWidth;
+                }
             }
         }
 
@@ -49127,6 +49835,23 @@ define('sap/viz/chart/components/plots/BasePlot',[
         return config;
     };
 
+    BasePlot.prototype._checkColorContrast = function (config, theme) {
+        if (!config.graphic.fill) {
+            return;
+        }
+        var textVisible = this._properties.get("dataLabel.visible");
+        var chartType = this._runtime._semanticMgr._chartType;
+        var threshold = ACCStyleUtils.getThreshold(theme, chartType, textVisible);
+        var backgroundColor = this._getBackgroundColor();
+        var fillColor = config.graphic.fill;
+
+        if (backgroundColor && fillColor) {
+            var ratioObj = ColorUtil.checkColorContrast(backgroundColor, fillColor, threshold);
+            return ratioObj.meetsThreshold;
+        }
+        return false;
+    };
+
     BasePlot.prototype._getColor = function(data) {
         var color = null;
         if (this._data.color2 && data.color2) {
@@ -52700,6 +53425,7 @@ define('sap/viz/chart/behavior/config/DataPointBehaviorConfigForBar',[
             "supportedChartTypes": barType2
         },
         "handler": function(event, service) {
+            var isAccEnable = service.getProperties().get("interaction.enableAccUpdates");
             service.fireEvent(event, true);
             service._getDecorationLayer().clear();
             var gray = event.data.isGray;
@@ -55205,7 +55931,7 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                 config = configs[i];
                 position = positions[i];
                 if (i === 0) {
-                    x0 = position.x;
+                    x0 = position.x; 
                     y0 = position.y;
                     x1 = x0 + config.graphic.width;
                     y1 = y0 + config.graphic.height;
@@ -55302,11 +56028,7 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                     if (cpRenderer.update) {
                         if (config.graphic.pattern === "noFill") {
                             config.path = this._generatePath(config.graphic, cfg);
-                            if (config.isZero) {
-                                config.graphic.pathStrokeWidth = 0;
-                            } else {
-                                config.graphic.pathStrokeWidth = 3;
-                            }
+                            config.graphic.pathStrokeWidth = config.isZero ? 0 : 3;
                         }
                         cpRenderer.update(dataPointG, config);
                     }
@@ -55317,11 +56039,7 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                 } else {
                     if (config.graphic.pattern === "noFill") {
                         config.path = this._generatePath(config.graphic, cfg);
-                        if (config.isZero) {
-                            config.graphic.pathStrokeWidth = 0;
-                        } else {
-                            config.graphic.pathStrokeWidth = 3;
-                        }
+                        config.graphic.pathStrokeWidth = config.isZero ? 0 : 3;
                         clonedGraphic = ObjectUtils.clone(config.graphic);
                         delete clonedGraphic.bgColor;
                         delete clonedGraphic.drawingEffect;
@@ -55330,7 +56048,7 @@ define('sap/viz/chart/components/plots/StackedColumnPlot',[
                     }
                     node = cpRenderer(config);
                     if (clonedGraphic) {
-                        shadowNode = cpRenderer({graphic: clonedGraphic});
+                        shadowNode = cpRenderer({ graphic: clonedGraphic });
                     }
 
                     dataPointG = SVG.create("g");
@@ -61333,6 +62051,7 @@ define('sap/viz/chart/components/axis/renderer/TimeBodyRenderer',[
     var LABEL_OFFSET = 11;
     var AXIS_CLASS_NAMES = Constants.CSS.CLASS.AXIS;
     var AXIS_INTERACTION_CLASS_NAMES = 'v-label-interaction';
+    var MIN_ELEMENT_SIZE = Constants.MIN_INTERACTIVE_ELEMENT_SIZE;
 
     var TICK_SIZE = 5;
     var LONG_TICK_SIZE = 10;
@@ -61427,6 +62146,8 @@ define('sap/viz/chart/components/axis/renderer/TimeBodyRenderer',[
         var labelClass = AXIS_CLASS_NAMES.LABEL + " " + AXIS_CLASS_NAMES.MORPHABLE_LABEL + " " +
                 AXIS_CLASS_NAMES.LABEL_BACKWORD;
         var styles = props.get('label.style');
+        var isInteractive = !props.origin.get('interaction.noninteractiveMode');
+        var isAccEnable = props.origin.get('interaction.enableAccUpdates');
         var offset = TextUtils.getTextBaselineOffset(styles);
         var fill = effectManager.register({
             fillColor: styles.color
@@ -61501,7 +62222,13 @@ define('sap/viz/chart/components/axis/renderer/TimeBodyRenderer',[
                         LABEL_OFFSET + layer.height - offset;
                 fillText(text, layer, fillUpperLevel);
                 text.setAttribute("x", layer.left - scrollOffset);
-                text.setAttribute("y", baseLayerTop);
+                var isMinimumSize = layer.height + 2 * HOVERSHADOW_PADDING < MIN_ELEMENT_SIZE;
+                var textPosInRect = (MIN_ELEMENT_SIZE - layer.height / 1.2) / 2;
+                if(isAccEnable && isInteractive && isMinimumSize){
+                    text.setAttribute("y", textPosInRect + baseLayerTop);
+                }else{
+                    text.setAttribute("y", baseLayerTop);
+                }
                 text.setAttribute("timelabel-id", layer.id);
 
                 var x, rectWidth;
@@ -61513,14 +62240,26 @@ define('sap/viz/chart/components/axis/renderer/TimeBodyRenderer',[
                         rectWidth = layer.width + 2 * HOVERSHADOW_PADDING;
                         var textSize = TextUtils.fastMeasure(layer.text, fontSize, fontWeight, fontFamily);
                         rect.setAttribute("x", x);
-                        rect.setAttribute("y", baseLayerTop + textSize.y - HOVERSHADOW_PADDING);
+                        if(isAccEnable && isInteractive && isMinimumSize){
+                            rect.setAttribute("y", LABEL_OFFSET);
+                            rect.setAttribute("height", MIN_ELEMENT_SIZE);
+                        }else{
+                            rect.setAttribute("y", baseLayerTop + textSize.y - HOVERSHADOW_PADDING);
+                            rect.setAttribute("height", layer.height + 2 * HOVERSHADOW_PADDING);
+                        }
                         rect.setAttribute("width", rectWidth);
-                        rect.setAttribute("height", layer.height + 2 * HOVERSHADOW_PADDING);
                     }
                     else if(layer.hasOwnProperty('rectX')){
                         x = layer.rectX - scrollOffset;
                         rect.setAttribute("x", x);
-                        rect.setAttribute("y", 1);
+                        
+                        if(isAccEnable && isInteractive && isMinimumSize){
+                            rect.setAttribute("y", LABEL_OFFSET);
+                            rect.setAttribute("height", MIN_ELEMENT_SIZE);
+                        }else{
+                            rect.setAttribute("y", 1);
+                            rect.setAttribute("height", baseLayerTop + HOVERSHADOW_PADDING);
+                        }
                         rectWidth = layer.rectWidth;
                         if(x > width) {
                             rectWidth = 0;
@@ -61529,7 +62268,6 @@ define('sap/viz/chart/components/axis/renderer/TimeBodyRenderer',[
                             rectWidth = width - x;
                         }
                         rect.setAttribute("width", rectWidth);
-                        rect.setAttribute("height", baseLayerTop + HOVERSHADOW_PADDING);
                     }
                 }
                 
@@ -61557,6 +62295,8 @@ define('sap/viz/chart/components/axis/renderer/TimeBodyRenderer',[
                     baseLayerTop = isTop ? height - LABEL_OFFSET - offset :
                         LABEL_OFFSET + d.height - offset;
                     var heightOffset = d.height * (i + 1) * (isTop ? -1 : 1);
+                    var isMinimumSize = d.height < MIN_ELEMENT_SIZE;
+                    var textPosInRect = (MIN_ELEMENT_SIZE - layer.height / 1.2) / 2;
                     var upperLevelRect = this.querySelector("." +  AXIS_CLASS_NAMES.BACKGROUND_RECT);
                     if(layer.hasOwnProperty('rectX')) {                            
                         upperLevelRect = SVG.create("rect");
@@ -61576,9 +62316,14 @@ define('sap/viz/chart/components/axis/renderer/TimeBodyRenderer',[
                             rectWidth = width - x;
                         }
                         upperLevelRect.setAttribute("x", x);
-                        upperLevelRect.setAttribute("y", (baseLayerTop + d.height * i * (isTop ? -1 : 1)) + 3);
+                        if(isAccEnable && isInteractive && isMinimumSize){
+                            upperLevelRect.setAttribute("y", (i + 1) * MIN_ELEMENT_SIZE + LABEL_OFFSET);
+                            upperLevelRect.setAttribute("height", MIN_ELEMENT_SIZE);
+                        }else{
+                            upperLevelRect.setAttribute("y", (baseLayerTop + d.height * i * (isTop ? -1 : 1)) + 3);
+                            upperLevelRect.setAttribute("height", d.height);
+                        }
                         upperLevelRect.setAttribute("width", rectWidth);
-                        upperLevelRect.setAttribute("height", d.height);
                     }
 
                     var upperLevelText = that.querySelector(".v-label-upperLevel:nth-child(" + (i + 2) + ")");
@@ -61591,7 +62336,11 @@ define('sap/viz/chart/components/axis/renderer/TimeBodyRenderer',[
                     upperLevelText.setAttribute("timelabel-id", layer.id);
                     upperLevelText.setAttribute("fill", fillUpperLevel);
                     upperLevelText.setAttribute("x", d.left - scrollOffset);
-                    upperLevelText.setAttribute("y", baseLayerTop + heightOffset);
+                    if(isAccEnable && isInteractive && isMinimumSize){
+                        upperLevelText.setAttribute("y", textPosInRect + baseLayerTop + (i + 1) * MIN_ELEMENT_SIZE);
+                    }else{
+                        upperLevelText.setAttribute("y", baseLayerTop + heightOffset);
+                    }
                 });
                 
             } else {
@@ -64717,6 +65466,7 @@ define('sap/viz/chart/components/axis/sub/TimeAxisBody',[
 
     var AXIS_CLASS_NAMES = Constants.CSS.CLASS.AXIS;
     var TIME_LEVEL = Constants.TIME_LEVEL;
+    var MIN_ELEMENT_SIZE = Constants.MIN_INTERACTIVE_ELEMENT_SIZE;
 
     var EASTERN_LANGUAGE = ["ja", "zh_CN", "zh_TW", "ko"];
 
@@ -65609,6 +66359,8 @@ define('sap/viz/chart/components/axis/sub/TimeAxisBody',[
             var scale = this._data;
             var range = scale.getRange();
             var rangeLong = Math.abs(range[0] - range[1]);
+            var isAccEnable = props.origin.get('interaction.enableAccUpdates');
+            var isInteractive = !props.origin.get('interaction.noninteractiveMode');
             var spacing = LABEL_OFFSET;
             var viewportWidth = refSize ? refSize.width : (this._size.width || rangeLong);
             var result = this._getTicksAndLabels(rangeLong, viewportWidth);
@@ -65617,7 +66369,13 @@ define('sap/viz/chart/components/axis/sub/TimeAxisBody',[
 
                 if (props.get('label.visible')) {
                     var labelStyle = this._properties.get('label.style');
-                    var labelHeight = this._measureTextSize('1', labelStyle).height;
+                    var labelHeight;
+                    var isMinimumSize = this._measureTextSize('1', labelStyle).height < MIN_ELEMENT_SIZE;
+                    if(isAccEnable && isInteractive && isMinimumSize){
+                        labelHeight = MIN_ELEMENT_SIZE;
+                    }else{
+                        labelHeight = this._measureTextSize('1', labelStyle).height;
+                    }
                     spacing += labelHeight * Math.max(result.labels.layerCount, 2);
                 }
             }
@@ -75465,6 +76223,11 @@ define('sap/viz/chart/components/plots/PiePlot',[
 
     oo.extend(PiePlot, BasePlot);
 
+    PiePlot.prototype._buildWrapperConfig = function (data, position, context, option) {
+        option = option || {};
+        return PiePlot.superclass._buildWrapperConfig.call(this, data, position, context, option);
+    };
+
     PiePlot.prototype.destroy = function() {
         PiePlot.superclass.destroy.call(this);
         this._dataPointRenderer = null;
@@ -76365,13 +77128,15 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
     'sap/viz/chart/components/util/TextUtils',
     'sap/viz/chart/components/util/ColorUtil',
     "sap/viz/framework/common/util/NameColorUtils",
-    'sap/viz/framework/common/util/Constants'
+    'sap/viz/framework/common/util/Constants',
+    'sap/viz/framework/common/util/ACCStyleUtils'
 ], function(SVG,
     DataGraphics,
     TextUtils,
     ColorUtil,
     NameColorUtils,
-    Constants) {
+    Constants,
+    ACCStyleUtils) {
     var textLength = function(config) {
         var data = config.data;
         var labelStyle = config.styles;
@@ -76545,6 +77310,7 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
         var color, fill;
         var d = config.data;
         var bgColor = NameColorUtils.convertColor(d.color) || '0x000000';
+        var enableAcc = config.enableAcc;
         var props = config.props;
         if (props.dimensionLabel.style.color) {
             color = props.dimensionLabel.style.color;
@@ -76552,12 +77318,16 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
             if (config.isLeafItem) {
                 if (props.dataLabel.visible && props.dataLabel.style.color) {
                     if(props.dataLabel.style.colorRange === 'outside'){
-                        color = ColorUtil.getDataLabelColor(bgColor);
+                        color = enableAcc ? ACCStyleUtils.getTextColor(bgColor) 
+                        :
+                        ColorUtil.getDataLabelColor(bgColor);
                     }else{
                         color = props.dataLabel.style.color;
                     }
                 } else {
-                    color = ColorUtil.getDataLabelColor(bgColor);
+                    color = enableAcc ? ACCStyleUtils.getTextColor(bgColor) 
+                    :
+                    ColorUtil.getDataLabelColor(bgColor);
                 }
             } else {
                 color = textColor(config);
@@ -76566,10 +77336,17 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
         return color;
     };
 
+    var getTextShadow = function(config) {
+        var d = config.data;
+        var bgColor = NameColorUtils.convertColor(d.color) || '0x000000';
+        return ACCStyleUtils.getTextShadowStyle(bgColor);
+    };
+
     var treeMapDimensionLabelRenderer = function(config) {
         var label = SVG.create("text");
         var labelStyle = config.styles;
         var fill = labelStyle.color ? labelStyle.color : getLabelColor(config);
+        var textShadow = labelStyle.textShadow ? labelStyle.textShadow : getTextShadow(config);
         label.setAttribute("fill", fill);
         label.setAttribute("font-size", labelStyle.fontSize);
         label.setAttribute("stroke", "none");
@@ -76578,6 +77355,9 @@ define('sap/viz/chart/components/renderers/TreeMapDimensionLabelRenderer',["sap/
         label.setAttribute("font-family", labelStyle.fontFamily);
         label.setAttribute('fill-opacity', 1);
         label.setAttribute('aria-hidden','true');
+        if (config.enableAcc) {
+            label.setAttribute('style', "text-shadow:" + textShadow + ";");
+        }
         label.value = config.data.label;
         label.textContent = getText(config);
         locateLabels(label, config);
@@ -77951,12 +78731,15 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
                     var fontFamily =  LABEL_STYLE["fontFamily"];
                     var fontStyle = LABEL_STYLE["fontStyle"];
                     var fontColor = LABEL_STYLE["color"];
+                    var textShadow = LABEL_STYLE["textShadow"];
+                    var enableAcc = _self._properties.origin.get('interaction.enableAccUpdates');
                     var styles = {
                         fontSize : fontSize,
                         fontWeight : fontWeight,
                         fontFamily : fontFamily,
                         fontStyle : fontStyle,
-                        color: fontColor
+                        color: fontColor,
+                        textShadow: textShadow
                     };
                     var context = {
                         ctx: ctx.ctx,
@@ -77967,7 +78750,8 @@ define('sap/viz/chart/components/plots/treemap/TreeMapPlot',[
                         isLeafItem: isLeafItem,
                         textAnchor: textAnchor,
                         borderWidth: _self._borderWidth,
-                        padding: padding
+                        padding: padding,
+                        enableAcc: enableAcc
                     };
                     var label = dimensionLabelRenderer(context, TreeMapDimensionLabelRenderer.expose);
                     if(label) {
@@ -78634,6 +79418,9 @@ define(
         };
 
         MBCLegend.prototype.render = function (selection, needRender) {
+            
+            var isAccEnable = this._properties.origin.get('interaction.enableAccUpdates');
+            var isInteractive = !this._properties.origin.get('interaction.noninteractiveMode');
             if(this.isInSemanticMode()){
                 selection.selectAll('g.v-mbc-content').remove();
                 ColorLegend.prototype.render.apply(this, arguments);
@@ -78901,6 +79688,19 @@ define(
                 }
 
                 var infos = calMarkerAndTextInfo(labelsData);
+                var isMinimumSizeInHorizontal = (that._orientation === 'top' || 
+                    that._orientation === 'bottom') && 
+                    that._mbcLA_markerSize.width < 25;
+                var isMinimumSizeInVertical = (that._orientation === 'left' || 
+                    that._orientation === 'right') && 
+                    that._mbcLA_markerSize.height < 25;
+                if (isAccEnable && isInteractive){
+                    if (isMinimumSizeInHorizontal || isMinimumSizeInVertical
+                    ) {
+                        selection.selectAll('g.v-content').remove();
+                        return this;
+                    }
+                }
                 var makerWrapper = wrap.selectAll('rect.v-marker').data(infos.marker);
                 makerWrapper.exit().remove();
                 makerWrapper.enter().append('rect');
@@ -79347,7 +80147,6 @@ define(
                     }
                 }
             }
-
             if (this._orientation === 'top' || this._orientation === 'bottom') {
                 this._mbcLA_markerSize.width = h;
                 this._mbcLA_markerSize.height = H_MARKERSIZE.height;
@@ -80722,6 +81521,7 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
     "sap/viz/framework/common/util/UADetector",
     'sap/viz/framework/common/util/DataUtils',
     "sap/viz/chart/components/util/ColorUtil",
+    "sap/viz/framework/common/util/ACCStyleUtils",
     "sap/viz/chart/components/accessibility/ChartComponentNavigatorFactory",
     "sap/viz/chart/components/accessibility/HeatMapDataPointNavigator",
     "sap/viz/chart/components/util/ChartConstants",
@@ -80743,6 +81543,7 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
         UADetector,
         DataUtils,
         ColorUtil,
+        ACCStyleUtils,
         ChartNavigator,
         DataPointNavigator,
         ChartConstants) {
@@ -80999,7 +81800,8 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
             dataLabelColor: this._properties.get("dataLabel.style.color"),
             ellipsisText: this._ellipsisText,
             ellipsisOptions: ellipsisOptions,
-            colorRange : this._properties.get("dataLabel.style.colorRange")
+            colorRange : this._properties.get("dataLabel.style.colorRange"),
+            enableAccUpdates: this._properties.origin.get('interaction.enableAccUpdates') || false
         };
 
 
@@ -81066,6 +81868,14 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
         if (!fontColor) {
             fontColor = ColorUtil.getDataLabelColor(context.background);
         }
+
+        var enableAccUpdates = context.enableAccUpdates;
+        var textShadow = null;
+        if (enableAccUpdates) {
+            var referColor = context.referColor || context.background;
+            fontColor = ACCStyleUtils.getTextColor(referColor);
+            textShadow = ACCStyleUtils.getTextShadowStyle(referColor);
+        }
         
         fontSize = TextUtils.validateFontStyle(fontSize);
         fontWeight = TextUtils.validateFontStyle(fontWeight);
@@ -81082,6 +81892,9 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
             styleStr += "font-family:" + fontFamily + ";";
             styleStr += "font-style:" + fontStyle + ";";
             styleStr += "fill:" + fontColor + ";";
+            if (textShadow) {
+                styleStr += "text-shadow: " + textShadow + ";";
+            }
 
             //set dimension label text in ellipsis mode if it is too long
             var textContent = null;
@@ -81116,13 +81929,15 @@ define('sap/viz/chart/components/plots/HeatMapPlot',[
                 }
             }
 
-
-            d3.select(textNode)
+            var selection = d3.select(textNode)
                 .attr("font-size", fontSize)
                 .attr("font-weight", fontWeight)
                 .attr("font-family", fontFamily)
                 .attr("font-style", fontStyle)
                 .attr("fill", fontColor);
+            if (textShadow) {
+                selection.style("text-shadow", textShadow);
+            }
         }
         return textNode;
     }