feat(editors): Show label of Action Pane also as tool-tip (openscd#838)

* Show label of action-pane also as tooltip (through title)

* Added test for title attribute.

Author: Dennis Labordus

src/action-pane.ts

@@ -72,15 +72,17 @@ export class ActionPane extends LitElement {
       <nav><slot name="action"></slot></nav>`;
 
     const headingLevel = Math.floor(Math.max(this.level, 1));
+    // Sometimes a TemplateResult is passed in as Label, not a string. So only when it's a string show a title.
+    const title = typeof this.label === 'string' ? this.label : '';
     switch (headingLevel) {
       case 1:
-        return html`<h1>${content}</h1>`;
+        return html`<h1 title="${title}">${content}</h1>`;
       case 2:
-        return html`<h2>${content}</h2>`;
+        return html`<h2 title="${title}">${content}</h2>`;
       case 3:
-        return html`<h3>${content}</h3>`;
+        return html`<h3 title="${title}">${content}</h3>`;
       default:
-        return html`<h4>${content}</h4>`;
+        return html`<h4 title="${title}">${content}</h4>`;
     }
   }
 

test/unit/action-pane.test.ts

@@ -6,10 +6,11 @@ import { ActionPane } from '../../src/action-pane.js';
 
 describe('action-pane', () => {
   let element: ActionPane;
+  const label = 'test label';
 
   beforeEach(async () => {
     element = await fixture(
-      html`<action-pane header="test header"></action-pane>`
+      html`<action-pane header="test header" label="${label}"></action-pane>`
     );
     await element.updateComplete;
   });
@@ -79,6 +80,38 @@ describe('action-pane', () => {
     expect(element.shadowRoot?.querySelector('h4')).to.not.exist;
   });
 
+  it('renders the title on the <h1>', async () => {
+    element.level = 1;
+    await element.updateComplete;
+    expect(
+      element.shadowRoot?.querySelector('h1')!.getAttribute('title')
+    ).to.be.equals(label);
+  });
+
+  it('renders the title on the <h2>', async () => {
+    element.level = 2;
+    await element.updateComplete;
+    expect(
+      element.shadowRoot?.querySelector('h2')!.getAttribute('title')
+    ).to.be.equals(label);
+  });
+
+  it('renders the title on the <h3>', async () => {
+    element.level = 3;
+    await element.updateComplete;
+    expect(
+      element.shadowRoot?.querySelector('h3')!.getAttribute('title')
+    ).to.be.equals(label);
+  });
+
+  it('renders the title on the <h4>', async () => {
+    element.level = 4;
+    await element.updateComplete;
+    expect(
+      element.shadowRoot?.querySelector('h4')!.getAttribute('title')
+    ).to.be.equals(label);
+  });
+
   it('does not set contrasted class property with odd level', async () => {
     element.level = 3;
     await element.updateComplete;