@syncfusion/ej2-layouts 23.2.4 → 24.2.3

package/dist/es6/ej2-layouts.es2015.js

@@ -851,7 +851,8 @@ let Splitter = class Splitter extends Component {
         this.addResizeHandler(separator);
         separator.appendChild(arrow1);
         this.updateCollapseIcons(i, arrow1, arrow2);
-        separator.setAttribute('tabindex', '0');
+        separator.setAttribute('tabindex', '-1');
+        separator.setAttribute('aria-hidden', 'true');
         if (this.enableReversePanes) {
             separator.setAttribute('dir', 'ltr');
         }
@@ -885,6 +886,7 @@ let Splitter = class Splitter extends Component {
                 clonedEle[i].parentNode.appendChild(separator);
                 this.currentSeparator = separator;
                 separator.setAttribute('role', 'separator');
+                separator.setAttribute('aria-valuenow', i.toString());
                 separator.setAttribute('aria-orientation', this.orientation.toLowerCase());
                 this.wireClickEvents();
                 if (!isNullOrUndefined(separator)) {
@@ -2499,6 +2501,7 @@ let DashboardLayout = class DashboardLayout extends Component {
      * @private
      */
     render() {
+        this.element.setAttribute('role', 'list');
         this.initialize();
         this.isRenderComplete = true;
         if (this.showGridLines && !this.checkMediaQuery()) {
@@ -2512,6 +2515,7 @@ let DashboardLayout = class DashboardLayout extends Component {
         this.table = document.createElement('table');
         const tbody = document.createElement('tbody');
         this.table.classList.add('e-dashboard-gridline-table');
+        this.table.setAttribute('role', 'presentation');
         for (let i = 0; i < this.maxRow(); i++) {
             const tr = document.createElement('tr');
             for (let j = 0; j < this.columns; j++) {
@@ -2631,9 +2635,9 @@ let DashboardLayout = class DashboardLayout extends Component {
     updateOldRowColumn() {
         for (let i = 0; i < this.panels.length; i++) {
             const id = this.panels[i].id;
-            if (document.getElementById(id)) {
-                const row = parseInt(document.getElementById(id).getAttribute('data-row'), 10);
-                const col = parseInt(document.getElementById(id).getAttribute('data-col'), 10);
+            if (this.element.querySelector("[id='" + id + "']")) {
+                const row = parseInt(this.element.querySelector("[id='" + id + "']").getAttribute('data-row'), 10);
+                const col = parseInt(this.element.querySelector("[id='" + id + "']").getAttribute('data-col'), 10);
                 this.oldRowCol[this.panels[i].id] = { row: row, col: col };
             }
             else {
@@ -2704,6 +2708,10 @@ let DashboardLayout = class DashboardLayout extends Component {
     }
     renderPanels(cellElement, panelModel, panelId, isStringTemplate) {
         addClass([cellElement], [panel, panelTransition]);
+        cellElement.setAttribute('role', 'listitem');
+        if (this.allowDragging) {
+            cellElement.setAttribute('aria-grabbed', 'false');
+        }
         const cssClass = panelModel.cssClass ? panelModel.cssClass.split(' ') : null;
         this.panelContent = cellElement.querySelector('.e-panel-container') ?
             cellElement.querySelector('.e-panel-container') :
@@ -3470,9 +3478,9 @@ let DashboardLayout = class DashboardLayout extends Component {
         for (let h = 0; h < sizeY; ++h) {
             for (let w = 0; w < sizeX; ++w) {
                 item = this.getPanel(row + h, col + w, ignore);
-                if (item && (!ignore || ignore.indexOf(document.getElementById(item.id)) === -1) &&
-                    items.indexOf(document.getElementById(item.id)) === -1) {
-                    items.push(document.getElementById(item.id));
+                if (item && (!ignore || ignore.indexOf(this.element.querySelector("[id='" + item.id + "']")) === -1) &&
+                    items.indexOf(this.element.querySelector("[id='" + item.id + "']")) === -1) {
+                    items.push(this.element.querySelector("[id='" + item.id + "']"));
                 }
             }
         }
@@ -3830,7 +3838,7 @@ let DashboardLayout = class DashboardLayout extends Component {
         }
         if (this.mainElement && this.oldRowCol !== this.cloneObject) {
             for (let i = 0; i < this.panels.length; i++) {
-                const element = document.getElementById(this.panels[i].id);
+                const element = this.element.querySelector("[id='" + this.panels[i].id + "']");
                 if (element === this.mainElement) {
                     continue;
                 }