@syncfusion/ej2-dropdowns 33.2.10 → 33.2.15

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

@@ -5991,7 +5991,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }, 5);
                 }
                 attributes(this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': this.element.id + '_popup', 'aria-controls': this.element.id });
-                if (this.getModuleName() !== 'dropdownlist' && this.list.classList.contains('e-nodata')) {
+                if (this.list.classList.contains('e-nodata')) {
                     attributes(this.targetElement(), { 'aria-activedescendant': 'no-record' });
                     this.popupContentElement.setAttribute('role', 'status');
                     this.popupContentElement.setAttribute('id', 'no-record');
@@ -6184,9 +6184,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 ulElement = null;
             },
             targetExitViewport: () => {
-                if (!Browser.isDevice) {
-                    this.hidePopup();
-                }
+                this.hidePopup();
             }
         });
     }
@@ -6796,8 +6794,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             if (!this.targetElement().hasAttribute('aria-label')) {
                 attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
             }
-            if (!this.inputElement.hasAttribute('aria-label')) {
-                this.inputElement.setAttribute('aria-label', this.getModuleName());
+            if (!this.inputElement.hasAttribute('aria-labelledby')) {
+                this.inputElement.setAttribute('aria-labelledby', this.hiddenElement.id);
             }
             this.inputElement.setAttribute('aria-expanded', 'false');
         }
@@ -7153,6 +7151,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     break;
                 case 'value':
+                    if (this.isAngular && closest(this.inputElement, 'form') && oldProp.value === newProp.value) {
+                        this.preventChange = true;
+                    }
                     if (this.fields.disabled) {
                         newProp.value = newProp.value != null && !this.isDisableItemValue(newProp.value) ? newProp.value : null;
                     }
@@ -13416,6 +13417,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.selectAllEventEle = [];
         this.preventSetCurrentData = false;
         this.isSelectAllLoop = false;
+        this.isInitialFocusAnnouncementDone = false;
         this.scrollFocusStatus = false;
         this.keyDownStatus = false;
     }
@@ -14651,6 +14653,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             return;
         }
         this.inputFocus = false;
+        this.isInitialFocusAnnouncementDone = false;
         this.overAllWrapper.classList.remove(FOCUS);
         if (this.addTagOnBlur) {
             const dataChecks = this.getValueByText(this.inputElement.value, this.ignoreCase, this.ignoreAccent);
@@ -14917,6 +14920,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.trigger('focus', args);
                 this.focused = false;
             }
+            if (!this.isInitialFocusAnnouncementDone) {
+                this.announceInitialFocusInstruction();
+                this.isInitialFocusAnnouncementDone = true;
+            }
             if (!this.overAllWrapper.classList.contains(FOCUS)) {
                 this.overAllWrapper.classList.add(FOCUS);
             }
@@ -15638,6 +15645,24 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.checkPlaceholderSize();
     }
+    announceSelection(text) {
+        if (text && this.chipAnnouncerLiveRegion) {
+            const count = this.value ? this.value.length : 0;
+            const announcement = `${text} added to selection ${count} items selected`;
+            this.chipAnnouncerLiveRegion.textContent = announcement;
+        }
+    }
+    announceInitialFocusInstruction() {
+        if (this.chipAnnouncerLiveRegion) {
+            const instruction = 'Use arrow keys to open popup and navigate items, Enter to select, and Backspace to delete selections';
+            this.chipAnnouncerLiveRegion.textContent = '';
+            setTimeout(() => {
+                if (this.chipAnnouncerLiveRegion) {
+                    this.chipAnnouncerLiveRegion.textContent = instruction;
+                }
+            }, 200);
+        }
+    }
     moveByTop(state) {
         const elements = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);
         let index;
@@ -15841,7 +15866,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             element.setAttribute('aria-hidden', 'true');
             const chipTitle = element.getAttribute('title');
             if (chipTitle && this.chipAnnouncerLiveRegion) {
-                const announcement = `${chipTitle} focused. Press Backspace to remove`;
+                const announcement = chipTitle.length > 500
+                    ? 'Chip focused. Press Backspace to remove'
+                    : `${chipTitle} focused. Press Backspace to remove`;
                 this.chipAnnouncerLiveRegion.textContent = announcement;
             }
             if (!isNullOrUndefined(this.inputElement) && element.id) {
@@ -16210,6 +16237,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {
             this.addChip(text, value, eve);
         }
+        else {
+            this.announceSelection(text);
+        }
         if (this.hideSelectedItem && this.fields.groupBy) {
             this.hideGroupItem(value);
         }
@@ -16420,6 +16450,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
                 EventHandler.add(chipClose, 'mousedown', this.onChipRemove, this);
                 this.chipCollectionWrapper.appendChild(chip);
+                this.announceSelection(data);
                 if (!this.changeOnBlur && e) {
                     this.updateValueState(e, this.value, this.tempValues);
                 }
@@ -20918,8 +20949,10 @@ class CheckBoxSelection {
         }
     }
     setLocale(unSelect) {
-        if (this.parent.selectAllText !== 'Select All' || this.parent.unSelectAllText !== 'Unselect All') {
-            const template = unSelect ? this.parent.unSelectAllText : this.parent.selectAllText;
+        const template = unSelect ? this.parent.unSelectAllText : this.parent.selectAllText;
+        const isListBox = this.parent.element.classList.contains('e-listbox');
+        if ((this.parent.selectAllText !== 'Select All' || this.parent.unSelectAllText !== 'Unselect All') &&
+            (!isListBox || typeof template === 'function' || (typeof template === 'string' && /<[a-z][\s\S]*>/i.test(template)))) {
             this.selectAllSpan.textContent = '';
             const compiledString = compile(template);
             const templateName = unSelect ? 'unSelectAllText' : 'selectAllText';