@vaadin/dashboard 24.8.0-alpha7 → 24.8.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "24.8.0-alpha7",
+  "version": "24.8.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "24.8.0-alpha7",
-    "@vaadin/component-base": "24.8.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha7",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha7",
+    "@vaadin/button": "24.8.0-alpha9",
+    "@vaadin/component-base": "24.8.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha7",
-    "@vaadin/test-runner-commands": "24.8.0-alpha7",
+    "@vaadin/chai-plugins": "24.8.0-alpha9",
+    "@vaadin/test-runner-commands": "24.8.0-alpha9",
     "@vaadin/testing-helpers": "^1.1.0"
   },
   "cvdlName": "vaadin-dashboard",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7e65e14cbdcc372ab89620ba00e04251291d3c63"
+  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
 }

package/src/vaadin-dashboard-helpers.js

@@ -101,3 +101,31 @@ export function fireResize(element, colspanDelta, rowspanDelta) {
 export function fireRemove(element) {
   element.dispatchEvent(new CustomEvent('item-remove', { bubbles: true }));
 }
+
+/**
+ * Walks up the DOM tree starting from `node`, returning the first ancestor which is an instance of the given `baseClass`.
+ *
+ * @param {Node} node - starting node
+ * @param {Function} baseClass - constructor, e.g. `Dashboard`
+ * @returns {HTMLElement | null}
+ */
+export function findAncestorInstance(node, baseClass) {
+  while (node) {
+    if (node instanceof baseClass) {
+      return node;
+    }
+    if (node instanceof ShadowRoot) {
+      node = node.host;
+    } else {
+      const rootNode = node.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        node = rootNode.host;
+      } else if (node.parentNode) {
+        node = node.parentNode;
+      } else {
+        node = null;
+      }
+    }
+  }
+  return null;
+}

package/src/vaadin-dashboard-section.js

@@ -102,7 +102,6 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
         }
 
         ::slotted(*) {
-          --_vaadin-dashboard-title-level: 3;
           --_vaadin-dashboard-item-column: span
             min(
               var(--vaadin-dashboard-item-colspan, 1),
@@ -166,6 +165,11 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
         value: '',
       },
 
+      /* @private */
+      __rootHeadingLevel: {
+        type: Number,
+      },
+
       /** @private */
       __childCount: {
         type: Number,
@@ -184,7 +188,9 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
 
         <header part="header">
           ${this.__renderDragHandle()}
-          <h2 id="title" part="title">${this.sectionTitle}</h2>
+          <div id="title" role="heading" aria-level=${this.__rootHeadingLevel || 2} part="title"
+            >${this.sectionTitle}</div
+          >
           ${this.__renderRemoveButton()}
         </header>
       </div>

package/src/vaadin-dashboard-widget.js

@@ -13,9 +13,10 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
+import { findAncestorInstance, SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
+import { DashboardSection } from './vaadin-dashboard-section.js';
 
 /**
  * A Widget component for use with the Dashboard component
@@ -193,11 +194,15 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
       widgetTitle: {
         type: String,
         value: '',
-        observer: '__onWidgetTitleChanged',
       },
 
       /* @private */
-      __nestedHeadingLevel: {
+      __rootHeadingLevel: {
+        type: Number,
+      },
+
+      /* @private */
+      __isNestedWidget: {
         type: Boolean,
         value: false,
       },
@@ -213,10 +218,7 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
         ${this.__renderFocusButton('selectWidget')}
 
         <header part="header">
-          ${this.__renderDragHandle()}
-          ${this.__nestedHeadingLevel
-            ? html`<h3 id="title" part="title" .hidden=${!this.widgetTitle}>${this.widgetTitle}</h3>`
-            : html`<h2 id="title" part="title" .hidden=${!this.widgetTitle}>${this.widgetTitle}</h2>`}
+          ${this.__renderDragHandle()} ${this.__renderWidgetTitle()}
           <slot name="header-content"></slot>
           ${this.__renderRemoveButton()}
         </header>
@@ -240,13 +242,15 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
         this.toggleAttribute(attr, !!wrapper[attr]);
       });
       this.__i18n = wrapper.i18n;
+      this.__rootHeadingLevel = wrapper.__rootHeadingLevel;
     }
 
+    this.__updateNestedState();
     const undefinedAncestor = this.closest('*:not(:defined)');
     if (undefinedAncestor) {
-      customElements.whenDefined(undefinedAncestor.localName).then(() => queueMicrotask(() => this.__updateTitle()));
-    } else {
-      this.__updateTitle();
+      customElements.whenDefined(undefinedAncestor.localName).then(() => {
+        queueMicrotask(() => this.__updateNestedState());
+      });
     }
   }
 
@@ -259,14 +263,29 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
   }
 
   /** @private */
