@dile/ui 3.18.1 → 3.18.3

package/components/floating-menu/src/DileFloatingMenu.js

@@ -1,47 +1,41 @@
 import { LitElement, html, css } from 'lit';
+import { DileOverlay } from '../../../mixins/overlay/index.js';
+import { DileCloseOnEscPressed } from '../../../mixins/close-on-esc-pressed/index.js';
 import './DileFloatingMenuItem.js';
 
-export class DileFloatingMenu extends LitElement {
+// Distance between the floating button and the overlay.
+const OVERLAY_GAP = 10;
+
+// DileOverlay places the overlay next to the button and keeps it inside the viewport.
+// The opened property is the source of truth: open(), close() and toggle() only change it.
+export class DileFloatingMenu extends DileOverlay(DileCloseOnEscPressed(LitElement)) {
     static styles = [
         css`
             :host {
-                --dile-floating-menu-margin: 1.5rem;
-                --dile-floating-menu-margin-bottom: var(--dile-floating-menu-margin-bottom);
-                --dile-floating-menu-margin-top: var(--dile-floating-menu-margin-top);
-                --dile-floating-menu-margin-left: var(--dile-floating-menu-margin-left);
-                --dile-floating-menu-margin-right: var(--dile-floating-menu-margin-right);
-                --dile-floating-menu-background-color: navy;
-                --dile-floating-menu-background-color-hover: mediumblue;
-                --dile-floating-menu-icon-background-color: aliceblue;
-
+                display: block;
                 position: fixed;
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 1rem;
-                top: var(--dile-floating-menu-margin-top, var(--dile-floating-menu-margin));
-                left: var(--dile-floating-menu-margin-left, var(--dile-floating-menu-margin));
+                top: var(--dile-floating-menu-margin-top, var(--dile-floating-menu-margin, 1.5rem));
+                left: var(--dile-floating-menu-margin-left, var(--dile-floating-menu-margin, 1.5rem));
                 z-index: var(--dile-floating-menu-zindex, 2);
             }
+            :host([hidden]) {
+                display: none;
+            }
             :host([bottom]) {
-                bottom: var(--dile-floating-menu-margin-bottom, var(--dile-floating-menu-margin));
-                flex-direction: column-reverse;
-                top: inherit;
+                top: auto;
+                bottom: var(--dile-floating-menu-margin-bottom, var(--dile-floating-menu-margin, 1.5rem));
             }
             :host([right]) {
-                right: var(--dile-floating-menu-margin-right, var(--dile-floating-menu-margin));
-                align-items: flex-end;
-                left: inherit;
+                left: auto;
+                right: var(--dile-floating-menu-margin-right, var(--dile-floating-menu-margin, 1.5rem));
             }
             :host([left]) {
-                left: var(--dile-floating-menu-margin-left, var(--dile-floating-menu-margin));
-                right: inherit;
+                left: var(--dile-floating-menu-margin-left, var(--dile-floating-menu-margin, 1.5rem));
+                right: auto;
             }
             :host([top]) {
-                top: var(--dile-floating-menu-margin-top, var(--dile-floating-menu-margin));
-                flex-direction: column;
-                bottom: inherit;
+                top: var(--dile-floating-menu-margin-top, var(--dile-floating-menu-margin, 1.5rem));
+                bottom: auto;
             }
 
             :host([opened]) #topline {
@@ -53,47 +47,72 @@ export class DileFloatingMenu extends LitElement {
             }
 
             .line {
-                background-color: var(--dile-floating-menu-icon-background-color);
+                background-color: var(--dile-floating-menu-icon-background-color, aliceblue);
                 width: 24px;
                 height: 2px;
                 transition: transform 0.2s ease-in-out;
             }
 
-            button {
+            #trigger {
+                box-sizing: border-box;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 gap: 4px;
-                background-color: var(--dile-floating-menu-background-color);
-                border-radius: 50%;
-                width: 48px;
-                height: 48px;
+                min-width: var(--dile-floating-menu-button-size, 48px);
+                min-height: var(--dile-floating-menu-button-size, 48px);
+                padding: var(--dile-floating-menu-button-padding, 0);
+                background-color: var(--dile-floating-menu-background-color, navy);
+                color: var(--dile-floating-menu-icon-background-color, aliceblue);
+                --dile-icon-color: var(--dile-floating-menu-icon-background-color, aliceblue);
+                border-radius: var(--dile-floating-menu-button-border-radius, 999px);
                 border: none;
+                font: inherit;
                 cursor: pointer;
-                transition: background-color 1s, gap 0.5s;
+                transition: background-color 0.3s;
             }
 
-            button:hover {
-                background-color: var(--dile-floating-menu-background-color-hover);
+            #trigger:hover {
+                background-color: var(--dile-floating-menu-background-color-hover, mediumblue);
             }
 
-            @keyframes opacity {
-                from {opacity: 0; scale: 90%;}
-                to {opacity: 1; scale:100%;}
+            #trigger:focus-visible {
+                outline: 2px solid var(--dile-floating-menu-background-color, navy);
+                outline-offset: 2px;
             }
 
-            .opened {
-                display: block
-                animation: opacity;
-                animation-duration: 0.5s;
-                background-color: var(--dile-floating-menu-background-color);
-                border-radius: 4px;
-                padding: 24px;
+            #overlay {
+                box-sizing: border-box;
+                display: none;
+                position: fixed;
+                width: var(--dile-floating-menu-overlay-width, max-content);
+                max-width: var(--dile-floating-menu-overlay-max-width, calc(100vw - 25px));
+                max-height: var(--dile-floating-menu-overlay-max-height, calc(100vh - 100px));
+                overflow-y: auto;
+                background-color: var(--dile-floating-menu-overlay-background-color, var(--dile-floating-menu-background-color, navy));
+                color: var(--dile-floating-menu-overlay-color, aliceblue);
+                border-radius: var(--dile-floating-menu-overlay-border-radius, 4px);
+                box-shadow: var(--dile-floating-menu-overlay-box-shadow, 0 0 20px rgba(0, 0, 0, 0.3));
+                padding: var(--dile-floating-menu-overlay-padding, 24px);
+                opacity: 0;
+                transform: translateY(-10px);
+                transition: transform 0.3s ease, opacity 0.3s ease;
             }
 
-            .closed {
-                display: none;
+            :host([bottom]) #overlay {
+                transform: translateY(10px);
+            }
+
+            :host #overlay.opened {
+                opacity: 1;
+                transform: translateY(0);
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                .line, #trigger, #overlay {
+                    transition: none;
+                }
             }
         `
     ];
@@ -102,28 +121,43 @@ export class DileFloatingMenu extends LitElement {
 
         opened: {
             type: Boolean,
-            reflect: true,   
+            reflect: true,
         },
 
         top: {
             type: Boolean,
-            reflect: true,   
+            reflect: true,
         },
 
         bottom: {
             type: Boolean,
-            reflect: true,   
+            reflect: true,
         },
 
         right: {
             type: Boolean,
-            reflect: true,   
+            reflect: true,
         },
 
         left: {
             type: Boolean,
-            reflect: true,   
-        },   
+            reflect: true,
+        },
+
+        /**
+         * Accessible name of the floating button.
+         */
+        label: {
+            type: String,
+        },
+
+        /**
+         * If true, the menu closes when any link or button inside it is clicked.
+         */
+        closeOnClick: {
+            type: Boolean,
+            attribute: 'close-on-click',
+        },
     }
 
     constructor() {
@@ -133,24 +167,124 @@ export class DileFloatingMenu extends LitElement {
         this.left = false;
         this.right = false;
         this.bottom = false;
+        this.label = 'Menu';
+        this.closeOnClick = false;
+        this.documentClickHandler = this._onDocumentClick.bind(this);
+        this.addEventListener('focusout', this._onFocusOut);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.documentClickHandler);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.documentClickHandler);
+        this.opened = false;
+    }
+
+    updated(changedProperties) {
+        if (changedProperties.has('opened')) {
+            if (this.opened) {
+                this._showOverlay();
+            } else if (changedProperties.get('opened')) {
+                this._hideOverlay();
+            }
+        }
     }
 
     render() {
         return html`
-            <button @click="${this.toggle}" type="button">
-                ${this._menuIconTpl}
+            <button
+                id="trigger"
+                type="button"
+                aria-label="${this.label}"
+                aria-expanded="${String(this.opened)}"
+                aria-controls="overlay"
+                @click="${this.toggle}"
+            >
+                <slot name="icon">${this._menuIconTpl}</slot>
             </button>
             ${this._listTpl}
         `;
     }
 
