@syncfusion/ej2-dropdowns 23.2.7 → 24.1.41

package/src/drop-down-tree/drop-down-tree.js

@@ -253,14 +253,17 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.render = function () {
         var isTree = select('#' + this.element.id + '_tree', document);
         if (isTree) {
-            var popupDiv = select('#' + this.element.id + '_popup', document);
+            var popupDiv = select('#' + this.element.id + '_options', document);
             detach(popupDiv ? popupDiv : isTree.parentElement);
         }
         this.ensureAutoCheck();
         if (this.element.tagName === 'INPUT') {
             this.inputEle = this.element;
             if (isNOU(this.inputEle.getAttribute('role'))) {
-                this.inputEle.setAttribute('role', 'textbox');
+                this.inputEle.setAttribute('aria-expanded', 'false');
+                this.inputEle.setAttribute('role', 'combobox');
+                this.inputEle.setAttribute('aria-haspopup', 'tree');
+                this.inputEle.setAttribute('aria-controls', this.element.id + "_options");
             }
             if (isNOU(this.inputEle.getAttribute('type'))) {
                 this.inputEle.setAttribute('type', 'text');
@@ -428,8 +431,12 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
                 _this.treeObj.fields = _this.getTreeFields(fields);
                 _this.treeObj.dataBind();
-                if (_this.hasTemplate && _this.portals) {
-                    _this.portals = [].concat(_this.treeObj.portals);
+                if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {
+                    for (var i = 0; i < _this.treeObj.portals.length; i++) {
+                        if (_this.portals.indexOf(_this.treeObj.portals[i]) == -1) {
+                            _this.portals.push(_this.treeObj.portals[i]);
+                        }
+                    }
                     if (_this.isReact) {
                         _this.renderReactTemplates();
                     }
@@ -889,16 +896,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.getAriaAttributes = function () {
-        var disable = this.enabled ? 'false' : 'true';
-        return {
-            'aria-disabled': disable,
-            'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
-            'aria-haspopup': 'true',
-            'aria-expanded': 'false',
-            'aria-activedescendant': 'null',
-            'aria-labelledby': this.hiddenElement.id
-        };
+        return {};
     };
     DropDownTree.prototype.updateOverFlowView = function () {
         this.overFlowWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
@@ -1249,7 +1247,7 @@ var DropDownTree = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
+                        this.inputEle.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                 }
             }
@@ -1503,8 +1501,10 @@ var DropDownTree = /** @class */ (function (_super) {
                 addClass([_this.inputWrapper], [ICONANIMATION]);
                 if (_this.isFirstRender) {
                     _this.popupEle = _this.createElement('div', {
-                        id: _this.element.id + '_popup', className: POPUP_CLASS + ' ' + (_this.cssClass != null ? _this.cssClass : '')
+                        id: _this.element.id + '_options', className: POPUP_CLASS + ' ' + (_this.cssClass != null ? _this.cssClass : '')
                     });
+                    _this.popupEle.setAttribute('role', 'region');
+                    _this.popupEle.setAttribute('aria-label', _this.element.id);
                     document.body.appendChild(_this.popupEle);
                     _this.createPopup(_this.popupEle);
                 }
@@ -1540,7 +1540,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
             }
             if (!isCancelled) {
-                attributes(_this.inputWrapper, { 'aria-expanded': 'true' });
+                attributes(_this.inputEle, { 'aria-expanded': 'true' });
                 _this.popupObj.show(null, (_this.zIndex === 1000) ? _this.inputEle : null);
                 removeClass([_this.popupEle], DDTHIDEICON);
                 _this.updatePopupHeight();
@@ -1992,8 +1992,12 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.onNodeExpanded = function (args) {
-        if (this.hasTemplate && this.portals) {
-            this.portals = [].concat(this.treeObj.portals);
+        if (this.hasTemplate && this.portals && this.treeObj.portals) {
+            for (var i = 0; i < this.treeObj.portals.length; i++) {
+                if (this.portals.indexOf(this.treeObj.portals[i]) == -1) {
+                    this.portals.push(this.treeObj.portals[i]);
+                }
+            }
             /* eslint-enable */
             this.renderReactTemplates();
         }
@@ -3027,7 +3031,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.popupEle) {
             addClass([this.popupEle], DDTHIDEICON);
         }
-        attributes(this.inputWrapper, { 'aria-expanded': 'false' });
+        attributes(this.inputEle, { 'aria-expanded': 'false' });
         if (this.popupObj && this.isPopupOpen) {
             this.popupObj.hide();
             if (this.inputFocus) {

package/src/list-box/list-box.js

@@ -137,6 +137,12 @@ var ListBox = /** @class */ (function (_super) {
         var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
         hiddenSelect.style.visibility = 'hidden';
         this.list.classList.add('e-listbox-wrapper');
+        this.list.querySelector('.e-list-parent').setAttribute('role', 'presentation');
+        var groupHdrs = this.list.querySelectorAll('.e-list-group-item');
+        for (var i = 0; i < groupHdrs.length; i++) {
+            groupHdrs[i].removeAttribute('tabindex');
+            groupHdrs[i].setAttribute('role', 'option');
+        }
         if (this.itemTemplate) {
             this.list.classList.add('e-list-template');
         }
@@ -1201,7 +1207,8 @@ var ListBox = /** @class */ (function (_super) {
                 'autocomplete': 'off',
                 'autocorrect': 'off',
                 'autocapitalize': 'off',
-                'spellcheck': 'false'
+                'spellcheck': 'false',
+                'role': 'textbox'
             });
             if (this.height.toString().indexOf('%') < 0) {
                 addClass([this.list], 'e-filter-list');

package/src/mention/mention.js

@@ -149,6 +149,7 @@ var Mention = /** @class */ (function (_super) {
             }
         }
         this.inputElement.setAttribute('role', 'textbox');
+        this.inputElement.setAttribute('aria-label', 'mention');
         this.queryString = this.elementValue();
         this.wireEvent();
     };
@@ -459,7 +460,10 @@ var Mention = /** @class */ (function (_super) {
                 var value = this.getFormattedValue(focusItem.getAttribute('data-value'));
                 this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);
             }
-            if (this.beforePopupOpen) {
+            if (this.beforePopupOpen && this.isPopupOpen) {
+                if (this.initRemoteRender && !isNullOrUndefined(this.popupObj.element)) {
+                    this.popupObj.element.remove();
+                }
                 this.renderPopup();
             }
         }

package/src/multi-select/checkbox-selection.js

@@ -282,7 +282,10 @@ var CheckBoxSelection = /** @class */ (function () {
                 'role': 'combobox',
                 'autocomplete': 'off',
                 'autocapitalize': 'off',
-                'spellcheck': 'false'
+                'spellcheck': 'false',
+                'aria-label': 'multiselect',
+                'aria-expanded': 'true',
+                'aria-controls': args.popupElement.id
             });
             this.clearIconElement = this.filterInput.parentElement.querySelector('.' + clearIcon);
             if (!Browser.isDevice && this.clearIconElement) {

package/src/multi-select/multi-select.js

@@ -259,7 +259,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (_this.popupObj) {
                     _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
                 }
-                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
+                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
@@ -340,7 +340,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListARIA = function () {
         if (!isNullOrUndefined(this.ulElement)) {
-            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'list' });
         }
         var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
         if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
@@ -3937,6 +3937,8 @@ var MultiSelect = /** @class */ (function (_super) {
         this.setWidth(this.width);
         this.overAllWrapper.appendChild(this.componentWrapper);
         this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: POPUP_WRAPPER });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {
             this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });
             this.componentWrapper.appendChild(this.delimiterWrapper);

package/styles/drop-down-tree/_layout.scss

@@ -43,6 +43,9 @@
         @if $ddt-skin-name == 'Material3' {
           margin: $ddt-dd-icon-margin;
         }
+        @if $ddt-skin-name == 'FluentUI' {
+          min-height: $ddt-dd-icon-width;
+        }
       }
 
       .e-input-group-icon.e-ddt-icon {
@@ -84,6 +87,9 @@
           @else {
             right: $ddt-dd-icon-width;
           }
+          @if $ddt-skin-name == 'FluentUI' {
+            bottom: 0;
+          }
         }
 
         .e-ddt-icon {

package/styles/drop-down-tree/fluent-dark.css

@@ -86,6 +86,7 @@
 }
 .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
   box-sizing: content-box;
+  min-height: 30px;
 }
 .e-ddt.e-input-group.e-control-wrapper .e-input-group-icon.e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper .e-input-group-icon.e-ddt-icon {
   border: 0;
@@ -100,6 +101,7 @@
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
   right: 30px;
+  bottom: 0;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
   position: absolute;

package/styles/drop-down-tree/fluent.css

@@ -86,6 +86,7 @@
 }
 .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
   box-sizing: content-box;
+  min-height: 30px;
 }
 .e-ddt.e-input-group.e-control-wrapper .e-input-group-icon.e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper .e-input-group-icon.e-ddt-icon {
   border: 0;
@@ -100,6 +101,7 @@
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
   right: 30px;
+  bottom: 0;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
   position: absolute;

package/styles/fluent-dark.css

@@ -868,6 +868,7 @@ ejs-dropdownlist {
 }
 .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
   box-sizing: content-box;
+  min-height: 30px;
 }
 .e-ddt.e-input-group.e-control-wrapper .e-input-group-icon.e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper .e-input-group-icon.e-ddt-icon {
   border: 0;
@@ -882,6 +883,7 @@ ejs-dropdownlist {
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
   right: 30px;
+  bottom: 0;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
   position: absolute;

package/styles/fluent.css

@@ -868,6 +868,7 @@ ejs-dropdownlist {
 }
 .e-ddt.e-input-group.e-control-wrapper .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper .e-clear-icon {
   box-sizing: content-box;
+  min-height: 30px;
 }
 .e-ddt.e-input-group.e-control-wrapper .e-input-group-icon.e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper .e-input-group-icon.e-ddt-icon {
   border: 0;
@@ -882,6 +883,7 @@ ejs-dropdownlist {
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
   right: 30px;
+  bottom: 0;
 }
 .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon {
   position: absolute;