@momentum-design/components 0.61.1 → 0.62.0

package/dist/components/tablist/index.d.ts

@@ -1,6 +1,5 @@
 import Tablist from './tablist.component';
 import '../button';
-import '../tab';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-tablist']: Tablist;

package/dist/components/tablist/index.js

@@ -1,6 +1,5 @@
 import Tablist from './tablist.component';
 import { TAG_NAME } from './tablist.constants';
 import '../button';
-import '../tab';
 Tablist.register(TAG_NAME);
 export default Tablist;

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

@@ -20,9 +20,7 @@ import { Component } from '../../models';
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
  *
  * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - If the tab list has a visible label,
- *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
- *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - The `tablist` element needs to have a label provided by `data-aria-label`.
  * - Each element with role `tab` has the property `aria-controls`
  *  that should refer to its associated `tabpanel` element.
  * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
@@ -52,16 +50,8 @@ declare class TabList extends Component {
      */
     activeTabId?: string;
     /**
-     * Selector for the element that provides a label for the tablist.
-     */
-    dataAriaLabelledby?: string;
-    /**
-     * Label for the tablist in case aria-labelledby is not provided.
+     * Label for the tablist.
      * This is used when the tablist does not have a visible label.
-     * Defaults to 'Tab List'.
-     * <br/>
-     * Note: If both `data-aria-labelledby` and `data-aria-label` are provided,
-     * the `data-aria-labelledby` will be used.
      */
     dataAriaLabel?: string;
     /**
@@ -120,14 +110,6 @@ declare class TabList extends Component {
      * @param changedProperties - Map of changed properties with old values.
      */
     update(changedProperties: PropertyValues<this>): Promise<void>;
-    /**
-     * Set aria-labelledby attribute on the tablist element.
-     * If it does not exist, set aria-label attribute.
-     * As fallback, set aria-label to 'Tab List'.
-     *
-     * @internal
-     */
-    private setAriaLabelledByOrAriaLabel;
     /**
      * Dispatch the change event.
      *

package/dist/components/tablist/tablist.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './tablist.styles';
 import { Component } from '../../models';
 import { ARROW_BUTTON_DIRECTION, KEYCODES } from './tablist.constants';
@@ -34,9 +35,7 @@ import { getFirstTab, getLastTab, getNextTab, getPreviousTab, findTab, getActive
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
  *
  * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - If the tab list has a visible label,
- *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
- *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - The `tablist` element needs to have a label provided by `data-aria-label`.
  * - Each element with role `tab` has the property `aria-controls`
  *  that should refer to its associated `tabpanel` element.
  * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
@@ -81,24 +80,6 @@ class TabList extends Component {
          * @internal
          */
         this.isRtl = () => { var _a; return ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl' || window.getComputedStyle(this).direction === 'rtl'; };
-        /**
-         * Set aria-labelledby attribute on the tablist element.
-         * If it does not exist, set aria-label attribute.
-         * As fallback, set aria-label to 'Tab List'.
-         *
-         * @internal
-         */
-        this.setAriaLabelledByOrAriaLabel = () => {
-            var _a, _b, _c, _d;
-            if (this.dataAriaLabelledby) {
-                (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this.dataAriaLabelledby);
-                (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-label');
-            }
-            else {
-                (_c = this.tabsContainer) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-label', this.dataAriaLabel || 'Tab List');
-                (_d = this.tabsContainer) === null || _d === void 0 ? void 0 : _d.removeAttribute('aria-labelledby');
-            }
-        };
         /**
          * Dispatch the change event.
          *
@@ -108,7 +89,7 @@ class TabList extends Component {
          */
         this.fireTabChangeEvent = (newTab) => {
             const event = new CustomEvent('change', {
-                detail: newTab.tabId,
+                detail: { tabId: newTab.tabId },
             });
             this.dispatchEvent(event);
         };
@@ -160,6 +141,7 @@ class TabList extends Component {
          * @param event - Custom Event fired from the nested tab.
          */
         this.handleNestedTabActiveChange = async (event) => {
+            event.stopPropagation();
             const tab = event.target;
             if (!(tab instanceof Tab)) {
                 return;
@@ -209,11 +191,10 @@ class TabList extends Component {
          * @param tab - Tab to set focus on.
          */
         this.focusTab = async (tab) => {
-            var _a;
             if (!(tab instanceof Tab)) {
                 return;
             }
-            if (tab !== ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+            if (tab !== (document === null || document === void 0 ? void 0 : document.activeElement)) {
                 this.resetTabIndexAndSetNewTabIndex(tab);
                 tab.focus();
             }
@@ -399,10 +380,8 @@ class TabList extends Component {
                 this.onerror('The tabs inside the tab list must have unique tab ids');
             }
         }
-        this.setAriaLabelledByOrAriaLabel();
         const resizeObserver = new ResizeObserver(async () => {
-            var _a, _b;
-            const activeElement = (_b = (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement;
+            const { activeElement } = document;
             /**
              * Keep the focused element in view.
              */
@@ -433,9 +412,6 @@ class TabList extends Component {
      */
     async update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has('dataAriaLabelledby') || changedProperties.has('dataAriaLabel')) {
-            this.setAriaLabelledByOrAriaLabel();
-        }
         if (changedProperties.has('activeTabId')) {
             if (!this.tabs || !this.activeTabId) {
                 return;
@@ -446,7 +422,7 @@ class TabList extends Component {
             }
             this.setActiveTab(newTab);
             /**
-             * If the previous activeTabId was not undefined, fire the change event.
+             * If the previous activeTabId was not undefined, focus the new tab.
              *
              * Otherwise, reset the tabindex of all tabs and set the new tabindex.
              */
@@ -475,7 +451,11 @@ class TabList extends Component {
           ></mdc-button>`
             : nothing}`;
         return html ` ${arrowButton('backward')}
-      <div class="container" role="tablist" tabindex="-1">
+      <div 
+      class="container" 
+      role="tablist" 
+      tabindex="-1" 
+      aria-label="${ifDefined(this.dataAriaLabel)}">
         <slot></slot>
       </div>
       ${arrowButton(ARROW_BUTTON_DIRECTION.FORWARD)}`;
@@ -486,10 +466,6 @@ __decorate([
     property({ type: String, attribute: 'active-tab-id', reflect: true }),
     __metadata("design:type", String)
 ], TabList.prototype, "activeTabId", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-labelledby' }),
-    __metadata("design:type", String)
-], TabList.prototype, "dataAriaLabelledby", void 0);
 __decorate([
     property({ type: String, attribute: 'data-aria-label' }),
     __metadata("design:type", String)