only show headline if it has content. plus testing

Author: nielslyngsoe

packages/uui-box/lib/uui-box.element.ts

@@ -75,7 +75,11 @@ export class UUIBoxElement extends LitElement {
       this.headline !== null
         ? ''
         : 'display: none'}>
-      <h5 id="headline">
+      <h5
+        id="headline"
+        style=${this._headlineSlotHasContent || this.headline !== null
+          ? ''
+          : 'display: none'}>
         ${this.headline}
         <slot name="headline" @slotchange=${this._headlineSlotChanged}></slot>
       </h5>

packages/uui-box/lib/uui-box.test.ts

@@ -5,8 +5,7 @@ import { UUIBoxElement } from './uui-box.element';
 describe('UUIBox', () => {
   let element: UUIBoxElement;
   beforeEach(async () => {
-    element = await fixture(html` <uui-box>
-      <div slot="header">Header</div>
+    element = await fixture(html` <uui-box headline="headline">
       Main
     </uui-box>`);
   });
@@ -41,4 +40,18 @@ describe('UUIBox', () => {
       expect(slot).to.exist;
     });
   });
+
+  describe('UUIBox', () => {
+    let element: UUIBoxElement;
+    beforeEach(async () => {
+      element = await fixture(html` <uui-box>
+        <div slot="header">Something in the header</div>
+        Main
+      </uui-box>`);
+    });
+
+    it('passes the a11y audit', async () => {
+      await expect(element).shadowDom.to.be.accessible();
+    });
+  });
 });