-  __onWidgetTitleChanged() {
-    this.__updateTitle();
+  __renderWidgetTitle() {
+    let effectiveHeadingLevel = this.__rootHeadingLevel;
+    // Default to 2 if not defined
+    if (effectiveHeadingLevel == null) {
+      effectiveHeadingLevel = 2;
+    }
+    // Increase level by 1 for widgets in sections
+    if (this.__isNestedWidget) {
+      effectiveHeadingLevel += 1;
+    }
+    return html`<div
+      id="title"
+      part="title"
+      role="heading"
+      aria-level=${effectiveHeadingLevel}
+      .hidden=${!this.widgetTitle}
+      >${this.widgetTitle}</div
+    >`;
   }
 
   /** @private */
-  __updateTitle() {
-    const titleLevel = getComputedStyle(this).getPropertyValue('--_vaadin-dashboard-title-level');
-    this.__nestedHeadingLevel = titleLevel === '3';
+  __updateNestedState() {
+    this.__isNestedWidget = !!findAncestorInstance(this, DashboardSection);
   }
 }
 

package/src/vaadin-dashboard.d.ts

@@ -202,11 +202,11 @@ export interface DashboardI18n {
  *
  * The following state attributes are available for styling:
  *
- * Attribute      | Description
- * ---------------|-------------
- * `editable`     | Set when the dashboard is editable.
- * `dense-layout` | Set when the dashboard is in dense mode.
- * `item-selected`| Set when an item is selected.
+ * Attribute            | Description
+ * ---------------------|-------------
+ * `editable`           | Set when the dashboard is editable.
+ * `dense-layout`       | Set when the dashboard is in dense mode.
+ * `item-selected`      | Set when an item is selected.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -243,6 +243,16 @@ declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends Das
    */
   editable: boolean;
 
+  /**
+   * Root heading level for sections and widgets. Defaults to 2.
+   *
+   * If changed to e.g. 1:
+   * - sections will have the attribute `aria-level` with value 1
+   * - non-nested widgets will have the attribute `aria-level` with value 1
+   * - nested widgets will have the attribute `aria-level` with value 2
+   */
+  rootHeadingLevel: number | null | undefined;
+
   /**
    * The object used to localize this component. To change the default
    * localization, replace this with an object that provides all properties, or

package/src/vaadin-dashboard.js

@@ -82,11 +82,11 @@ import { WidgetResizeController } from './widget-resize-controller.js';
  *
  * The following state attributes are available for styling:
  *
- * Attribute      | Description
- * ---------------|-------------
- * `editable`     | Set when the dashboard is editable.
- * `dense-layout` | Set when the dashboard is in dense mode.
- * `item-selected`| Set when an item is selected.
+ * Attribute            | Description
+ * ---------------------|-------------
+ * `editable`           | Set when the dashboard is editable.
+ * `dense-layout`       | Set when the dashboard is in dense mode.
+ * `item-selected`      | Set when an item is selected.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -166,6 +166,20 @@ class Dashboard extends DashboardLayoutMixin(
         type: Boolean,
       },
 
+      /**
+       * Root heading level for sections and widgets. Defaults to 2.
+       *
+       * If changed to e.g. 1:
+       * - sections will have the attribute `aria-level` with value 1
+       * - non-nested widgets will have the attribute `aria-level` with value 1
+       * - nested widgets will have the attribute `aria-level` with value 2
+       */
+      rootHeadingLevel: {
+        type: Number,
+        value: 2,
+        sync: true,
+      },
+
       /** @private */
       __childCount: {
         type: Number,
@@ -175,7 +189,7 @@ class Dashboard extends DashboardLayoutMixin(
   }
 
   static get observers() {
-    return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n)'];
+    return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n, rootHeadingLevel)'];
   }
 
   /**
@@ -261,6 +275,7 @@ class Dashboard extends DashboardLayoutMixin(
           wrapper.firstElementChild.toggleAttribute(attr, !!wrapper[attr]);
         });
         wrapper.firstElementChild.__i18n = this.__effectiveI18n;
+        wrapper.firstElementChild.__rootHeadingLevel = this.rootHeadingLevel;
       }
     });
   }
@@ -304,6 +319,7 @@ class Dashboard extends DashboardLayoutMixin(
 
         SYNCHRONIZED_ATTRIBUTES.forEach((attr) => section.toggleAttribute(attr, !!wrapper[attr]));
         section.__i18n = this.__effectiveI18n;
+        section.__rootHeadingLevel = this.rootHeadingLevel;
 
         // Render the subitems
         section.__childCount = item.items.length;
@@ -428,6 +444,7 @@ class Dashboard extends DashboardLayoutMixin(
     wrapper['first-child'] = item === getItemsArrayOfItem(item, this.items)[0];
     wrapper['last-child'] = item === getItemsArrayOfItem(item, this.items).slice(-1)[0];
     wrapper.i18n = this.__effectiveI18n;
+    wrapper.__rootHeadingLevel = this.rootHeadingLevel;
   }
 
   /** @private */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.8.0-alpha7",
+  "version": "24.8.0-alpha9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -136,7 +136,7 @@
         },
         {
           "name": "vaadin-dashboard",
-          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha7/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha7/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`editable`     | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`editable`           | Set when the dashboard is editable.\n`dense-layout`       | Set when the dashboard is in dense mode.\n`item-selected`      | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "dense-layout",
@@ -167,6 +167,17 @@
                 ]
               }
             },
+            {
+              "name": "root-heading-level",
+              "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -231,6 +242,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "rootHeadingLevel",
+                "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.8.0-alpha7",
+  "version": "24.8.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -58,7 +58,7 @@
         },
         {
           "name": "vaadin-dashboard",
-          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha7/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha7/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`editable`     | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`editable`           | Set when the dashboard is editable.\n`dense-layout`       | Set when the dashboard is in dense mode.\n`item-selected`      | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -96,6 +96,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".rootHeadingLevel",
+              "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@dashboard-item-move-mode-changed",
               "description": "Fired when an item move mode changed",