@syncfusion/ej2-gantt 19.4.56 → 20.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.56
+*  version : 20.1.47
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-gantt@*",
-  "_id": "@syncfusion/ej2-gantt@19.4.55",
+  "_id": "@syncfusion/ej2-gantt@19.10.10",
   "_inBundle": false,
-  "_integrity": "sha512-gZWXMRL9cYEDUGsm8sokogX51ecVxkU/WFkb4+yH88KmjX/hb2jQn1SWtweE/UEIe310KERxFu9fxtBlBwbIIA==",
+  "_integrity": "sha512-kJWTMNP/9/2FtwxZ6khAoLriF7D+LPHkkeCwBLOYy2+QaggPgOyqD6Kxf+EUvIcy88okK5d+aRAVfm35iY0dzg==",
   "_location": "/@syncfusion/ej2-gantt",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-gantt",
     "/@syncfusion/ej2-vue-gantt"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-gantt/-/ej2-gantt-19.4.55.tgz",
-  "_shasum": "63cf81d6fdc34d12a5659d652bf45a03a70186cb",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-gantt/-/ej2-gantt-19.10.10.tgz",
+  "_shasum": "8340614ed1ccd8ec22e6082223b54f2226d905d1",
   "_spec": "@syncfusion/ej2-gantt@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -35,19 +35,19 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.55",
-    "@syncfusion/ej2-calendars": "~19.4.56",
-    "@syncfusion/ej2-data": "~19.4.54",
-    "@syncfusion/ej2-dropdowns": "~19.4.56",
-    "@syncfusion/ej2-grids": "~19.4.56",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-layouts": "~19.4.52",
-    "@syncfusion/ej2-lists": "~19.4.55",
-    "@syncfusion/ej2-navigations": "~19.4.56",
-    "@syncfusion/ej2-popups": "~19.4.53",
-    "@syncfusion/ej2-richtexteditor": "~19.4.56",
-    "@syncfusion/ej2-treegrid": "~19.4.56"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-calendars": "~20.1.47",
+    "@syncfusion/ej2-data": "~20.1.47",
+    "@syncfusion/ej2-dropdowns": "~20.1.47",
+    "@syncfusion/ej2-grids": "~20.1.47",
+    "@syncfusion/ej2-inputs": "~20.1.47",
+    "@syncfusion/ej2-layouts": "~20.1.47",
+    "@syncfusion/ej2-lists": "~20.1.47",
+    "@syncfusion/ej2-navigations": "~20.1.47",
+    "@syncfusion/ej2-popups": "~20.1.47",
+    "@syncfusion/ej2-richtexteditor": "~20.1.47",
+    "@syncfusion/ej2-treegrid": "~20.1.47"
   },
   "deprecated": false,
   "description": "Essential JS 2 Gantt Component",
@@ -75,6 +75,6 @@
     "url": "git+https://github.com/syncfusion/ej2-gantt.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.56",
+  "version": "20.1.47",
   "sideEffects": false
 }

package/src/gantt/actions/cell-edit.js

