@syncfusion/ej2-navigations 34.2.6 → 34.2.8

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

@@ -2100,6 +2100,14 @@ let MenuBase = class MenuBase extends Component {
         const menuType = type;
         let observedElement;
         this.trigger('beforeOpen', eventArgs, (observedOpenArgs) => {
+            const wrapper = this.getWrapper();
+            if (this.isAngular && wrapper && this.element.classList.contains('e-contextmenu')) {
+                const cdkPane = document.querySelector('.cdk-overlay-pane');
+                const popoverEl = document.querySelector('[popover]');
+                if (cdkPane && popoverEl) {
+                    cdkPane.appendChild(wrapper);
+                }
+            }
             switch (menuType) {
                 case 'menu':
                     if (!this.hamburgerMode) {
@@ -7415,6 +7423,9 @@ let Accordion = class Accordion extends Component {
                                 const newVal = Object(newProp.items[parseInt(index.toString(), 10)])[`${property[parseInt(k.toString(), 10)]}`];
                                 const temp = property[parseInt(k.toString(), 10)];
                                 const content = select('.' + CLS_CTENT, item);
+                                if (temp === 'expanded' && !newVal && !isNullOrUndefined(item) && item.classList.contains(CLS_ACTIVE)) {
+                                    this.expandItem(false, index);
+                                }
                                 if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {
                                     this.updateItem(item, index);
                                 }
@@ -8354,7 +8365,6 @@ let Tab = class Tab extends Component {
         this.tbObj.isStringTemplate = true;
         this.tbObj.createElement = this.createElement;
         this.tbObj.appendTo(this.hdrEle);
-        attributes(this.hdrEle, { role: 'tablist' });
         if (!isNullOrUndefined(this.element.getAttribute('aria-label'))) {
             this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));
             this.element.removeAttribute('aria-label');
@@ -8363,6 +8373,16 @@ let Tab = class Tab extends Component {
             this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
             this.element.removeAttribute('aria-labelledby');
         }
+        const scrollContent = this.tbObj.element.querySelector('.' + (this.isVertical() ? CLS_VSCRCNT : CLS_HSCRCNT));
+        const popupContainer = select('.' + CLS_TB_POP, this.tbObj.element);
+        const isScrollableMode = this.overflowMode === 'Scrollable' || this.overflowMode === 'MultiRow';
+        const isPopupMode = this.overflowMode === 'Popup' || this.overflowMode === 'Extended';
+        if (isScrollableMode) {
+            this.setTablistRole(scrollContent);
+        }
+        else if (isPopupMode) {
+            this.setTablistRole(popupContainer);
+        }
         this.updatePopupIconAriaLabel();
         this.setCloseButton(this.showCloseButton);
         const toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
@@ -8370,6 +8390,14 @@ let Tab = class Tab extends Component {
             if (isNullOrUndefined(toolbarHeader.id) || toolbarHeader.id === '') {
                 toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
             }
+            if (isPopupMode || (isScrollableMode && isNullOrUndefined(scrollContent))) {
+                this.setTablistRole(toolbarHeader);
+            }
+        }
+    }
+    setTablistRole(el) {
+        if (!isNullOrUndefined(el)) {
+            attributes(el, { role: 'tablist' });
         }
     }
     updatePopupIconAriaLabel() {