-    toggle(e) {
-        this.opened = !this.opened;
+    toggle() {
+        if (this.opened) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    open() {
+        this.opened = true;
+    }
+
+    async close() {
+        if (!this.opened) {
+            return;
+        }
+        const hadFocus = this.matches(':focus-within');
+        this.opened = false;
+        await this.updateComplete;
+        if (hadFocus) {
+            this.trigger.focus({ preventScroll: true });
+        }
+    }
+
+    _showOverlay() {
+        this.verticalAlign = this.bottom ? 'top' : 'bottom';
+        this.horizontalAlign = this.right ? 'under_right' : 'under_left';
+        // DileOverlay only leaves a gap by itself when the overlay is under the button.
+        this.moveTop = this.bottom ? -OVERLAY_GAP : 0;
+        super.open();
+    }
+
+    _hideOverlay() {
+        // Closed during the opening delay of DileOverlay, where its close() would be ignored.
+        if (this._opening) {
+            this.cancelDelay();
+            this._opening = false;
+            this._overlayClass = 'opened';
+        }
+        super.close();
+    }
+
+    _onDocumentClick(e) {
+        if (this.opened && !e.composedPath().includes(this)) {
+            this.opened = false;
+        }
+    }
+
+    _onFocusOut(e) {
+        // relatedTarget is null when the focus does not go to another element, like when the window loses it.
+        if (this.opened && e.relatedTarget && !this.contains(e.relatedTarget)) {
+            this.opened = false;
+        }
+    }
+
+    _onOverlayClick(e) {
+        const path = e.composedPath();
+        const nodes = path.slice(0, path.indexOf(e.currentTarget));
+        const closer = nodes.find(node =>
+            node instanceof Element &&
+            (node.hasAttribute('data-close') || (this.closeOnClick && (node.tagName === 'A' || node.tagName === 'BUTTON')))
+        );
+        if (closer) {
+            this.close();
+        }
     }
 
     get _listTpl() {
         return html`
-            <div class="${this.opened ? 'opened' : 'closed'}">
+            <div
+                id="overlay"
+                class="${this._overlayClass}"
+                ?inert="${!this.opened}"
+                @click="${this._onOverlayClick}"
+            >
                 <slot name="content-top"></slot>
                 <slot></slot>
                 <slot name="content-bottom"></slot>
@@ -165,4 +299,4 @@ export class DileFloatingMenu extends LitElement {
         `
     }
 
-}
+}

