@mintplayer/ng-bootstrap 21.30.0 → 21.31.0

package/fesm2022/mintplayer-ng-bootstrap-tile-manager.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { input, output, viewChild, ChangeDetectionStrategy, Component, contentChildren, computed, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { html, unsafeCSS, LitElement, nothing } from 'lit';
+import { LiveAnnouncerController } from '@mintplayer/ng-bootstrap/web-components/a11y';
 
 /**
  * One tile inside a `<bs-tile-manager>`.
@@ -382,7 +383,7 @@ const styles = unsafeCSS(`:host {
 
 .tile[data-resizing=true] {
   z-index: 4;
-  transition: none;
+  transition: width 150ms cubic-bezier(0.2, 0, 0, 1), height 150ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 .tile[data-blocked=true] {
@@ -504,7 +505,8 @@ const styles = unsafeCSS(`:host {
   display: none;
 }
 
-.tile-grid__live-region {
+.tile-grid__live-region,
+.tile-grid__sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -534,6 +536,8 @@ const styles = unsafeCSS(`:host {
   outline-offset: -2px;
 }`);
 
+const TILE_INSTRUCTIONS = 'Press M to enter move mode. In move mode, arrow keys move the tile, Shift with arrow keys resize it, Enter commits, Escape cancels.';
+let tileManagerInstanceCounter = 0;
 const TOUCH_LONG_PRESS_MS = 600;
 const TOUCH_LONG_PRESS_SLOP_PX = 10;
 const TOUCH_PRESS_FEEDBACK_DELAY_MS = 150;
@@ -557,7 +561,9 @@ class MintTileManagerElement extends LitElement {
         this.gestureKind = 'idle';
         this.blocked = false;
         this.effectiveColumnCount = 1;
-        this.liveRegionMessage = '';
+        this.focusedTileId = null;
+        this.liveAnnouncer = new LiveAnnouncerController(this);
+        this.instanceId = `mp-tile-manager-${++tileManagerInstanceCounter}`;
         this.hostResizeObserver = null;
         this.flipPreviousRects = new Map();
         // Cached layout metrics. Refreshed lazily in updated()/firstUpdated() and on
@@ -605,27 +611,36 @@ class MintTileManagerElement extends LitElement {
         blocked: { state: true },
         effectiveColumnCount: { state: true },
         keyboardMode: { state: true },
-        liveRegionMessage: { state: true },
+        focusedTileId: { state: true },
     }; }
+    get instructionsId() {
+        return `${this.instanceId}-instructions`;
+    }
     render() {
         const layoutSource = this.previewLayout ?? this.tiles.map((t) => ({ id: t.id, position: t.position }));
         const tileById = new Map(this.tiles.map((t) => [t.id, t]));
         const gridStyle = this.computeGridStyle();
-        // ARIA grid hierarchy is grid > row > gridcell. A single role="row"
-        // wrapper with display: contents lets us satisfy that without disturbing
-        // the CSS Grid placement of the gridcell children.
+        // role="region" + button-per-tile (PRD §10 Q1): a tile board's dimensions
+        // change under user reflow, so the static grid contract (rowindex/colindex)
+        // is a poor fit. Tiles are activatable buttons whose move/resize is
+        // discoverable through aria-describedby's instructions string.
         return html `
-      <div class="tile-grid" role="grid" aria-label=${this.label ?? nothing} style=${gridStyle}>
-        <div role="row" style="display: contents;">
-          ${layoutSource.map((entry) => {
+      <div
+        class="tile-grid"
+        role="region"
+        aria-label=${this.label ?? 'Tile board'}
+        aria-describedby=${this.instructionsId}
+        style=${gridStyle}
+      >
+        ${layoutSource.map((entry) => {
             const tile = tileById.get(entry.id);
             if (!tile)
                 return nothing;
             return this.renderTile(tile, entry.position);
         })}
-        </div>
       </div>
-      <div class="tile-grid__live-region" aria-live="polite" aria-atomic="true">${this.liveRegionMessage}</div>
+      <div id=${this.instructionsId} class="tile-grid__sr-only">${TILE_INSTRUCTIONS}</div>
+      ${this.liveAnnouncer.template()}
     `;
     }
     renderTile(tile, pos) {
@@ -634,18 +649,34 @@ class MintTileManagerElement extends LitElement {
         const isBlocked = (isDragging || isResizing) && this.blocked;
         const isPressing = this.gestureKind === 'arming-touch-drag' && this.activeTileId() === tile.id;
         const transform = this.computeActiveTransform(tile.id);
+        // Inline width/height during a pointer-resize gesture so the tile pixel
+        // size can ride a CSS transition between span states. The grid still
+        // allocates the new span area instantly; the active tile's visible size
+        // lags 150ms behind. Without this, grid-column/grid-row span changes are
+        // not animatable in CSS and the tile snaps. Reduced-motion is gated by
+        // the global `@media (prefers-reduced-motion: reduce)` rule in SCSS.
+        const cell = this.cellMetrics;
+        const inlineSize = isResizing && cell.width > 0
+            ? {
+                width: pos.colSpan * cell.width + (pos.colSpan - 1) * cell.gapX,
+                height: pos.rowSpan * cell.height + (pos.rowSpan - 1) * cell.gapY,
+            }
+            : null;
         const style = [
             `grid-column: ${pos.colStart} / span ${pos.colSpan}`,
             `grid-row: ${pos.rowStart} / span ${pos.rowSpan}`,
             transform ? `transform: ${transform}` : '',
+            inlineSize ? `width: ${inlineSize.width}px` : '',
+            inlineSize ? `height: ${inlineSize.height}px` : '',
         ]
             .filter(Boolean)
             .join('; ');
+        const isFocusableStop = this.resolveFocusableTileId() === tile.id;
         return html `
       <div
         class="tile"
-        role="gridcell"
-        tabindex="0"
+        role="button"
+        tabindex=${isFocusableStop ? '0' : '-1'}
         data-tile-id=${tile.id}
         data-dragging=${isDragging ? 'true' : 'false'}
         data-resizing=${isResizing ? 'true' : 'false'}
@@ -658,6 +689,7 @@ class MintTileManagerElement extends LitElement {
         style=${style}
         @pointerdown=${(e) => this.onTilePointerDown(e, tile)}
         @keydown=${(e) => this.onTileKeyDown(e, tile)}
+        @focus=${() => this.onTileFocus(tile)}
       >
         <div class="tile__header-shell">
           <slot name=${`${tile.id}-header`}></slot>
@@ -742,9 +774,6 @@ class MintTileManagerElement extends LitElement {
     // ---------------- Lifecycle ----------------
     connectedCallback() {
         super.connectedCallback();
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'application');
-        }
         document.addEventListener('visibilitychange', this.onVisibilityChange);
     }
     disconnectedCallback() {
@@ -1005,6 +1034,7 @@ class MintTileManagerElement extends LitElement {
         this.gestureKind = 'drag';
         this.lastPointerPosition = { x: startX, y: startY };
         this.attachWindowListeners();
+        this.announceDragBegin(tile);
         this.requestUpdate();
     }
     beginDrag(event, tile) {
@@ -1027,6 +1057,7 @@ class MintTileManagerElement extends LitElement {
         this.gestureKind = 'drag';
         this.lastPointerPosition = { x: event.clientX, y: event.clientY };
         this.attachWindowListeners();
+        this.announceDragBegin(tile);
         this.runPackerForCurrentGesture();
     }
     beginResize(event, tile, mode) {
@@ -1043,8 +1074,17 @@ class MintTileManagerElement extends LitElement {
         this.gestureKind = 'resize';
         this.lastPointerPosition = { x: event.clientX, y: event.clientY };
         this.attachWindowListeners();
+        this.announceResizeBegin(tile);
         this.runPackerForCurrentGesture();
     }
+    announceDragBegin(tile) {
+        const label = tile.label ?? `tile at row ${tile.position.rowStart}, column ${tile.position.colStart}`;
+        this.liveAnnouncer.announce(`Dragging ${label}.`);
+    }
+    announceResizeBegin(tile) {
+        const label = tile.label ?? `tile at row ${tile.position.rowStart}, column ${tile.position.colStart}`;
+        this.liveAnnouncer.announce(`Resizing ${label}.`);
+    }
     attachWindowListeners() {
         window.addEventListener('pointermove', this.onWindowPointerMove);
         window.addEventListener('pointerup', this.onWindowPointerUp);
@@ -1110,7 +1150,11 @@ class MintTileManagerElement extends LitElement {
         const cols = this.effectiveColumnCount;
         const result = pack(this.tiles.map((t) => ({ id: t.id, position: t.position, locked: t.disableMove })), { id: tile.id, rect }, cols);
         this.previewLayout = result.layout;
+        const wasBlocked = g.blocked;
         g.blocked = result.blocked;
+        if (result.blocked && !wasBlocked) {
+            this.liveAnnouncer.announce('Move blocked by a locked tile.');
+        }
         this.blocked = result.blocked;
         this.requestUpdate();
     }
@@ -1191,10 +1235,9 @@ class MintTileManagerElement extends LitElement {
         }));
         const movedTile = finalLayout.find((p) => p.id === g.tileId);
         if (movedTile) {
-            this.liveRegionMessage =
-                g.kind === 'drag'
-                    ? `Tile moved to row ${movedTile.position.rowStart}, column ${movedTile.position.colStart}`
-                    : `Tile resized to ${movedTile.position.colSpan} columns by ${movedTile.position.rowSpan} rows`;
+            this.liveAnnouncer.announce(g.kind === 'drag'
+                ? `Tile moved to row ${movedTile.position.rowStart}, column ${movedTile.position.colStart}`
+                : `Tile resized to ${movedTile.position.colSpan} columns by ${movedTile.position.rowSpan} rows`);
         }
         this.cleanupGesture();
     }
@@ -1250,16 +1293,20 @@ class MintTileManagerElement extends LitElement {
     }
     // ---------------- Keyboard ----------------
     onTileKeyDown(event, tile) {
-        if (tile.disableMove && tile.disableResize)
-            return;
         const km = this.keyboardState;
         if (km.kind === 'idle') {
-            if (event.key === ' ' && !tile.disableMove) {
+            // Outside move mode: arrow keys traverse focus between tiles, Home/End
+            // jump to first/last, M enters move mode if the tile allows it.
+            if (event.key === 'm' || event.key === 'M') {
+                if (tile.disableMove && tile.disableResize)
+                    return;
                 event.preventDefault();
                 this.keyboardState = { kind: 'move', tileId: tile.id };
-                this.liveRegionMessage = 'Move mode enabled. Use arrow keys to move; Enter to commit, Escape to cancel.';
+                this.liveAnnouncer.announce('Move mode enabled. Use arrow keys to move, Shift with arrow keys to resize, Enter to commit, Escape to cancel.');
                 return;
             }
+            if (this.handleFocusNavigation(event, tile))
+                return;
             return;
         }
         if (km.tileId !== tile.id)
@@ -1267,7 +1314,7 @@ class MintTileManagerElement extends LitElement {
         if (event.key === 'Escape' || event.key === 'Enter') {
             event.preventDefault();
             this.keyboardState = { kind: 'idle' };
-            this.liveRegionMessage = event.key === 'Enter' ? 'Move committed.' : 'Move cancelled.';
+            this.liveAnnouncer.announce(event.key === 'Enter' ? 'Move committed.' : 'Move cancelled.');
             return;
         }
         if (event.key.startsWith('Arrow')) {
@@ -1276,6 +1323,73 @@ class MintTileManagerElement extends LitElement {
             this.applyKeyboardStep(tile, event.key, isResize);
         }
     }
+    /**
+     * Outside move mode, arrow keys move *focus* between tiles (row-major
+     * order — top-to-bottom, left-to-right by gridcell position). Home/End
+     * jump to first/last enabled tile. Returns true if the event was handled.
+     */
+    handleFocusNavigation(event, current) {
+        const navKey = event.key === 'ArrowUp' || event.key === 'ArrowDown' ||
+            event.key === 'ArrowLeft' || event.key === 'ArrowRight' ||
+            event.key === 'Home' || event.key === 'End';
+        if (!navKey)
+            return false;
+        if (this.tiles.length <= 1)
+            return false;
+        const ordered = [...this.tiles].sort((a, b) => {
+            if (a.position.rowStart !== b.position.rowStart)
+                return a.position.rowStart - b.position.rowStart;
+            return a.position.colStart - b.position.colStart;
+        });
+        const idx = ordered.findIndex((t) => t.id === current.id);
+        if (idx < 0)
+            return false;
+        let nextIdx = idx;
+        if (event.key === 'Home')
+            nextIdx = 0;
+        else if (event.key === 'End')
+            nextIdx = ordered.length - 1;
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+            nextIdx = (idx + 1) % ordered.length;
+        else
+            nextIdx = (idx - 1 + ordered.length) % ordered.length;
+        if (nextIdx === idx)
+            return true;
+        event.preventDefault();
+        const target = ordered[nextIdx];
+        this.focusedTileId = target.id;
+        this.requestUpdate();
+        queueMicrotask(() => {
+            const el = this.shadowRoot?.querySelector(`.tile[data-tile-id="${target.id}"]`);
+            el?.focus();
+        });
+        return true;
+    }
+    onTileFocus(tile) {
+        if (this.focusedTileId !== tile.id) {
+            this.focusedTileId = tile.id;
+            this.requestUpdate();
+        }
+    }
+    /**
+     * The single tile that should carry `tabindex="0"` to act as the board's
+     * tab stop. Defaults to the previously-focused tile, then the first tile in
+     * row-major order. All other tiles render with `tabindex="-1"` so Tab from
+     * outside the board lands on exactly one tile.
+     */
+    resolveFocusableTileId() {
+        if (this.tiles.length === 0)
+            return null;
+        if (this.focusedTileId && this.tiles.some((t) => t.id === this.focusedTileId)) {
+            return this.focusedTileId;
+        }
+        const ordered = [...this.tiles].sort((a, b) => {
+            if (a.position.rowStart !== b.position.rowStart)
+                return a.position.rowStart - b.position.rowStart;
+            return a.position.colStart - b.position.colStart;
+        });
+        return ordered[0]?.id ?? null;
+    }
     applyKeyboardStep(tile, key, isResize) {
         const cols = this.effectiveColumnCount;
         const dx = key === 'ArrowLeft' ? -1 : key === 'ArrowRight' ? 1 : 0;
@@ -1295,7 +1409,7 @@ class MintTileManagerElement extends LitElement {
             };
         const result = pack(this.tiles.map((t) => ({ id: t.id, position: t.position, locked: t.disableMove })), { id: tile.id, rect: newRect }, cols);
         if (result.blocked) {
-            this.liveRegionMessage = 'Move blocked.';
+            this.liveAnnouncer.announce('Move blocked.');
             return;
         }
         const newTiles = this.tiles.map((t) => {
@@ -1315,9 +1429,9 @@ class MintTileManagerElement extends LitElement {
                 composed: true,
             }));
         });
-        this.liveRegionMessage = isResize
+        this.liveAnnouncer.announce(isResize
             ? `Tile resized to ${newRect.colSpan} columns by ${newRect.rowSpan} rows`
-            : `Tile moved to row ${newRect.rowStart}, column ${newRect.colStart}`;
+            : `Tile moved to row ${newRect.rowStart}, column ${newRect.colStart}`);
     }
 }
 if (typeof customElements !== 'undefined' && !customElements.get('mp-tile-manager')) {