move the title element inside the shadow root

vaadin · Oct 3, 2024 · ab4e01b · ab4e01b
1 parent 844d4cf
commit ab4e01b
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 186 deletions.
diff --git a/packages/dashboard/src/title-controller.js b/packages/dashboard/src/title-controller.js
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -14,7 +14,6 @@ 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 { TitleController } from './title-controller.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
 import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
@@ -181,7 +180,6 @@ class DashboardSection extends DashboardItemMixin(
  sectionTitle: {
  type: String,
  value: '',
- observer: '__onSectionTitleChanged',
  },
  };
  }
@@ -194,7 +192,7 @@ class DashboardSection extends DashboardItemMixin(
  <div id="focustrap">
  <header part="header">
  ${this.__renderDragHandle()}
- <slot name="title" id="title" @slotchange="${this.__onTitleSlotChange}"></slot>
+ <h2 id="title" part="title">${this.sectionTitle}</h2>
  ${this.__renderRemoveButton()}
  </header>
  </div>
@@ -203,30 +201,10 @@ class DashboardSection extends DashboardItemMixin(
  `;
  }
 
- constructor() {
- super();
- this.__titleController = new TitleController(this);
- this.__titleController.addEventListener('slot-content-changed', (event) => {
- const { node } = event.target;
- if (node) {
- this.setAttribute('aria-labelledby', node.id);
- }
- });
- }
-
  /** @protected */
  ready() {
  super.ready();
- this.addController(this.__titleController);
-
- if (!this.hasAttribute('role')) {
- this.setAttribute('role', 'section');
- }
- }
-
- /** @private */
- __onSectionTitleChanged(sectionTitle) {
- this.__titleController.setTitle(sectionTitle);
+ this.role ??= 'section';
  }
 }
 

diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -15,7 +15,6 @@ 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 { TitleController } from './title-controller.js';
 import { 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';
@@ -200,6 +199,12 @@ class DashboardWidget extends DashboardItemMixin(
  value: '',
  observer: '__onWidgetTitleChanged',
  },
+
+ /* @private */
+ __nestedHeadingLevel: {
+ type: Boolean,
+ value: false,
+ },
  };
  }
 
@@ -211,7 +216,9 @@ class DashboardWidget extends DashboardItemMixin(
  <div id="focustrap">
  <header part="header">
  ${this.__renderDragHandle()}
- <slot name="title" id="title" @slotchange="${this.__onTitleSlotChange}"></slot>
+ ${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>`}
  <slot name="header-content"></slot>
  ${this.__renderRemoveButton()}
  </header>
@@ -225,17 +232,6 @@ class DashboardWidget extends DashboardItemMixin(
  `;
  }
 
- constructor() {
- super();
- this.__titleController = new TitleController(this);
- this.__titleController.addEventListener('slot-content-changed', (event) => {
- const { node } = event.target;
- if (node) {
- this.setAttribute('aria-labelledby', node.id);
- }
- });
- }
-
  /** @protected */
  connectedCallback() {
  super.connectedCallback();
@@ -259,11 +255,7 @@ class DashboardWidget extends DashboardItemMixin(
  /** @protected */
  ready() {
  super.ready();
- this.addController(this.__titleController);
-
- if (!this.hasAttribute('role')) {
- this.setAttribute('role', 'article');
- }
+ this.role ??= 'article';
  }
 
  /** @private */
@@ -273,7 +265,8 @@ class DashboardWidget extends DashboardItemMixin(
 
  /** @private */
  __updateTitle() {
- this.__titleController.setTitle(this.widgetTitle);
+ const titleLevel = getComputedStyle(this).getPropertyValue('--_vaadin-dashboard-title-level');
+ this.__nestedHeadingLevel = titleLevel === '3';
  }
 }
 

diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
@@ -10,6 +10,7 @@ import {
  getColumnWidths,
  getRowHeights,
  getScrollingContainer,
+ getTitleElement,
  onceResized,
  setColspan,
  setMaximumColumnCount,
@@ -511,7 +512,7 @@ describe('dashboard layout', () => {
  });
 
  it('should not use minimum row height for section header row', async () => {
- const title = section.querySelector<HTMLHeadingElement>('[slot="title"]')!;
+ const title = getTitleElement(section);
  title.style.height = '100%';
 
  const titleHeight = title.offsetHeight;

diff --git a/packages/dashboard/test/dashboard-section.test.ts b/packages/dashboard/test/dashboard-section.test.ts
@@ -8,6 +8,7 @@ import {
  getMoveBackwardButton,
  getMoveForwardButton,
  getRemoveButton,
+ getTitleElement,
 } from './helpers.js';
 
 describe('dashboard section', () => {
@@ -40,28 +41,10 @@ describe('dashboard section', () => {
  expect(section.getAttribute('role')).to.eql('region');
  });
 
- it('should add title id to aria-labelledby attribute when using property', async () => {
- section.sectionTitle = 'Custom title';
- await nextFrame();
- const title = section.querySelector('[slot="title"]');
- expect(section.getAttribute('aria-labelledby')).equal(title?.id);
- });
-
- it('should add title id to aria-labelledby attribute when using slot', async () => {
- const title = document.createElement('div');
- title.id = 'custom-title';
- title.slot = 'title';
- title.textContent = 'Custom title';
- section.appendChild(title);
-
- await nextFrame();
- expect(section.getAttribute('aria-labelledby')).equal(title?.id);
- });
-
  it('should have text content for the title', async () => {
  section.sectionTitle = 'Custom title';
  await nextFrame();
- const title = section.querySelector('[slot="title"]');
+ const title = getTitleElement(section);
  expect(title?.textContent).equal('Custom title');
  });
  });
@@ -102,7 +85,7 @@ describe('dashboard section', () => {
  section.sectionTitle = null;
  await nextFrame();
 
- const title = section.querySelector('[slot="title"]');
+ const title = getTitleElement(section);
  expect(title?.textContent).to.eql('');
  });
  });