apex-grid 3.3.0 → 3.4.0

package/components/grid.js

@@ -12,7 +12,7 @@ import { DataOperationsController } from '../controllers/data-operation.js';
 import { GridDOMController } from '../controllers/dom.js';
 import { gridStateContext, StateController } from '../controllers/state.js';
 import { localize as resolveLocaleText, } from '../i18n/index.js';
-import { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';
+import { DEFAULT_COLUMN_CONFIG, PIPELINE, SENTINEL_NODE } from '../internal/constants.js';
 import { buildCSV, downloadBlob, } from '../internal/export.js';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
 import { registerComponent } from '../internal/register.js';
@@ -68,6 +68,7 @@ export class ApexGrid extends EventEmitterBase {
         this.columnSeparator = true;
         this.coordinateHints = false;
         this.columnMenu = true;
+        this.#autoAriaLabel = null;
         this.#stateChangedListeners = 0;
         this.#lastStateJson = null;
     }
@@ -271,8 +272,28 @@ export class ApexGrid extends EventEmitterBase {
         const extras = (this.stateController.selection.showCheckboxColumn ? 1 : 0) +
             (this.stateController.expansion.showToggleColumn ? 1 : 0);
         this.setAttribute('aria-colcount', String(visibleColumns + extras));
+        const selection = this.stateController.selection;
+        if (selection.enabled && selection.mode === 'multiple') {
+            this.setAttribute('aria-multiselectable', 'true');
+        }
+        else {
+            this.removeAttribute('aria-multiselectable');
+        }
+        if (this.scrollContainer) {
+            this.scrollContainer.tabIndex = this.stateController.active === SENTINEL_NODE ? 0 : -1;
+        }
+        const currentLabel = this.getAttribute('aria-label');
+        const authorLabeled = this.hasAttribute('aria-labelledby') ||
+            (currentLabel !== null && currentLabel !== this.#autoAriaLabel);
+        if (!authorLabeled) {
+            const label = this.localize('grid.label');
+            if (currentLabel !== label)
+                this.setAttribute('aria-label', label);
+            this.#autoAriaLabel = label;
+        }
         this.#emitStateChangedIfNeeded();
     }
+    #autoAriaLabel;
     #stateChangedListeners;
     #lastStateJson;
     addEventListener(type, listener, options) {
@@ -716,13 +737,23 @@ export class ApexGrid extends EventEmitterBase {
                 column: target.column.key,
                 row: target.row.index,
             };
+            if (!target.editing)
+                target.focus({ preventScroll: true });
         }
     }
     bodyKeydownHandler(event) {
-        if (this.scrollContainer.isSameNode(event.target)) {
+        const origin = event.composedPath()[0];
+        const fromBody = this.scrollContainer.isSameNode(event.target);
+        const fromCell = origin instanceof ApexGridCell && !origin.editing;
+        if (fromBody || fromCell) {
             this.stateController.navigation.navigate(event);
         }
     }
+    bodyFocusHandler(event) {
+        if (this.scrollContainer.isSameNode(event.target)) {
+            this.stateController.navigation.focusActiveCell();
+        }
+    }
     bodyPointerHandler(event) {
         if (this.stateController.modules.size === 0)
             return;
@@ -772,6 +803,7 @@ export class ApexGrid extends EventEmitterBase {
         .renderItem=${this.DOM.rowRenderer}
         @click=${this.bodyClickHandler}
         @keydown=${this.bodyKeydownHandler}
+        @focusin=${this.bodyFocusHandler}
         @pointerdown=${this.bodyPointerHandler}
         @pointermove=${this.bodyPointerHandler}
         @pointerup=${this.bodyPointerHandler}