@@ -48,7 +48,8 @@ var CellEdit = /** @class */ (function () {
             args.cancel = true;
             return;
         }
-        if (data.hasChildRecords && (field === taskSettings.endDate || field === taskSettings.duration
+        if (data.hasChildRecords && ((field === taskSettings.endDate && ((!isNullOrUndefined(data['isManual']) &&
+            data['isManual'] == false) || this.parent.taskMode == 'Auto')) || field === taskSettings.duration
             || field === taskSettings.dependency || field === taskSettings.progress
             || field === taskSettings.work || field === 'taskType')) {
             args.cancel = true;

package/src/gantt/actions/dialog-edit.js

@@ -1537,7 +1537,8 @@ var DialogEdit = /** @class */ (function () {
                 disabled = true;
             }
             if (this.editedRecord.hasChildRecords) {
-                if (column.field === this.parent.taskFields.endDate || column.field === this.parent.taskFields.duration ||
+                if ((column.field === this.parent.taskFields.endDate && ((!isNullOrUndefined(this.editedRecord['isManual']) &&
+                    this.editedRecord['isManual'] == false) || this.parent.taskMode == 'Auto')) || column.field === this.parent.taskFields.duration ||
                     column.field === this.parent.taskFields.progress || column.field === this.parent.taskFields.work ||
                     column.field === 'taskType') {
                     disabled = true;

package/src/gantt/actions/edit.js

@@ -2356,14 +2356,20 @@ var Edit = /** @class */ (function () {
             }
             else {
                 childIndex = parentItem.childRecords.length;
-            } /*Child collection update*/
+            }
+            /*Child collection update*/
             parentItem.childRecords.splice(childIndex, 0, record);
             if ((this.parent.dataSource instanceof DataManager &&
                 isNullOrUndefined(parentItem.taskData[this.parent.taskFields.parentID])) ||
                 !isNullOrUndefined(this.parent.dataSource)) {
                 var child = this.parent.taskFields.child;
                 if (parentItem.taskData[child] && parentItem.taskData[child].length > 0) {
-                    parentItem.taskData[child].splice(childIndex, 0, record.taskData);
+                    if (rowPosition === 'Above' || rowPosition === 'Below') {
+                        parentItem.taskData[child].splice(childIndex, 0, record.taskData);
+                    }
+                    else {
+                        parentItem.taskData[child].push(record.taskData);
+                    }
                 }
                 else {
                     parentItem.taskData[child] = [];
@@ -2824,6 +2830,9 @@ var Edit = /** @class */ (function () {
         }
         this.addSuccess(args);
         args = this.constructTaskAddedEventArgs(cAddedRecord, args.modifiedRecords, 'add');
+        if (this.dialogModule.isAddNewResource && !this.parent.isEdit && this.parent.taskFields.work) {
+            this.parent.dataOperation.updateWorkWithDuration(cAddedRecord[0]);
+        }
         this.parent.trigger('actionComplete', args);
         if (this.dialogModule.dialog && !this.dialogModule.dialogObj.isDestroyed) {
             this.dialogModule.dialogObj.hide();

package/src/gantt/actions/rowdragdrop.js

@@ -249,33 +249,55 @@ var RowDD = /** @class */ (function () {
                         var data_1 = gObj.flatData;
                         var startIndex = void 0;
                         var endIndex = void 0;
+                        var ganttData_1 = this_1.parent.dataSource;
+                        var uniqueTaskID_1 = this_1.parent.taskFields.id;
                         if (draggedRecord.index < droppedRecord.index) {
                             startIndex = draggedRecord.index;
-                            endIndex = droppedRecord.index;
+                            var _loop_2 = function (i_1) {
+                                var currentData = this_1.parent.currentViewData.filter(function (e) {
+                                    return e[uniqueTaskID_1] === ganttData_1[i_1][uniqueTaskID_1];
+                                })[0];
+                                if (currentData.index > droppedRecord.index) {
+                                    endIndex = currentData.index;
+                                    return "break";
+                                }
+                            };
+                            for (var i_1 = 0; i_1 < ganttData_1.length; i_1++) {
+                                var state_2 = _loop_2(i_1);
+                                if (state_2 === "break")
+                                    break;
+                            }
                         }
                         else {
                             startIndex = droppedRecord.index;
-                            var rootChildRecord = draggedRecord;
-                            if (rootChildRecord.childRecords.length > 0) {
-                                do {
-                                    rootChildRecord = rootChildRecord.childRecords[rootChildRecord.childRecords.length - 1];
-                                } while (rootChildRecord.childRecords.length > 0);
+                            var _loop_3 = function (i_2) {
+                                var currentData = this_1.parent.currentViewData.filter(function (e) {
+                                    return e[uniqueTaskID_1] === ganttData_1[i_2][uniqueTaskID_1];
+                                })[0];
+                                if (currentData.index > draggedRecord.index) {
+                                    endIndex = currentData.index;
+                                    return "break";
+                                }
+                            };
+                            for (var i_2 = 0; i_2 < ganttData_1.length; i_2++) {
+                                var state_3 = _loop_3(i_2);
+                                if (state_3 === "break")
+                                    break;
                             }
-                            endIndex = rootChildRecord.index;
                         }
-                        var _loop_2 = function (i_1) {
-                            if (!isNullOrUndefined(data_1[i_1])) {
-                                data_1[i_1].index = i_1;
-                                if (!isNullOrUndefined(data_1[i_1].parentItem)) {
+                        var _loop_4 = function (i_3) {
+                            if (!isNullOrUndefined(data_1[i_3])) {
+                                data_1[i_3].index = i_3;
+                                if (!isNullOrUndefined(data_1[i_3].parentItem)) {
                                     var updatedParent = data_1.filter(function (e) {
-                                        return e.uniqueID === data_1[i_1].parentUniqueID;
+                                        return e.uniqueID === data_1[i_3].parentUniqueID;
                                     })[0];
-                                    data_1[i_1].parentItem.index = updatedParent.index;
+                                    data_1[i_3].parentItem.index = updatedParent.index;
                                 }
                             }
                         };
-                        for (var i_1 = startIndex; i_1 <= endIndex; i_1++) {
-                            _loop_2(i_1);
+                        for (var i_3 = startIndex; i_3 <= endIndex; i_3++) {
+                            _loop_4(i_3);
                         }
                     }
                     gObj.rowDragAndDropModule.refreshDataSource();

package/src/gantt/base/date-processor.js

@@ -282,7 +282,6 @@ var DateProcessor = /** @class */ (function () {
             tDuration = this.parent.editModule.taskbarEditModule.sumOfDuration(ganttProperties.segments);
         }
         else {
-            // eslint-disable-next-line
             if (!isNullOrUndefined(ganttProperties.startDate) && !isNullOrUndefined(ganttProperties.endDate) &&
                 (ganttProperties.startDate).getTime() === (ganttProperties.endDate).getTime() && !isNullOrUndefined(ganttData.taskData[this.parent.taskFields.milestone])) {
                 tDuration = 1;

package/src/gantt/base/gantt-chart.js

@@ -16,6 +16,7 @@ var GanttChart = /** @class */ (function () {
         this.chartTimelineContainer = null;
         this.rangeViewContainer =
             createElement('div', { className: cls.rangeContainer });
+        this.rangeViewContainer.setAttribute("role", "RangeContainer");
         this.virtualRender = new VirtualContentRenderer(this.parent);
         this.addEventListener();
     }
@@ -170,6 +171,7 @@ var GanttChart = /** @class */ (function () {
     GanttChart.prototype.renderTimelineContainer = function () {
         this.chartTimelineContainer =
             createElement('div', { className: cls.timelineHeaderContainer });
+        this.chartTimelineContainer.setAttribute("role", "TimelineHeader");
         this.chartElement.appendChild(this.chartTimelineContainer);
     };
     /**
@@ -221,8 +223,7 @@ var GanttChart = /** @class */ (function () {
             else {
                 this.chartBodyContent.style.height = contentElement['offsetHeight'] + 'px';
             }
-        }
-        //let element: HTMLElement = this.chartTimelineContainer.querySelector('.' + cls.timelineHeaderTableContainer);
+        } //let element: HTMLElement = this.chartTimelineContainer.querySelector('.' + cls.timelineHeaderTableContainer);
         this.chartBodyContent.style.width = formatUnit(this.parent.timelineModule.totalTimelineWidth);
         this.setVirtualHeight();
         this.parent.notify('updateHeight', {});
@@ -400,7 +401,7 @@ var GanttChart = /** @class */ (function () {
             var target = e.target;
             var isOnTaskbarElement = e.target.classList.contains(cls.taskBarMainContainer)
                 || closest(e.target, '.' + cls.taskBarMainContainer);
-            if (closest(target, '.e-gantt-parent-taskbar')) {
+            if (closest(target, '.e-gantt-parent-taskbar') && !this.parent.editSettings.allowEditing) {
                 this.chartExpandCollapseRequest(e);
             }
             else if (!isOnTaskbarElement && this.parent.autoFocusTasks) {
@@ -924,6 +925,10 @@ var GanttChart = /** @class */ (function () {
                 $target.classList.contains('e-headercell') || $target.closest('.e-segmented-taskbar')) {
                 e.preventDefault();
             }
+            if (isTab && $target.classList.contains('e-rowdragdrop')) {
+                this.parent.treeGrid.grid.notify('key-pressed', e);
+                return;
+            }
             if ($target.classList.contains('e-rowcell') && (nextElement && nextElement.classList.contains('e-rowcell')) ||
                 $target.classList.contains('e-headercell')) { // eslint-disable-line                                                                                                                                                                                                                                    
                 if (isTab) {
@@ -966,7 +971,7 @@ var GanttChart = /** @class */ (function () {
                     else {
                         this.manageFocus($target, 'remove', true);
                     }
-                    if (nextElement.classList.contains('e-rowcell')) {
+                    if (nextElement.classList.contains('e-rowcell') && $target.nextElementSibling) {
                         if (!$target.classList.contains('e-rowcell')) {
                             this.parent.treeGrid.grid.notify('key-pressed', e);
                             var fmodule = getValue('focusModule', this.parent.treeGrid.grid);

package/src/gantt/base/gantt.js

@@ -784,7 +784,7 @@ var Gantt = /** @class */ (function (_super) {
         gridHeight = 'calc(100% - ' + timelineContainer + 'px)';
         // eslint-disable-next-line
         this.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
-        if (!isNullOrUndefined(this.toolbarModule)) {
+        if (!isNullOrUndefined(this.toolbarModule) && !isNullOrUndefined(this.toolbarModule.element)) {
             this.splitterElement.style.height = 'calc(100% - ' + this.toolbarModule.element.offsetHeight + 'px)';
         }
         else {
@@ -1320,7 +1320,7 @@ var Gantt = /** @class */ (function (_super) {
      */
     Gantt.prototype.updateGridLineContainerHeight = function () {
         if (this.chartVerticalLineContainer) {
-            this.chartVerticalLineContainer.style.height = formatUnit(this.getContentHeight());
+            this.chartVerticalLineContainer.style.height = formatUnit(this.contentHeight);
         }
     };
     /**

package/src/gantt/base/splitter.js

@@ -60,6 +60,7 @@ var Splitter = /** @class */ (function () {
                         _this.splitterObject.paneSettings[1].size = null;
                         _this.splitterObject.paneSettings[1].size = _this.getSpliterPositionInPercentage(_this.splitterPreviousPositionChart);
                     }
+                    _this.parent.timelineModule.updateTimelineAfterZooming(_this.parent.timelineModule.timelineEndDate, true);
                     callBackPromise.resolve(splitterResizedArgs);
                 });
                 return callBackPromise;

package/src/gantt/base/tree-grid.js

@@ -92,6 +92,8 @@ var GanttTreeGrid = /** @class */ (function () {
     GanttTreeGrid.prototype.renderTreeGrid = function () {
         this.composeProperties();
         this.bindEvents();
+        var root = 'root';
+        this.parent.treeGrid[root] = this.parent[root] ? this.parent[root] : this.parent;
         this.parent.treeGrid.appendTo(this.treeGridElement);
         this.wireEvents();
     };
@@ -155,7 +157,7 @@ var GanttTreeGrid = /** @class */ (function () {
         var scrollWidth = this.getScrollbarWidth();
         var isMobile = /Android|Mac|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
         if (scrollWidth !== 0) {
-            content.style.cssText += 'width: calc(100% + ' + scrollWidth + 'px);';
+            content.style.cssText += 'width: calc(100% + ' + (scrollWidth + 1) + 'px);';
         }
         else {
             content.classList.add('e-gantt-scroll-padding');

package/src/gantt/renderer/chart-rows.js

@@ -28,7 +28,7 @@ var ChartRows = /** @class */ (function (_super) {
         _this.milestoneHeight = 0;
         _this.milesStoneRadius = 0;
         _this.baselineTop = 0;
-        _this.baselineHeight = 3;
+        _this.baselineHeight = 8;
         _this.touchLeftConnectorpoint = '';
         _this.touchRightConnectorpoint = '';
         _this.dropSplit = false;
@@ -111,7 +111,7 @@ var ChartRows = /** @class */ (function (_super) {
      * @private
      */
     ChartRows.prototype.getIndicatorNode = function (indicator) {
-        var templateString = '<label class="' + cls.label + ' ' + cls.taskIndicatorDiv + '"  style="line-height:'
+        var templateString = '<label class="' + cls.label + ' ' + cls.taskIndicatorDiv + '" role="LabelIndicator" style="line-height:'
             + (this.parent.rowHeight) + 'px;' +
             'left:' + this.getIndicatorleft(indicator.date) + 'px;"><i class="' + indicator.iconClass + '"></i> </label>';
         return this.createDivElement(templateString);
@@ -184,9 +184,9 @@ var ChartRows = /** @class */ (function (_super) {
                 }
                 else {
                     taskLabel = '<span class="' + cls.taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px; text-align:' + (this.parent.viewType === 'ResourceView' ? 'left;' : ';') +
-                        'display:' + (this.parent.viewType === 'ResourceView' ? 'inline-flex;' : ';') +
-                        'width:' + (this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : '') + 'px; height:' +
+                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'text-align: left;' : '') +
+                        +(this.parent.viewType === 'ResourceView' ? 'display:inline-flex;' : '') +
+                        +(this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : '') + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>';
                 }
             }
@@ -603,7 +603,7 @@ var ChartRows = /** @class */ (function (_super) {
      */
     ChartRows.prototype.getTaskBaselineNode = function () {
         var data = this.templateData;
-        var template = '<div class="' + cls.baselineBar + ' ' + '" style="margin-top:' + this.baselineTop +
+        var template = '<div class="' + cls.baselineBar + ' ' + '" role="BaselineBar" style="margin-top:' + this.baselineTop +
             'px;left:' + data.ganttProperties.baselineLeft + 'px;' +
             'width:' + data.ganttProperties.baselineWidth + 'px;height:' +
             this.baselineHeight + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + '"></div>';
@@ -617,9 +617,10 @@ var ChartRows = /** @class */ (function (_super) {
      */
     ChartRows.prototype.getMilestoneBaselineNode = function () {
         var data = this.templateData;
+        var baselineMilestoneHeight = this.parent.renderBaseline ? 5 : 2;
         var template = '<div class="' + cls.baselineMilestoneContainer + ' ' + '" style="' +
             'left:' + (data.ganttProperties.baselineLeft - this.milesStoneRadius) + 'px;' +
-            'margin-top:' + (-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + 2) +
+            'margin-top:' + (-Math.floor(this.parent.rowHeight - this.milestoneMarginTop) + baselineMilestoneHeight) +
             'px">' + '<div class="' + cls.baselineMilestoneDiv + '">' + '<div class="' + cls.baselineMilestoneDiv +
             ' ' + cls.baselineMilestoneTop + '"  ' +
             'style="top:' + (-this.milestoneHeight) + 'px;border-right:' + this.milesStoneRadius +
@@ -647,7 +648,9 @@ var ChartRows = /** @class */ (function (_super) {
      */
     ChartRows.prototype.getLeftLabelNode = function (i) {
         var leftLabelNode = this.leftLabelContainer();
-        leftLabelNode[0].setAttribute('aria-label', this.generateTaskLabelAriaLabel('left'));
+        if (this.generateTaskLabelAriaLabel('left') !== "") {
+            leftLabelNode[0].setAttribute('aria-label', this.generateTaskLabelAriaLabel('left'));
+        }
         var leftLabelTemplateNode = null;
         if (this.leftTaskLabelTemplateFunction) {
             leftLabelTemplateNode = this.leftTaskLabelTemplateFunction(extend({ index: i }, this.templateData), this.parent, 'LeftLabelTemplate', this.getTemplateID('LeftLabelTemplate'), false, undefined, leftLabelNode[0], this.parent.treeGrid['root']);
@@ -669,9 +672,10 @@ var ChartRows = /** @class */ (function (_super) {
         return leftLabelNode;
     };
     ChartRows.prototype.getLableText = function (labelString, labelDiv) {
+        var leftLabelHeight = this.parent.renderBaseline ? ((this.parent.rowHeight - this.taskBarHeight) / 2) : this.taskBarMarginTop;
         var templateString = createElement('div', {
             className: labelDiv, styles: 'height:' + (this.taskBarHeight) + 'px;' +
-                'margin-top:' + this.taskBarMarginTop + 'px;'
+                'margin-top:' + leftLabelHeight + 'px;'
         });
         var spanElem = createElement('span', { className: cls.label });
         var property = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
@@ -690,7 +694,9 @@ var ChartRows = /** @class */ (function (_super) {
      */
     ChartRows.prototype.getRightLabelNode = function (i) {
         var rightLabelNode = this.rightLabelContainer();
-        rightLabelNode[0].setAttribute('aria-label', this.generateTaskLabelAriaLabel('right'));
+        if (this.generateTaskLabelAriaLabel('right') !== "") {
+            rightLabelNode[0].setAttribute('aria-label', this.generateTaskLabelAriaLabel('right'));
+        }
         var rightLabelTemplateNode = null;
         if (this.rightTaskLabelTemplateFunction) {
             rightLabelTemplateNode = this.rightTaskLabelTemplateFunction(extend({ index: i }, this.templateData), this.parent, 'RightLabelTemplate', this.getTemplateID('RightLabelTemplate'), false, undefined, rightLabelNode[0], this.parent.treeGrid['root']);
@@ -803,8 +809,10 @@ var ChartRows = /** @class */ (function (_super) {
                 else {
                     labelDiv = this.createDivElement('<span class="' +
                         cls.taskLabel + '" style="line-height:' +
-                        (this.taskBarHeight - 1) + 'px; display:' + (this.parent.viewType === 'ResourceView' ? 'inline-flex;' : ';') + 'width:' +
-                        (this.parent.viewType === 'ResourceView' ? (data.ganttProperties.width - 10) : ';') + 'px; height:' +
+                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'display:inline-flex;' : '') +
+                        (this.parent.viewType === 'ResourceView' ? 'width:' + (data.ganttProperties.width - 10) : '') + 'px; height:' +
+                        (this.taskBarHeight - 1) + 'px;' + (this.parent.viewType === 'ResourceView' ? 'display: inline-flex;' : '') +
+                        (this.parent.viewType === 'ResourceView' ? 'width:' + (data.ganttProperties.width - 10) : '') + 'px; height:' +
                         this.taskBarHeight + 'px;">' + labelString + '</span>');
                 }
                 progressBarInnerDiv[0].appendChild([].slice.call(labelDiv)[0]);
@@ -833,10 +841,10 @@ var ChartRows = /** @class */ (function (_super) {
         var className = (this.parent.gridLines === 'Horizontal' || this.parent.gridLines === 'Both') ?
             'e-chart-row-border' : '';
         table.innerHTML = '<tr class="' + this.getRowClassName(this.templateData) + ' ' + cls.chartRow + '"' +
-            'style="display:' + this.getExpandDisplayProp(this.templateData) + ';height:' +
+            'role="ChartRow" style="display:' + this.getExpandDisplayProp(this.templateData) + ';height:' +
             this.parent.rowHeight + 'px;">' +
             '<td class="' + cls.chartRowCell + ' ' + className
-            + '" style="width:' + this.parent.timelineModule.totalTimelineWidth + 'px;"></td></tr>';
+            + '" role="ChartCell" style="width:' + this.parent.timelineModule.totalTimelineWidth + 'px;"></td></tr>';
         return table.childNodes;
     };
     /**
@@ -901,7 +909,7 @@ var ChartRows = /** @class */ (function (_super) {
     };
     ChartRows.prototype.leftLabelContainer = function () {
         var template = '<div class="' + ((this.leftTaskLabelTemplateFunction) ? cls.leftLabelTempContainer :
-            cls.leftLabelContainer) + ' ' + '" tabindex="-1" style="height:' +
+            cls.leftLabelContainer) + ' ' + '" tabindex="-1" role="LeftLabel" style="height:' +
             (this.parent.rowHeight - 2) + 'px;width:' + this.taskNameWidth(this.templateData) + '"></div>';
         return this.createDivElement(template);
     };
@@ -913,7 +921,7 @@ var ChartRows = /** @class */ (function (_super) {
         var template = '<div class="' + cls.taskBarMainContainer + ' ' +
             this.parent.getUnscheduledTaskClass(data.ganttProperties) + ' ' +
             ((data.ganttProperties.cssClass) ? data.ganttProperties.cssClass : '') + '" ' +
-            ' tabindex="-1" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
+            ' tabindex="-1" role="TaskBar" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
             ('width:' + this.milestoneHeight + 'px;height:' +
                 this.milestoneHeight + 'px;margin-top:' + this.milestoneMarginTop + 'px;left:' + (data.ganttProperties.left -
                 (this.milestoneHeight / 2)) + 'px;') : ('width:' + data.ganttProperties.width +
@@ -924,26 +932,26 @@ var ChartRows = /** @class */ (function (_super) {
     };
     ChartRows.prototype.rightLabelContainer = function () {
         var template = '<div class="' + ((this.rightTaskLabelTemplateFunction) ? cls.rightLabelTempContainer :
-            cls.rightLabelContainer) + '" ' + ' tabindex="-1" style="left:' + this.getRightLabelLeft(this.templateData) + 'px;height:'
+            cls.rightLabelContainer) + '" ' + ' tabindex="-1" role="RightLabel" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
             + (this.parent.rowHeight - 2) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarLeftResizer = function () {
         var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         var template = '<div class="' + cls.taskBarLeftResizer + ' ' + cls.icon + '"' +
-            ' style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            ' role="LeftResizer" style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarRightResizer = function () {
         var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         var template = '<div class="' + cls.taskBarRightResizer + ' ' + cls.icon + '"' +
-            ' style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
+            ' role="RightResizer" style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarProgressResizer = function () {
         var template = '<div class="' + cls.childProgressResizer + '"' +
-            ' style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
+            ' role="ProgressResizer" style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
             (this.taskBarHeight - 4) + 'px;"><div class="' + cls.progressBarHandler + '"' +
             '><div class="' + cls.progressHandlerElement + '"></div>' +
             '<div class="' + cls.progressBarHandlerAfter + '"></div></div>';
@@ -1141,10 +1149,13 @@ var ChartRows = /** @class */ (function (_super) {
      * @private
      */
     ChartRows.prototype.initChartHelperPrivateVariable = function () {
+        var taskbarHeightValue = this.parent.renderBaseline ? 0.45 : 0.62;
+        var taskBarMarginTopValue = this.parent.renderBaseline ? 4 : 2;
+        var milestoneHeightValue = this.parent.renderBaseline ? 1.13 : 0.82;
         this.baselineColor = !isNullOrUndefined(this.parent.baselineColor) &&
             this.parent.baselineColor !== '' ? this.parent.baselineColor : null;
         this.taskBarHeight = isNullOrUndefined(this.parent.taskbarHeight) || this.parent.taskbarHeight >= this.parent.rowHeight ?
-            Math.floor(this.parent.rowHeight * 0.62) : this.parent.taskbarHeight; // 0.62 -- Standard Ratio.
+            Math.floor(this.parent.rowHeight * taskbarHeightValue) : this.parent.taskbarHeight; // 0.62 -- Standard Ratio.
         if (this.parent.renderBaseline) {
             var height = void 0;
             if ((this.taskBarHeight + this.baselineHeight) <= this.parent.rowHeight) {
@@ -1155,11 +1166,11 @@ var ChartRows = /** @class */ (function (_super) {
             }
             this.taskBarHeight = height;
         }
-        this.milestoneHeight = Math.floor(this.taskBarHeight * 0.82); // 0.82 -- Standard Ratio.
-        this.taskBarMarginTop = Math.floor((this.parent.rowHeight - this.taskBarHeight) / 2);
+        this.milestoneHeight = Math.floor(this.taskBarHeight * milestoneHeightValue); // 0.82 -- Standard Ratio.
+        this.taskBarMarginTop = Math.floor((this.parent.rowHeight - this.taskBarHeight) / taskBarMarginTopValue);
         this.milestoneMarginTop = Math.floor((this.parent.rowHeight - this.milestoneHeight) / 2);
         this.milesStoneRadius = Math.floor((this.milestoneHeight) / 2);
-        this.baselineTop = -(Math.floor((this.parent.rowHeight - (this.taskBarHeight + this.taskBarMarginTop))) - 1);
+        this.baselineTop = -(Math.floor((this.parent.rowHeight - (this.taskBarHeight + this.taskBarMarginTop))) - 4);
         this.connectorPointWidth = this.parent.isAdaptive ? Math.round(this.taskBarHeight / 2) : 8;
         this.connectorPointMargin = Math.floor((this.taskBarHeight / 2) - (this.connectorPointWidth / 2));
     };
@@ -1353,6 +1364,7 @@ var ChartRows = /** @class */ (function (_super) {
             var indicators = this.templateData.ganttProperties.indicators;
             for (var indicatorIndex = 0; indicatorIndex < indicators.length; indicatorIndex++) {
                 taskIndicatorNode = this.getIndicatorNode(indicators[indicatorIndex]);
+                taskIndicatorNode[0].setAttribute('aria-label', indicators[indicatorIndex].name);
                 if (indicators[indicatorIndex].name.indexOf('$') > -1 || indicators[indicatorIndex].name.indexOf('#') > -1) {
                     taskIndicatorTextFunction = this.templateCompiler(indicators[indicatorIndex].name);
                     taskIndicatorTextNode = taskIndicatorTextFunction(extend({ index: i }, this.templateData), this.parent, 'indicatorLabelText');