@vaadin/accordion 23.2.2 → 23.3.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "23.2.2",
+  "version": "23.3.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.2.2",
-    "@vaadin/details": "~23.2.2",
-    "@vaadin/vaadin-lumo-styles": "~23.2.2",
-    "@vaadin/vaadin-material-styles": "~23.2.2",
-    "@vaadin/vaadin-themable-mixin": "~23.2.2"
+    "@vaadin/component-base": "23.3.0-alpha2",
+    "@vaadin/details": "23.3.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a98818979098f4542ce557a58858fb6dad910a25"
+  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
 }

package/src/vaadin-accordion.d.ts

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { AccordionPanel } from './vaadin-accordion-panel.js';
 
@@ -69,7 +70,7 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Accordion extends ElementMixin(ThemableMixin(HTMLElement)) {
+declare class Accordion extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   /**
    * The index of currently opened panel. First panel is opened by
    * default. Only one panel can be opened at the same time.

package/src/vaadin-accordion.js

@@ -6,6 +6,7 @@
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { AccordionPanel } from './vaadin-accordion-panel.js';
 
@@ -55,9 +56,10 @@ import { AccordionPanel } from './vaadin-accordion-panel.js';
  *
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes KeyboardDirectionMixin
  * @mixes ThemableMixin
  */
-class Accordion extends ThemableMixin(ElementMixin(PolymerElement)) {
+class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -115,35 +117,21 @@ class Accordion extends ThemableMixin(ElementMixin(PolymerElement)) {
     this._boundUpdateOpened = this._updateOpened.bind(this);
   }
 
-  /**
-   * @return {Element | null}
-   * @protected
-   */
-  get focused() {
-    return this.getRootNode().activeElement;
-  }
-
   /**
    * @protected
+   * @override
    */
   focus() {
     if (this._observer) {
       this._observer.flush();
     }
-    if (Array.isArray(this.items)) {
-      const idx = this._getAvailableIndex(0);
-      if (idx >= 0) {
-        this.items[idx].focus();
-      }
-    }
+    super.focus();
   }
 
   /** @protected */
   ready() {
     super.ready();
 
-    this.addEventListener('keydown', (e) => this._onKeydown(e));
-
     this._observer = new FlattenedNodesObserver(this, (info) => {
       this._setItems(this._filterItems(Array.from(this.children)));
 
@@ -153,6 +141,18 @@ class Accordion extends ThemableMixin(ElementMixin(PolymerElement)) {
     });
   }
 
+  /**
+   * Override method inherited from `KeyboardDirectionMixin`
+   * to use the stored list of accordion panels as items.
+   *
+   * @return {Element[]}
+   * @protected
+   * @override
+   */
+  _getItems() {
+    return this.items;
+  }
+
   /**
    * @param {!Array<!Element>} array
    * @return {!Array<!AccordionPanel>}
@@ -173,71 +173,21 @@ class Accordion extends ThemableMixin(ElementMixin(PolymerElement)) {
   }
 
   /**
+   * Override an event listener from `KeyboardMixin`
+   * to only handle details toggle buttons events.
+   *
    * @param {!KeyboardEvent} event
    * @protected
+   * @override
    */
-  _onKeydown(event) {
+  _onKeyDown(event) {
     // Only check keyboard events on details toggle buttons
     const item = event.composedPath()[0];
     if (!this.items.some((el) => el.focusElement === item)) {
       return;
     }
 
-    const currentIdx = this.items.indexOf(this.focused);
-    let idx;
-    let increment;
-
-    switch (event.key) {
-      case 'ArrowUp':
-        increment = -1;
-        idx = currentIdx - 1;
-        break;
-      case 'ArrowDown':
-        increment = 1;
-        idx = currentIdx + 1;
-        break;
-      case 'Home':
-        increment = 1;
-        idx = 0;
-        break;
-      case 'End':
-        increment = -1;
-        idx = this.items.length - 1;
-        break;
-      default:
-      // Do nothing.
-    }
-
-    idx = this._getAvailableIndex(idx, increment);
-    if (idx >= 0) {
-      this.items[idx].focus();
-      this.items[idx].setAttribute('focus-ring', '');
-      event.preventDefault();
-    }
-  }
-
-  /**
-   * @param {number} index
-   * @param {number} increment
-   * @return {number}
-   * @protected
-   */
-  _getAvailableIndex(index, increment) {
-    const totalItems = this.items.length;
-    let idx = index;
-    for (let i = 0; typeof idx === 'number' && i < totalItems; i++, idx += increment || 1) {
-      if (idx < 0) {
-        idx = totalItems - 1;
-      } else if (idx >= totalItems) {
-        idx = 0;
-      }
-
-      const item = this.items[idx];
-      if (!item.disabled) {
-        return idx;
-      }
-    }
-    return -1;
+    super._onKeyDown(event);
   }
 
   /** @private */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "23.2.2",
+  "version": "23.3.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -97,7 +97,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    <div slot=\"summary\">Panel 1</div>\n    This panel is opened, so the text is visible by default.\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <div slot=\"summary\">Panel 2</div>\n    After opening this panel, the first one becomes closed.\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/23.2.2/#/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    <div slot=\"summary\">Panel 1</div>\n    This panel is opened, so the text is visible by default.\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <div slot=\"summary\">Panel 2</div>\n    After opening this panel, the first one becomes closed.\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "23.2.2",
+  "version": "23.3.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -51,7 +51,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    <div slot=\"summary\">Panel 1</div>\n    This panel is opened, so the text is visible by default.\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <div slot=\"summary\">Panel 2</div>\n    After opening this panel, the first one becomes closed.\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/23.2.2/#/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    <div slot=\"summary\">Panel 1</div>\n    This panel is opened, so the text is visible by default.\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <div slot=\"summary\">Panel 2</div>\n    After opening this panel, the first one becomes closed.\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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": [
             {