@dile/ui 2.25.3 → 2.25.6

package/components/app-drawer/src/DileAppDrawer.js

@@ -57,7 +57,7 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
         position: fixed;
         box-sizing: border-box;
         z-index: var(--dile-app-drawer-z-index, 99);
-        background-color: var(--dile-primary-light-color, #ddd);
+        background-color: var(--dile-app-drawer-background-color, var(--dile-primary-light-color, #ddd));
         transition: transform 0.3s ease;
         overflow: auto;
       }

package/components/button/src/DileButton.js

@@ -15,6 +15,7 @@ export class DileButton extends LitElement {
   constructor() {
     super();
     this.disabled = false;
+    this.type = "button";
     this._internals = this.attachInternals();
   }
 
@@ -51,8 +52,9 @@ export class DileButton extends LitElement {
         color: var(--dile-button-hover-text-color, var(--dile-on-primary-light-color, #303030));
         border-color:  var(--dile-button-hover-border-color, var(--dile-primary-color, #666666));
       }
-      button:focus {
-        outline: none;
+      button:focus-visible {
+        outline: 2px solid var(--dile-button-ring-color, #12c9e9);
+        outline-offset: 2px;
         box-shadow: 0 0 0 calc(0px + var(--dile-button-ring-offset-width, 3px)) var(--dile-button-ring-color, #12c9e9);
         border-color: var(--dile-button-ring-color, #12c9e9);
       }
@@ -84,7 +86,7 @@ export class DileButton extends LitElement {
       <button 
         @click=${this._onClick} 
         ?disabled=${this.disabled}
-        type=${this.type}
+        type=${this.type || "button"}
       ><slot></slot></button>
     `;
   }

package/components/card/src/DileCard.js

@@ -20,11 +20,11 @@ export class DileCard extends LitElement {
           background-color: var(--dile-card-grey-background-color, #f4f4f4);
           color: var(--dile-card-grey-text-color, #303030);
         }
-        h1, main, footer {
+        .card-title, main, footer {
           padding-right: var(--dile-card-padding-x, 1rem);
           padding-left: var(--dile-card-padding-x, 1rem);
         }
-        h1 {
+        .card-title {
           padding-top: var(--dile-card-padding-y, 1rem);
           font-size: var(--dile-card-title-font-size, 1.5rem);
           font-weight: var(--dile-card-title-font-weight, 300);
@@ -69,10 +69,16 @@ export class DileCard extends LitElement {
 
     static get properties() {
       return {
-        title: { type: String }
+        title: { type: String },
+        titleLevel: { type: Number }
       };
     }
 
+    constructor() {
+      super();
+      this.titleLevel = 2; // sensible default to avoid forcing h1 in page context
+    }
+
     render() {
       return html`
         ${this.titleTemplate}
@@ -84,9 +90,14 @@ export class DileCard extends LitElement {
     }
 
     get titleTemplate() {
-      return this.title 
-          ? html`<h1>${this.title}</h1>`
-          : ''
+      // Allow consumers to provide a custom title slot (e.g. an h2/h3) to control heading semantics
+      if (this.hasSlot('title')) {
+        return html`<div class="card-title"><slot name="title"></slot></div>`;
+      }
+
+      return this.title
+          ? html`<div class="card-title" role="heading" aria-level="${this.titleLevel}">${this.title}</div>`
+          : '';
     }
 
 

package/components/card/src/DileCardSlide.js

@@ -16,13 +16,25 @@ export class DileCardSlide extends DileSlideDown(DileCard) {
     return [
       ...super.styles,
       css`
-        h1 {
+        .card-title {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          cursor: pointer;
           padding-bottom: var(--dile-card-slide-title-padding-bottom, var(--dile-card-padding-y, 1rem));
         }
+        .card-title button {
+          all: unset;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          text-align: left;
+        }
+        .card-title button:focus-visible {
+          outline: 2px solid Highlight;
+          outline-offset: 2px;
+        }
         #content {
           height: 0;
           overflow: hidden;
@@ -35,7 +47,7 @@ export class DileCardSlide extends DileSlideDown(DileCard) {
           transition: transform 0.5s ease;
           --dile-icon-color: var(--dile-card-slide-icon-color, var(--dile-primary-color, #303030));
         }
-        h1.opened dile-icon {
+        .opened dile-icon {
           transform: rotate(0deg);
         }
         main {
@@ -49,36 +61,48 @@ export class DileCardSlide extends DileSlideDown(DileCard) {
     super();
     this.opened = false;
     this.icon = arrowDropDownIcon;
+    // unique id for aria-controls
+    this._contentId = `dile-card-content-${Math.random().toString(36).slice(2,9)}`;
   }
 
   firstUpdated() {
-    this.content = this.shadowRoot.getElementById('content');
+    // content element by generated id
+    this.content = this.shadowRoot.getElementById(this._contentId);
+    // ensure initial aria-hidden state
+    if (this.content) {
+      this.content.setAttribute('aria-hidden', String(!this.opened));
+    }
   }
 
   updated(changedProperties) {
     if (changedProperties.has('opened') && this.opened != undefined) {
       if (this.opened) {
         this.slideShow(this.content);
+        if (this.content) this.content.setAttribute('aria-hidden', 'false');
       } else {
         this.slideHide(this.content);
+        if (this.content) this.content.setAttribute('aria-hidden', 'true');
       }
     }
   }
 
   get titleTemplate() {
+    // Render a heading wrapper with a button inside so keyboard and semantics are correct.
     return this.title
       ? html`
-        <h1 @click="${this.toggle}" class="${this.opened ? 'opened' : ''}">
-          ${this.title}
-          <dile-icon .icon=${this.icon}></dile-icon>
-        </h1>`
+        <div class="card-title" role="heading" aria-level="${this.titleLevel}">
+          <button @click="${this.toggle}" class="${this.opened ? 'opened' : ''}" aria-expanded="${this.opened ? 'true' : 'false'}" aria-controls="${this._contentId}">
+            <span>${this.title}</span>
+            <dile-icon .icon=${this.icon}></dile-icon>
+          </button>
+        </div>`
       : ''
   }
 
   render() {
     return html`
       ${this.titleTemplate}
-      <div id="content">
+      <div id="${this._contentId}">
         <main>
           <slot></slot>
         </main>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.25.3",
+  "version": "2.25.6",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "210e3b9f6c0633ace3f52e41990e511cdc61851d"
+  "gitHead": "23545d34486a852eb091d262227ab9378599beca"
 }