@momentum-design/components 0.107.0 → 0.108.0

package/dist/components/menupopover/menupopover.component.js

@@ -374,11 +374,9 @@ class MenuPopover extends Popover {
         return super.isOpenUpdated(oldValue, newValue);
     }
     async firstUpdated(changedProperties) {
-        var _a;
         await super.firstUpdated(changedProperties);
         this.collectMenuItems();
         this.resetTabIndexes(0);
-        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ROLE.MENU);
     }
     /**
      * Reset all tabindex to -1 and set the tabindex of the current menu item to 0

package/dist/components/popover/popover.component.d.ts

@@ -8,6 +8,10 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  * The popover automatically positions itself based on available space and
  * supports dynamic height adjustments with scrollable content when needed。
  *
+ * Note:
+ *  - A component (button) can trigger more than one popover, but only one of them should change the
+ *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.
+ *
  * @dependency mdc-button
  *
  * @tagname mdc-popover
@@ -261,18 +265,17 @@ declare class Popover extends Popover_base {
      */
     ariaDescribedby: string | null;
     /**
-     * Disable setting the aria-expanded attribute on trigger element.
-     * Make sure to set this to false when the popover is interactive.
+     * Disable setting the `aria-expanded` attribute on trigger element.
+     *
+     * Note, when `disable-aria-expanded` is true
+     *  - when its value change after first update to
+     *    - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover
+     *      registered to the same trigger
+     *      - `false`: check `aria-expanded` value and update it if necessary.
+     *  - aria-haspopup will be disabled as well
      * @default false
      */
     disableAriaExpanded: boolean;
-    /**
-     * Disable setting the aria-haspopup attribute on trigger element.
-     * Make sure to set this to true when the popover is extended and its role
-     * is not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.
-     * @default false
-     */
-    disableAriaHasPopup: boolean;
     /**
      * If a tooltip is connected to the same trigger element,
      * this property will keep the connected tooltip closed if this popover is open.

package/dist/components/popover/popover.component.js

@@ -27,6 +27,10 @@ import { PopoverUtils } from './popover.utils';
  * The popover automatically positions itself based on available space and
  * supports dynamic height adjustments with scrollable content when needed。
  *
+ * Note:
+ *  - A component (button) can trigger more than one popover, but only one of them should change the
+ *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.
+ *
  * @dependency mdc-button
  *
  * @tagname mdc-popover
@@ -261,18 +265,17 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          */
         this.ariaDescribedby = null;
         /**
-         * Disable setting the aria-expanded attribute on trigger element.
-         * Make sure to set this to false when the popover is interactive.
+         * Disable setting the `aria-expanded` attribute on trigger element.
+         *
+         * Note, when `disable-aria-expanded` is true
+         *  - when its value change after first update to
+         *    - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover
+         *      registered to the same trigger
+         *      - `false`: check `aria-expanded` value and update it if necessary.
+         *  - aria-haspopup will be disabled as well
          * @default false
          */
         this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
-        /**
-         * Disable setting the aria-haspopup attribute on trigger element.
-         * Make sure to set this to true when the popover is extended and its role
-         * is not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.
-         * @default false
-         */
-        this.disableAriaHasPopup = DEFAULTS.DISABLE_ARIA_HAS_POPUP;
         /**
          * If a tooltip is connected to the same trigger element,
          * this property will keep the connected tooltip closed if this popover is open.
@@ -699,9 +702,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         if (changedProperties.has('disableAriaExpanded')) {
             this.utils.updateAriaExpandedAttribute();
         }
-        if (changedProperties.has('interactive') || changedProperties.has('disableAriaHasPopup')) {
-            this.utils.updateAriaHasPopupAttribute();
-        }
         if (changedProperties.has('focusTrap')) {
             // if focusTrap turned false and the popover is visible, deactivate the focus trap
             if (!this.focusTrap && this.visible) {
@@ -795,13 +795,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 this.removeEventListener('keydown', this.onEscapeKeydown);
                 (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('keydown', this.onEscapeKeydown);
             }
-            if (this.disableAriaExpanded) {
-                this.triggerElement.removeAttribute('aria-expanded');
-            }
-            // Remove aria-haspopup if the popover is not interactive
-            if (!this.interactive) {
-                this.triggerElement.removeAttribute('aria-haspopup');
-            }
             this.deactivatePreventScroll();
             (_d = this.deactivateFocusTrap) === null || _d === void 0 ? void 0 : _d.call(this);
             if (this.focusBackToTrigger) {
@@ -972,10 +965,6 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-aria-expanded' }),
     __metadata("design:type", Boolean)
 ], Popover.prototype, "disableAriaExpanded", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'disable-aria-haspopup' }),
-    __metadata("design:type", Boolean)
-], Popover.prototype, "disableAriaHasPopup", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'keep-connected-tooltip-closed' }),
     __metadata("design:type", Boolean)

package/dist/components/popover/popover.constants.d.ts

@@ -48,7 +48,6 @@ declare const DEFAULTS: {
     readonly ROLE: "dialog";
     readonly Z_INDEX: 1000;
     readonly DISABLE_ARIA_EXPANDED: false;
-    readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
     readonly KEEP_CONNECTED_TOOLTIP_CLOSED: true;
     readonly STRATEGY: "absolute";

package/dist/components/popover/popover.constants.js

@@ -49,7 +49,6 @@ const DEFAULTS = {
     ROLE: 'dialog',
     Z_INDEX: 1000,
     DISABLE_ARIA_EXPANDED: false,
-    DISABLE_ARIA_HAS_POPUP: false,
     PROPAGATE_EVENT_ON_ESCAPE: false,
     KEEP_CONNECTED_TOOLTIP_CLOSED: true,
     STRATEGY: 'absolute',

package/dist/components/popover/popover.utils.d.ts

@@ -32,10 +32,6 @@ export declare class PopoverUtils {
      * Updates the aria-modal attribute based on the popover's role.
      */
     updateAriaModal(): void;
-    /**
-     * Updates the aria-haspopup attribute on the trigger element.
-     */
-    updateAriaHasPopupAttribute(): void;
     /**
      * Updates the aria-expanded attribute on the trigger element.
      */

package/dist/components/popover/popover.utils.js

@@ -111,28 +111,14 @@ export class PopoverUtils {
             this.popover.removeAttribute('aria-modal');
         }
     }
-    /**
-     * Updates the aria-haspopup attribute on the trigger element.
-     */
-    updateAriaHasPopupAttribute() {
-        var _a, _b, _c;
-        if (this.popover.interactive && !this.popover.disableAriaHasPopup) {
-            (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.getAttribute('aria-haspopup')) || 'dialog');
-        }
-        else {
-            (_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-haspopup');
-        }
-    }
     /**
      * Updates the aria-expanded attribute on the trigger element.
      */
     updateAriaExpandedAttribute() {
-        var _a, _b;
-        if (this.popover.disableAriaExpanded) {
-            (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-expanded');
-        }
-        else {
-            (_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', `${this.popover.visible}`);
+        var _a, _b, _c;
+        if (!this.popover.disableAriaExpanded) {
+            (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', `${this.popover.visible}`);
+            (_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-haspopup', ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.getAttribute('aria-haspopup')) || this.popover.role || 'dialog');
         }
     }
     /**