package/components/floating-menu/src/DileFloatingMenuItem.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 export class DileFloatingMenuItem extends LitElement {
     static styles = [
@@ -6,8 +7,9 @@ export class DileFloatingMenuItem extends LitElement {
             :host {
                 display: block;
             }
-            
+
             a {
+                display: block;
                 text-decoration: none;
                 color: var(--dile-floating-menu-item-color, aliceblue);
                 margin: var(--dile-floating-menu-item-margin, 0.5rem 0);
@@ -16,6 +18,11 @@ export class DileFloatingMenuItem extends LitElement {
             a:hover {
                 color: var(--dile-floating-menu-item-color-hover, lightblue);
             }
+
+            a:focus-visible {
+                outline: 2px solid currentColor;
+                outline-offset: 2px;
+            }
         `
     ];
 
@@ -23,7 +30,7 @@ export class DileFloatingMenuItem extends LitElement {
 
         href: {
             type: String,
-            reflect: true,   
+            reflect: true,
         },
 
         target: {
@@ -36,7 +43,7 @@ export class DileFloatingMenuItem extends LitElement {
         super();
         this.href = '';
         this.target = '';
-        
+
     }
 
     connectedCallback() {
@@ -46,7 +53,7 @@ export class DileFloatingMenuItem extends LitElement {
 
     render() {
         return html`
-            <a href="${this.href}" target="${this.target}" ><slot></slot></a>        
+            <a href="${ifDefined(this.href || undefined)}" target="${ifDefined(this.target || undefined)}"><slot></slot></a>
         `;
     }
-}
+}

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.1",
+  "version": "3.18.3",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6724d25c93731ed35e6710228a6d0b18e5b6ebb1"
+  "gitHead": "978a1d5b553cf39a5614223130f3446ec0bb89f2"
 }