@syncfusion/ej2-kanban - npm Package Compare versions

Comparing version 23.2.4 to 24.1.41

CHANGELOG.md

@@ -9,4 +9,14 @@ # Changelog
 
+- Now the Kanban Header table will have `tbody` element and the Kanban Content table will have `thead` element to improve the accessibility.
+
+## 23.2.4 (2023-11-20)
+
+### Kanban
+
+#### Bug Fixes
+
 `#I513537` - Now, localization of the "Cards" text was done. When you drag the multiple cards, it show up.
 
+`#I515897` - Now, when the `cancel` argument is set to true in the `dialogClose` event in the kanban, it works properly.
+
 ## 23.1.36 (2023-09-15)
@@ -13,0 +23,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 23.2.4
+*  version : 24.1.41
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

@@ -5,3 +5,3 @@ {
   "_inBundle": false,
-  "_integrity": "sha512-ymm+d/UigXHsW+DnTNAEf7Ht3G7TJSutt5Qg9oKUmNpoehOyq92QqrgWG5Xe9PP06s/dxGmBxpJ8lyd0C1IC3g==",
+  "_integrity": "sha512-iEODpo5Bq6BptvXmj9liE1ZJhSjXA9zPV3lE2XAs5cWz7KcouFzqCg8dGsrc68qVptCR3te4MSfPzNSwnduDVA==",
   "_location": "/@syncfusion/ej2-kanban",
@@ -27,6 +27,6 @@ "_phantomChildren": {},
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-kanban/-/ej2-kanban-23.1.36.tgz",
-  "_shasum": "f26de04b2844fc8f28040bcd9e02aa25a6bbb0c3",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-kanban/-/ej2-kanban-23.1.36.tgz",
+  "_shasum": "913c057023233e3fdc90238dde63ae71ec1270f8",
   "_spec": "@syncfusion/ej2-kanban@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -40,11 +40,11 @@ "name": "Syncfusion Inc."
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-data": "~23.2.4",
-    "@syncfusion/ej2-dropdowns": "~23.2.4",
-    "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-layouts": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.4",
-    "@syncfusion/ej2-notifications": "~23.2.4",
-    "@syncfusion/ej2-popups": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.1.41",
+    "@syncfusion/ej2-buttons": "~24.1.41",
+    "@syncfusion/ej2-data": "~24.1.41",
+    "@syncfusion/ej2-dropdowns": "~24.1.41",
+    "@syncfusion/ej2-inputs": "~24.1.41",
+    "@syncfusion/ej2-layouts": "~24.1.41",
+    "@syncfusion/ej2-navigations": "~24.1.41",
+    "@syncfusion/ej2-notifications": "~24.1.41",
+    "@syncfusion/ej2-popups": "~24.1.41"
   },
@@ -77,4 +77,4 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "23.2.4",
+  "version": "24.1.41",
   "sideEffects": false
 }

src/kanban/actions/dialog.js

@@ -331,22 +331,24 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
             this.dialogObj.hide();
-            if (target.classList.contains('e-dialog-edit')) {
-                var activeCard = this.parent.activeCardData;
-                var updateIndex = void 0;
-                if (activeCard.data[this.parent.keyField] === this.cardData[this.parent.keyField]
-                    && activeCard.element) {
-                    updateIndex = [].slice.call(activeCard.element.parentElement.children).indexOf(activeCard.element);
-                }
-                if (this.parent.enableHtmlSanitizer) {
-                    if (typeof this.cardData[this.parent.cardSettings.contentField] === 'string') {
-                        this.cardData[this.parent.cardSettings.contentField] =
-                            SanitizeHtmlHelper.sanitize(this.cardData[this.parent.cardSettings.contentField]);
+            if (!isNullOrUndefined(this.cardData)) {
+                if (target.classList.contains('e-dialog-edit')) {
+                    var activeCard = this.parent.activeCardData;
+                    var updateIndex = void 0;
+                    if (activeCard.data[this.parent.keyField] === this.cardData[this.parent.keyField]
+                        && activeCard.element) {
+                        updateIndex = [].slice.call(activeCard.element.parentElement.children).indexOf(activeCard.element);
                     }
+                    if (this.parent.enableHtmlSanitizer) {
+                        if (typeof this.cardData[this.parent.cardSettings.contentField] === 'string') {
+                            this.cardData[this.parent.cardSettings.contentField] =
+                                SanitizeHtmlHelper.sanitize(this.cardData[this.parent.cardSettings.contentField]);
+                        }
+                    }
+                    this.parent.crudModule.updateCard(this.cardData, updateIndex);
                 }
-                this.parent.crudModule.updateCard(this.cardData, updateIndex);
+                if (target.classList.contains('e-dialog-add')) {
+                    this.parent.crudModule.addCard(this.cardData);
+                }
+                this.parent.actionModule.SingleCardSelection(this.cardData);
+                this.cardData = null;
             }
-            if (target.classList.contains('e-dialog-add')) {
-                this.parent.crudModule.addCard(this.cardData);
-            }
-            this.parent.actionModule.SingleCardSelection(this.cardData);
-            this.cardData = null;
         }
@@ -353,0 +355,0 @@ if (!target.classList.contains('e-dialog-edit') && !target.classList.contains('e-dialog-add')) {

src/kanban/actions/drag.js

@@ -108,3 +108,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
                         className: 'e-multi-card-text',
-                        innerHTML: _this.dragObj.selectedCards.length + ' ' + _this.parent.localeObj.getConstant("cards")
+                        innerHTML: _this.dragObj.selectedCards.length + ' ' + _this.parent.localeObj.getConstant('cards')
                     });
@@ -216,3 +216,4 @@ _this.dragObj.cloneElement.appendChild(drag);
                 }
