@vaadin/accordion 24.0.0-alpha6 → 24.0.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha6",
-    "@vaadin/details": "24.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha6"
+    "@vaadin/component-base": "24.0.0-alpha7",
+    "@vaadin/details": "24.0.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha7"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
+  "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
 }

package/src/vaadin-accordion-panel.js

@@ -7,17 +7,16 @@ import './vaadin-accordion-heading.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotObserveController } from '@vaadin/component-base/src/slot-observe-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { DetailsMixin } from '@vaadin/details/src/vaadin-details-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { DelegateStateMixin } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-class SummaryController extends SlotController {
+class SummaryController extends SlotObserveController {
   constructor(host) {
     super(host, 'summary', 'vaadin-accordion-heading', {
-      useUniqueId: true,
       initializer: (node, host) => {
         host._setFocusElement(node);
         host.stateTarget = node;
@@ -26,6 +25,25 @@ class SummaryController extends SlotController {
   }
 }
 
+class ContentController extends SlotObserveController {
+  /**
+   * Override method from `SlotController` to change
+   * the ID prefix for the default slot content.
+   *
+   * @param {HTMLElement} host
+   * @return {string}
+   * @protected
+   * @override
+   */
+  static generateId(host) {
+    return super.generateId(host, 'content');
+  }
+
+  constructor(host) {
+    super(host, '', null, { multiple: true });
+  }
+}
+
 /**
  * The accordion panel element.
  *
@@ -114,22 +132,9 @@ class AccordionPanel extends DetailsMixin(
   ready() {
     super.ready();
 
-    // TODO: Generate unique IDs for a heading and a content panel when added to the slot,
-    // and use them to set `aria-controls` and `aria-labelledby` attributes, respectively.
-
-    this._collapsible = this.shadowRoot.querySelector('[part="content"]');
-    this.addController(new SummaryController(this));
-
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-
-    this._tooltipController.setTarget(this.focusElement);
-    this._tooltipController.setPosition('bottom-start');
-
-    // Wait for heading element render to complete
-    afterNextRender(this, () => {
-      this._toggleElement = this.focusElement.$.button;
-    });
+    this._initSummary();
+    this._initContent();
+    this._initTooltip();
   }
 
   /**
@@ -142,6 +147,50 @@ class AccordionPanel extends DetailsMixin(
   _setAriaDisabled() {
     // The `aria-disabled` is set on the details summary.
   }
+
+  /** @private */
+  _initSummary() {
+    this._summaryController = new SummaryController(this);
+    this.addController(this._summaryController);
+
+    // Wait for heading element render to complete
+    afterNextRender(this, () => {
+      this._toggleElement = this.focusElement.$.button;
+    });
+  }
+
+  /** @private */
+  _initContent() {
+    this._contentController = new ContentController(this);
+    this._contentController.addEventListener('slot-content-changed', (event) => {
+      // Store nodes to toggle `aria-hidden` attribute
+      const content = event.target.nodes || [];
+      this._contentElements = content;
+
+      // See https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+      const node = content[0];
+      if (node) {
+        node.setAttribute('role', 'region');
+        node.setAttribute('aria-labelledby', this.focusElement.id);
+      }
+
+      if (node && node.parentNode === this && node.id) {
+        this.focusElement.setAttribute('aria-controls', node.id);
+      } else {
+        this.focusElement.removeAttribute('aria-controls');
+      }
+    });
+    this.addController(this._contentController);
+  }
+
+  /** @private */
+  _initTooltip() {
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+
+    this._tooltipController.setTarget(this.focusElement);
+    this._tooltipController.setPosition('bottom-start');
+  }
 }
 
 customElements.define(AccordionPanel.is, AccordionPanel);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -73,7 +73,7 @@
         },
         {
           "name": "vaadin-accordion",
-          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget —\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha6/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget —\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha7/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "opened",
@@ -98,6 +98,44 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "rootPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "importPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "root",
+                "description": "",
+                "value": {
+                  "type": [
+                    "StampedTemplate",
+                    "HTMLElement",
+                    "ShadowRoot"
+                  ]
+                }
+              },
+              {
+                "name": "$",
+                "description": "",
+                "value": {
+                  "type": [
+                    "Object.<string, Element>"
+                  ]
+                }
+              },
               {
                 "name": "opened",
                 "description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.0.0-alpha6",
+  "version": "24.0.0-alpha7",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -36,9 +36,37 @@
         },
         {
           "name": "vaadin-accordion",
-          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget —\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha6/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget —\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha7/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": ".rootPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".importPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".root",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".$",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".opened",
               "description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",