@dile/ui 3.18.2 → 3.18.4

package/components/card/src/DileCardSlide.js

@@ -3,16 +3,18 @@ import { DileCard } from './DileCard.js';
 import { DileSlideDown } from '../../../mixins/slide-down/index.js';
 import { arrowDropDownIcon } from '@dile/icons';
 import '@dile/ui/components/icon/icon.js';
+import '@dile/iconlib/dile-iconlib.js';
 
 export class DileCardSlide extends DileSlideDown(DileCard) {
   static get properties() {
     return {
       opened: { type: Boolean },
       icon: { type: Object },
+      decorativeIcon: { type: String },
     }
   }
 
-  static get styles() {
+      static get styles() {
     return [
       ...super.styles,
       css`
@@ -41,6 +43,12 @@ export class DileCardSlide extends DileSlideDown(DileCard) {
           transition: height 0.5s ease-in;
           -webkit-transition: height 0.5s ease-in;
         }
+        .decorative-icon {
+          flex-shrink: 0;
+          margin-right: 0.5rem;
+          --dile-icon-size: var(--dile-card-slide-decorative-icon-size, 24px);
+          --dile-icon-color: var(--dile-card-slide-decorative-icon-color, var(--dile-primary-dark-color, #303030));
+        }
         dile-icon {
           flex-shrink: 0;
           transform: rotate(-90deg);
@@ -93,6 +101,7 @@ export class DileCardSlide extends DileSlideDown(DileCard) {
       ? html`
         <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}">
+            ${this.decorativeIcon ? html`<dile-iconlib class="decorative-icon" icon=${this.decorativeIcon} aria-hidden="true"></dile-iconlib>` : ''}
             <span>${this.title}</span>
             <dile-icon .icon=${this.icon}></dile-icon>
           </button>

package/components/menu-overlay/src/DileMenuOverlay.js

@@ -46,6 +46,28 @@ export class DileMenuOverlay extends DileOverlay(DileCloseDocumentClick(LitEleme
   constructor() {
     super();
     this.closeOnClickInside = false;
+    this._escKeydownHandler = this._onEscKeydown.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // In the capture phase, so an opened menu gets the key before the layers that contain it, like a modal.
+    window.addEventListener('keydown', this._escKeydownHandler, true);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('keydown', this._escKeydownHandler, true);
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('_overlayClass') && this._overlayClass === 'opened') {
+      this.dispatchEvent(new CustomEvent('overlay-ready', {
+        bubbles: true,
+        composed: true,
+      }));
+    }
   }
 
   render() {
@@ -56,6 +78,7 @@ export class DileMenuOverlay extends DileOverlay(DileCloseDocumentClick(LitEleme
       <div
         id="overlay"
         class="${this._overlayClass}"
+        ?inert="${!this._overlayClass && !this._opening}"
         @click="${this.clickHandler}"
       >
         <slot name="content"></slot>
@@ -63,6 +86,33 @@ export class DileMenuOverlay extends DileOverlay(DileCloseDocumentClick(LitEleme
     `;
   }
 
+  open() {
+    if (!this._overlayClass && !this._opening) {
+      this._focusBeforeOpen = this._getActiveElement();
+    }
+    super.open();
+  }
+
+  _getActiveElement() {
+    let active = document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+      active = active.shadowRoot.activeElement;
+    }
+    return active;
+  }
+
+  _onEscKeydown(e) {
+    if (e.key !== 'Escape' || this._overlayClass !== 'opened') {
+      return;
+    }
+    // Only the menu closes: a modal or drawer that contains it stays opened until the next Escape.
+    e.stopPropagation();
+    this.close();
+    if (this.overlay.matches(':focus-within') && this._focusBeforeOpen?.isConnected) {
+      this._focusBeforeOpen.focus();
+    }
+  }
+
   clickHandler(e) {
     if(! this.closeOnClickInside) {
       e.stopPropagation();

package/components/selector/src/DileSelectorItem.js

@@ -1,4 +1,5 @@
 import { html, css, LitElement } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { DileSelectableItem } from "../../../mixins/selectable/index.js";
 import '@dile/iconlib/dile-iconlib.js';
 
@@ -21,7 +22,19 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
         display: block;
         cursor: pointer;
       }
-      article {
+      .item {
+        appearance: none;
+        box-sizing: border-box;
+        width: 100%;
+        margin: 0;
+        border: 0;
+        border-radius: 0;
+        font: inherit;
+        letter-spacing: inherit;
+        word-spacing: inherit;
+        text-align: inherit;
+        text-transform: inherit;
+        cursor: inherit;
         display: flex;
         align-items: center;
         padding-top: var(--dile-selector-padding-y, 0.2rem); 
@@ -32,6 +45,11 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
         color: var(--dile-selector-text-color, var(--dile-on-background-color, #303030));
         transition: all 0.3s ease-in;
       }
+      .item:focus-visible {
+        outline: var(--dile-selector-focus-ring-width, 2px) solid var(--dile-selector-focus-ring-color, currentColor);
+        outline-offset: var(--dile-selector-focus-ring-offset, -2px);
+        transition-property: background-color, color;
+      }
       .selected {
         background-color: var(--dile-selector-selected-background-color, #039be5);
         color: var(--dile-selector-selected-text-color, #fff);
@@ -59,8 +77,7 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
       .selected .icon dile-iconlib {
         --dile-icon-color: var(--dile-selector-selected-icon-color, #fff);
       }
-      a {
-        display: block;
+      a.item {
         text-decoration: var(--dile-selector-text-decoration, none);
       }
     `;
@@ -71,6 +88,8 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
       icon: { type: String },
       iconlibIcon: { type: String },
       href: { type: String },
+      /** ARIA role of the inner control. dile-selector-overlay sets it to "menuitem" */
+      itemRole: { type: String },
     };
   }
 
@@ -80,29 +99,55 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
   }
 
   render() {
-    return html`
-      ${this.href == '' 
-        ? this.itemTemplate
-        : html`<a href="${this.href}">${this.itemTemplate}</a>`
-       }
-    `;
+    const itemClass = `item ${this.selected ? 'selected' : ''}`;
+    const ariaCurrent = ifDefined(this.selected ? 'true' : undefined);
+    const role = ifDefined(this.itemRole || undefined);
+    return this.href == ''
+      ? html`<button
+          type="button"
+          class="${itemClass}"
+          role="${role}"
+          aria-current="${ariaCurrent}"
+          @click="${this.select}"
+        >${this.itemTemplate}</button>`
+      : html`<a
+          href="${this.href}"
+          class="${itemClass}"
+          role="${role}"
+          aria-current="${ariaCurrent}"
+          @click="${this.select}"
+          @keydown="${this._onLinkKeydown}"
+        >${this.itemTemplate}</a>`;
   }
 
   get itemTemplate() {
     return html`
-      <article @click='${this.select}' class="${this.selected ? 'selected' : ''}">
-        ${this.icon
-          ? html`<div class="icon">${this.iconElement(this.icon)}</div>`
-          : ''
-        }
-        ${this.iconlibIcon
-          ? html`<div class="icon">${this.renderIconlibIcon(this.iconlibIcon)}</div>`
-          : ''
-        }
-        <div class="line"><slot></slot></div>
-      </article>
+      ${this.icon
+        ? html`<span class="icon">${this.iconElement(this.icon)}</span>`
+        : ''
+      }
+      ${this.iconlibIcon
+        ? html`<span class="icon">${this.renderIconlibIcon(this.iconlibIcon)}</span>`
+        : ''
+      }
+      <span class="line"><slot></slot></span>
     `;
   }
+
+  // A native link is only activated with Enter
+  _onLinkKeydown(e) {
+    if (e.key === ' ') {
+      e.preventDefault();
+      if (!e.repeat) {
+        e.currentTarget.click();
+      }
+    }
+  }
+
+  focus(options) {
+    this.shadowRoot?.querySelector('.item')?.focus(options);
+  }
+
   iconElement(icon) {
     return icons[icon];
   }

package/components/selector/src/DileSelectorOverlay.js

@@ -21,7 +21,11 @@ export class DileSelectorOverlay extends DileSelectable(LitElement) {
 
       _displayLabel: { state: true },
 
-      /** Accessible label for the trigger when there is no visible label text */
+      _menuOpened: { state: true },
+
+      /** Accessible text saying that the trigger opens a menu of options. It's the whole accessible name
+       *  when there is no visible label text, and it follows the label text when there is one.
+       *  Set it to translate it, or to an empty string to expose only the label text. */
       triggerAriaLabel: { type: String },
 
       /** Forwarded to the internal dile-menu-overlay */
@@ -56,6 +60,7 @@ export class DileSelectorOverlay extends DileSelectable(LitElement) {
     this.dynamicLabel = false;
     this.icon = 'ellipsis-vertical';
     this._displayLabel = null;
+    this._menuOpened = false;
     this.triggerAriaLabel = 'Options';
     this.horizontalAlign = 'under_left';
     this.verticalAlign = 'bottom';
@@ -71,6 +76,9 @@ export class DileSelectorOverlay extends DileSelectable(LitElement) {
         moveTop="${this.moveTop}"
         moveLeft="${this.moveLeft}"
         closeOnClickInside
+        @overlay-opened="${this._onOverlayOpened}"
+        @overlay-ready="${this._onOverlayReady}"
+        @overlay-closed="${this._onOverlayClosed}"
       >
         <span
           slot="trigger"
@@ -78,7 +86,8 @@ export class DileSelectorOverlay extends DileSelectable(LitElement) {
           role="button"
           tabindex="0"
           aria-haspopup="true"
-          aria-label="${this._displayLabel || this.triggerAriaLabel}"
+          aria-expanded="${this._menuOpened ? 'true' : 'false'}"
+          aria-label="${this._triggerAccessibleName}"
           @keydown="${this._onTriggerKeydown}"
         >
           ${this._displayLabel
@@ -86,8 +95,8 @@ export class DileSelectorOverlay extends DileSelectable(LitElement) {
             : html`<dile-lucide-icon icon="${this.icon}" rounded></dile-lucide-icon>`
           }
         </span>
-        <div slot="content">
-          <slot></slot>
+        <div slot="content" role="menu" aria-labelledby="trigger" @keydown="${this._onMenuKeydown}">
+          <slot @slotchange="${this._onSlotChange}"></slot>
         </div>
       </dile-menu-overlay>
     `;
@@ -124,10 +133,88 @@ export class DileSelectorOverlay extends DileSelectable(LitElement) {
     this._displayLabel = selectedItem ? selectedItem.textContent.trim() : this.label;
   }
 
+  get _triggerAccessibleName() {
+    if (!this._displayLabel) {
+      return this.triggerAriaLabel;
+    }
+    return !this.triggerAriaLabel || this.triggerAriaLabel === this._displayLabel
+      ? this._displayLabel
+      : `${this._displayLabel}, ${this.triggerAriaLabel}`;
+  }
+
+  get _menu() {
+    return this.shadowRoot.querySelector('dile-menu-overlay');
+  }
+
+  // Children that aren't options (e.g. a separator) and hidden options are skipped.
+  get _focusableItems() {
+    return this.getItems().filter((item) => 'selected' in item && item.getClientRects().length > 0);
+  }
+
+  _onSlotChange() {
+    this.getItems().forEach((item) => {
+      item.itemRole = 'menuitem';
+    });
+  }
+
+  _onOverlayOpened(e) {
+    if (e.target === e.currentTarget) {
+      this._menuOpened = true;
+    }
+  }
+
+  _onOverlayReady(e) {
+    if (e.target === e.currentTarget) {
+      const items = this._focusableItems;
+      (items.find((item) => item.selected) ?? items[0])?.focus();
+    }
+  }
+
+  _onOverlayClosed(e) {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+    this._menuOpened = false;
+    // When the menu closes by clicking elsewhere, the focus is already out of here and has to stay there.
+    if (this.matches(':focus-within')) {
+      this.shadowRoot.getElementById('trigger').focus();
+    }
+  }
+
   _onTriggerKeydown(e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
-      e.currentTarget.click();
+      if (!e.repeat) {
+        e.currentTarget.click();
+      }
+    }
+  }
+
+  _onMenuKeydown(e) {
+    if (e.key === 'Tab') {
+      // The focus goes back to the trigger, so the browser moves it from there to the next element of the page.
+      this._menu.close();
+      return;
+    }
+    if (e.altKey || e.ctrlKey || e.metaKey) {
+      return;
+    }
+    if ((e.key === 'Enter' || e.key === ' ') && e.repeat) {
+      // Keeping the key pressed on the trigger must not activate the option that received the focus.
+      e.preventDefault();
+      return;
+    }
+    const items = this._focusableItems;
+    const current = items.findIndex((item) => item.matches(':focus-within'));
+    const nextIndex = {
+      ArrowDown: (current + 1) % items.length,
+      ArrowUp: (current - 1 + items.length) % items.length,
+      Home: 0,
+      End: items.length - 1,
+    }[e.key];
+    if (items[nextIndex]) {
+      e.preventDefault();
+      items[nextIndex].focus();
     }
   }
 }

package/components/tabs/src/DileTab.js

@@ -8,16 +8,36 @@ export class DileTab  extends DileSelectableItem(LitElement) {
     return {
       href: { type: String },
       target: { type: String },
+      /** If this tab is in the page tab sequence. dile-tabs keeps it true only on one of its tabs */
+      tabbable: { type: Boolean, attribute: false },
     };
   }
 
+  constructor() {
+    super();
+    this.tabbable = true;
+  }
+
   static get styles() {
     return css`
       :host {
         display: inline-block;
         margin: 0 3px;
       }
-      article {
+      .tab {
+        appearance: none;
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        border-radius: 0;
+        font: inherit;
+        letter-spacing: inherit;
+        word-spacing: inherit;
+        text-align: inherit;
+        text-transform: inherit;
+        text-decoration: none;
         border-top-left-radius: var(--dile-tab-border-radius, 4px);
         border-top-right-radius: var(--dile-tab-border-radius, 4px);
         transition: all 0.3s ease;
@@ -28,7 +48,13 @@ export class DileTab  extends DileSelectableItem(LitElement) {
         font-weight: var(--dile-tab-font-weight, normal);
         font-size: var(--dile-tab-font-size, 1rem);
       }
-      div.label {
+      .tab:focus-visible {
+        outline: var(--dile-tab-focus-ring-width, 2px) solid var(--dile-tab-focus-ring-color, currentColor);
+        outline-offset: var(--dile-tab-focus-ring-offset, -2px);
+        transition-property: background-color, color;
+      }
+      .label {
+        display: block;
         padding: var(--dile-tab-padding, 8px 12px 6px 12px);
         text-transform: var(--dile-tab-text-transform, uppercase);
         white-space: nowrap;
@@ -38,7 +64,7 @@ export class DileTab  extends DileSelectableItem(LitElement) {
         color: var(--dile-tab-selected-text-color, var(--dile-on-primary-dark-color, #000));
         border: var(--dile-tab-selected-border, none);
       }
-      span {
+      .mark {
         display: block;
         height: var(--dile-tab-selected-line-height, 5px);
         width: 0;
@@ -48,11 +74,6 @@ export class DileTab  extends DileSelectableItem(LitElement) {
       .markselected {
         width: 100%;
       }
-      a {
-        display: block;
-        color: inherit;
-        text-decoration: none;
-      }
       .line {
         display: flex;
         justify-content: center;
@@ -61,22 +82,55 @@ export class DileTab  extends DileSelectableItem(LitElement) {
   }
 
   render() {
+    const tabClass = `tab ${this.selected ? 'selected' : ''}`;
+    const ariaSelected = this.selected ? 'true' : 'false';
+    const tabindex = this.tabbable ? '0' : '-1';
     if (this.href) {
       return html`
-        <a href="${this.href}" target="${ifDefined(this.target)}">${this.tabTemplate}</a>
+        <a
+          href="${this.href}"
+          target="${ifDefined(this.target)}"
+          class="${tabClass}"
+          role="tab"
+          aria-selected="${ariaSelected}"
+          tabindex="${tabindex}"
+          @click="${this.select}"
+          @keydown="${this._onLinkKeydown}"
+        >${this.tabTemplate}</a>
       `;
     }
-    return this.tabTemplate;
+    return html`
+      <button
+        type="button"
+        class="${tabClass}"
+        role="tab"
+        aria-selected="${ariaSelected}"
+        tabindex="${tabindex}"
+        @click="${this.select}"
+      >${this.tabTemplate}</button>
+    `;
   }
 
   get tabTemplate() {
     return html`
-      <article @click='${this.select}' class="${this.selected ? 'selected' : ''}">
-        <div class="label"><slot></slot></div>
-        <div class="line">
-          <span class="${this.selected ? 'markselected' : ''}"></span>
-        </div>
-      </article>
+      <span class="label"><slot></slot></span>
+      <span class="line">
+        <span class="mark ${this.selected ? 'markselected' : ''}"></span>
+      </span>
     `;
   }
+
+  // A native link is only activated with Enter
+  _onLinkKeydown(e) {
+    if (e.key === ' ') {
+      e.preventDefault();
+      if (!e.repeat) {
+        e.currentTarget.click();
+      }
+    }
+  }
+
+  focus(options) {
+    this.shadowRoot?.querySelector('.tab')?.focus(options);
+  }
 }

package/components/tabs/src/DileTabs.js

@@ -9,4 +9,67 @@ export class DileTabs extends DileSelectable(LitElement) {
       }
     `;
   }
+
+  constructor() {
+    super();
+    this.addEventListener('keydown', this._onKeydown);
+    this.addEventListener('focusin', () => this._updateTabbable());
+    this.addEventListener('focusout', this._onFocusOut);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'tablist');
+    }
+  }
+
+  render() {
+    return html`<slot @slotchange="${() => this._updateTabbable()}"></slot>`;
+  }
+
+  setSelectedItem() {
+    super.setSelectedItem();
+    this._updateTabbable();
+  }
+
+  // Roving tabindex: the tablist is only one stop in the page tab sequence.
+  _updateTabbable(ignoreFocus = false) {
+    const tabs = this.getItems();
+    const focused = ignoreFocus ? undefined : tabs.find((tab) => tab.matches(':focus-within'));
+    const tabbable = focused ?? tabs.find((tab) => tab.selected) ?? tabs[0];
+    tabs.forEach((tab) => {
+      tab.tabbable = tab === tabbable;
+    });
+  }
+
+  _onFocusOut(e) {
+    if (!e.relatedTarget || !this.contains(e.relatedTarget)) {
+      this._updateTabbable(true);
+    }
+  }
+
+  // The arrows only move the focus. Enter or Space select the focused tab, so moving
+  // through the tabs doesn't dispatch changes or follow the links of the tabs with href.
+  _onKeydown(e) {
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+      return;
+    }
+    if (e.composedPath()[0].getAttribute?.('role') !== 'tab') {
+      return;
+    }
+    const tabs = this.getItems();
+    const current = tabs.findIndex((tab) => tab.matches(':focus-within'));
+    const step = getComputedStyle(this).direction === 'rtl' ? -1 : 1;
+    const nextIndex = {
+      ArrowRight: (current + step + tabs.length) % tabs.length,
+      ArrowLeft: (current - step + tabs.length) % tabs.length,
+      Home: 0,
+      End: tabs.length - 1,
+    }[e.key];
+    if (tabs[nextIndex]) {
+      e.preventDefault();
+      tabs[nextIndex].focus();
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.18.2",
+  "version": "3.18.4",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b59afd879d78118d5ea1cdc53e144f1a84628f13"
+  "gitHead": "ceb56100a952af7551b43f709418bf0848962ef3"
 }