-                else if ((target.classList.contains(cls.CARD_WRAPPER_CLASS) || target.classList.contains(cls.CARD_VIRTUAL_WRAPPER_CLASS)) &&
+                else if ((target.classList.contains(cls.CARD_WRAPPER_CLASS) ||
+                    target.classList.contains(cls.CARD_VIRTUAL_WRAPPER_CLASS)) &&
                     !closest(target, '.' + cls.SWIMLANE_ROW_CLASS)
@@ -219,0 +220,0 @@ && contentCell.querySelectorAll('.' + cls.CARD_CLASS).length === 0) {

src/kanban/base/data.js

@@ -200,2 +200,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
      */
+    // eslint-disable-next-line
     Data.prototype.dataManagerSuccess = function (e, type, offlineArgs, index) {
@@ -202,0 +203,0 @@ var _this = this;

src/kanban/base/kanban.js

@@ -162,6 +162,7 @@ var __extends = (this && this.__extends) || (function () {
         }
-        this.element.setAttribute('role', 'presentation');
         classList(this.element, addClasses, removeClasses);
         this.element.style.width = formatUnit(this.width);
         this.element.style.height = formatUnit(this.height);
+        this.element.setAttribute('role', 'application');
+        this.element.setAttribute('aria-label', 'Kanban Board');
         createSpinner({ target: this.element });
@@ -168,0 +169,0 @@ this.showSpinner();

src/kanban/base/layout-render.js

@@ -74,4 +74,3 @@ var __extends = (this && this.__extends) || (function () {
         var headerTable = createElement('table', {
-            className: cls.TABLE_CLASS + ' ' + cls.HEADER_TABLE_CLASS,
-            attrs: { 'role': 'table', 'aria-label': 'Kanban board header' }
+            className: cls.TABLE_CLASS + ' ' + cls.HEADER_TABLE_CLASS
         });
@@ -81,2 +80,4 @@ headerWrap.appendChild(headerTable);
         var tableHead = createElement('thead');
+        var tableBody = createElement('tbody', { className: 'e-hide', innerHTML: '<tr><td></td></tr>', attrs: { 'role': 'rowgroup' } });
+        headerTable.appendChild(tableBody);
         headerTable.appendChild(tableHead);
@@ -93,3 +94,3 @@ if (this.parent.stackedHeaders.length > 0) {
                     className: index === -1 ? cls.HEADER_CELLS_CLASS : cls.HEADER_CELLS_CLASS + ' ' + cls.COLLAPSED_CLASS,
-                    attrs: { 'data-role': 'kanban-column', 'data-key': column.keyField.toString(), 'scope': 'row' }
+                    attrs: { 'data-role': 'kanban-column', 'data-key': column.keyField.toString(), 'scope': 'col' }
                 });
@@ -162,9 +163,15 @@ var classList = [];
         var contentTable = createElement('table', {
-            className: cls.TABLE_CLASS + ' ' + cls.CONTENT_TABLE_CLASS,
-            attrs: { 'role': 'presentation' }
+            className: cls.TABLE_CLASS + ' ' + cls.CONTENT_TABLE_CLASS, attrs: { 'role': 'presentation' }
         });
         contentWrap.appendChild(contentTable);
         this.renderColGroup(contentTable);
-        var tBody = createElement('tbody');
-        tBody.setAttribute('role', 'rowgroup');
+        var tHead = createElement('thead', { className: 'e-hide', attrs: { 'role': 'none' } });
+        for (var _i = 0, _a = this.parent.columns; _i < _a.length; _i++) {
+            var column = _a[_i];
+            var thElem = createElement('th', { id: column.keyField, innerHTML: column.keyField, attrs: { 'scope': 'col' } });
+            thElem.style.display = 'none';
+            tHead.appendChild(thElem);
+        }
+        contentTable.appendChild(tHead);
+        var tBody = createElement('tbody', { attrs: { 'role': 'treegrid', 'aria-label': 'Kanban Content' } });
         contentTable.appendChild(tBody);
@@ -174,4 +181,4 @@ var isCollaspsed = false;
         this.initializeSwimlaneTree();
-        for (var _i = 0, _a = this.swimlaneRow; _i < _a.length; _i++) {
-            var row = _a[_i];
+        for (var _b = 0, _c = this.swimlaneRow; _b < _c.length; _b++) {
+            var row = _c[_b];
             if (this.parent.swimlaneSettings.keyField && this.parent.swimlaneToggleArray.length !== 0) {
@@ -189,3 +196,4 @@ var index = this.parent.swimlaneToggleArray.indexOf(row.keyField);
         var className = isCollaspsed ? cls.CONTENT_ROW_CLASS + ' ' + cls.COLLAPSED_CLASS : cls.CONTENT_ROW_CLASS;
-        var tr = createElement('tr', { className: className, attrs: { 'aria-expanded': 'true', 'role': 'row' } });
+        var tr = createElement('tr', { className: className,
+            attrs: { 'role': 'row', 'aria-label': row.keyField + 'row content' } });
         for (var _i = 0, _a = this.parent.columns; _i < _a.length; _i++) {
@@ -199,5 +207,4 @@ var column = _a[_i];
                 var td = createElement('td', {
-                    className: className_1 + dragClass,
-                    attrs: { 'data-role': 'kanban-column', 'data-key': column.keyField.toString(),
-                        'tabindex': '0', 'role': 'treegrid', 'aria-label': column.keyField.toString() }
+                    className: className_1 + dragClass, attrs: { 'data-role': 'kanban-column', 'data-key': column.keyField.toString(), 'tabindex': '0',
+                        'aria-describedby': column.keyField.toString(), 'role': 'gridcell' }
                 });
@@ -243,8 +250,8 @@ if (column.allowToggle && !column.isExpanded || index !== -1) {
         var tr = createElement('tr', {
-            className: name + className, attrs: { 'data-key': row.keyField, 'aria-expanded': (!isCollapsed).toString(), 'role': 'row' }
+            className: name + className, attrs: { 'aria-label': row.keyField + ' row header',
+                'role': 'row', 'data-key': row.keyField, 'aria-expanded': (!isCollapsed).toString() }
         });
         var col = this.parent.columns.length - this.parent.actionModule.hideColumnKeys.length;
-        var td = createElement('td', {
-            className: cls.CONTENT_CELLS_CLASS, attrs: { 'data-role': 'kanban-column', 'colspan': col.toString() }
-        });
+        var td = createElement('td', { className: cls.CONTENT_CELLS_CLASS,
+            attrs: { 'data-role': 'kanban-column', 'role': 'gridcell', colspan: col.toString() } });
         var swimlaneHeader = createElement('div', { className: cls.SWIMLANE_HEADER_CLASS });
@@ -255,5 +262,3 @@ td.appendChild(swimlaneHeader);
             className: cls.ICON_CLASS + ' ' + iconClass, attrs: {
-                'tabindex': '0',
-                'role': 'button',
-                'aria-label': isCollapsed ? row.keyField + ' Collapse' : row.keyField + ' Expand'
+                'tabindex': '0', 'role': 'button', 'aria-label': isCollapsed ? row.keyField + ' Collapse' : row.keyField + ' Expand'
             }
@@ -316,3 +321,5 @@ });
                     var cardWrapper_1 = createElement('div', {
-                        className: cls.CARD_WRAPPER_CLASS, attrs: { 'role': 'listbox', 'tabindex': '0', 'aria-label': column.keyField.toString() }
+                        className: cls.CARD_WRAPPER_CLASS, attrs: { 'role': 'listbox', 'tabindex': '0',
+                            'aria-label': column.keyField.toString()
+                        }
                     });
@@ -371,5 +378,4 @@ if (column.transitionColumns.length > 0) {
             className: cls.CARD_CLASS,
-            attrs: {
-                'data-id': data[this.parent.cardSettings.headerField], 'data-key': data[this.parent.keyField],
-                'aria-selected': 'false', 'tabindex': '-1', 'role': 'option'
+            attrs: { 'data-id': data[this.parent.cardSettings.headerField], 'data-key': data[this.parent.keyField],
+                'aria-selected': 'false', 'tabindex': '-1', 'role': 'option', 'aria-roledescription': 'Card'
             }
@@ -435,4 +441,4 @@ });
         var emptyCard = createElement('span', {
-            className: cls.EMPTY_CARD_CLASS,
-            innerHTML: this.parent.localeObj.getConstant('noCard')
+            className: cls.EMPTY_CARD_CLASS, innerHTML: this.parent.localeObj.getConstant('noCard'),
+            attrs: { 'aria-label': this.parent.localeObj.getConstant('noCard'), 'role': 'option' }
         });
@@ -541,3 +547,3 @@ return emptyCard;
                 className: cls.HEADER_CELLS_CLASS + ' ' + cls.STACKED_HEADER_CELL_CLASS,
-                attrs: { 'colspan': colSpan.toString(), 'scope': 'row' }
+                attrs: { 'colspan': colSpan.toString(), 'scope': 'col' }
             });
@@ -544,0 +550,0 @@ tr.appendChild(th).appendChild(div);

No alert changes

Improved metrics

Total package byte prevSize

5607822

increased by0.21%

Lines of code

62844

increased by0.05%

Dependency changes

• + Added@syncfusion/ej2-base@24.1.46(transitive)

• + Added@syncfusion/ej2-buttons@24.1.46(transitive)

• + Added@syncfusion/ej2-data@24.1.41(transitive)

• + Added@syncfusion/ej2-dropdowns@24.1.47(transitive)

• + Added@syncfusion/ej2-icons@24.1.41(transitive)

• + Added@syncfusion/ej2-inputs@24.1.47(transitive)

• + Added@syncfusion/ej2-layouts@24.1.41(transitive)

• + Added@syncfusion/ej2-lists@24.1.46(transitive)

• + Added@syncfusion/ej2-navigations@24.1.46(transitive)

• + Added@syncfusion/ej2-notifications@24.1.41(transitive)

• + Added@syncfusion/ej2-popups@24.1.46(transitive)

• + Added@syncfusion/ej2-splitbuttons@24.1.46(transitive)

• - Removed@syncfusion/ej2-base@23.2.6(transitive)

• - Removed@syncfusion/ej2-buttons@23.2.7(transitive)

• - Removed@syncfusion/ej2-data@23.2.4(transitive)

• - Removed@syncfusion/ej2-dropdowns@23.2.7(transitive)

• - Removed@syncfusion/ej2-icons@23.2.4(transitive)

• - Removed@syncfusion/ej2-inputs@23.2.4(transitive)

• - Removed@syncfusion/ej2-layouts@23.2.4(transitive)

• - Removed@syncfusion/ej2-lists@23.2.4(transitive)

• - Removed@syncfusion/ej2-navigations@23.2.7(transitive)

• - Removed@syncfusion/ej2-notifications@23.2.5(transitive)

• - Removed@syncfusion/ej2-popups@23.2.4(transitive)

• - Removed@syncfusion/ej2-splitbuttons@23.2.4(transitive)

• Updated@syncfusion/ej2-base@~24.1.41

• Updated@syncfusion/ej2-buttons@~24.1.41

• Updated@syncfusion/ej2-data@~24.1.41

• Updated@syncfusion/ej2-dropdowns@~24.1.41

• Updated@syncfusion/ej2-inputs@~24.1.41

• Updated@syncfusion/ej2-layouts@~24.1.41

• Updated@syncfusion/ej2-navigations@~24.1.41

• Updated@syncfusion/ej2-notifications@~24.1.41

• Updated@syncfusion/ej2-popups@~24.1.41