@vaadin/component-base 23.0.0-beta1 → 23.0.0-beta2

package/index.d.ts

@@ -6,6 +6,7 @@ export { ElementMixin } from './src/element-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
 export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
+export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
 export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.0.0-beta1",
+  "version": "23.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "467244b76021176c109df675799b07029b293e58"
+  "gitHead": "a276f7a0fd00e5459b87267468e0dd0d4fb6f7f3"
 }

package/src/a11y-announcer.d.ts

@@ -7,4 +7,4 @@
 /**
  * Cause a text string to be announced by screen readers.
  */
-export function announce(text: string, options?: { mode?: 'polite' | 'assertive'; timeout?: number }): void;
+export function announce(text: string, options?: { mode?: 'polite' | 'assertive' | 'alert'; timeout?: number }): void;

package/src/a11y-announcer.js

@@ -4,6 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+import { animationFrame } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+
 const region = document.createElement('div');
 
 region.style.position = 'fixed';
@@ -12,6 +15,7 @@ region.setAttribute('aria-live', 'polite');
 
 document.body.appendChild(region);
 
+let alertDebouncer;
 /**
  * Cause a text string to be announced by screen readers.
  *
@@ -22,7 +26,19 @@ export function announce(text, options = {}) {
   const mode = options.mode || 'polite';
   const timeout = options.timeout === undefined ? 150 : options.timeout;
 
-  region.setAttribute('aria-live', mode);
+  if (mode === 'alert') {
+    region.removeAttribute('aria-live');
+    region.removeAttribute('role');
+    alertDebouncer = Debouncer.debounce(alertDebouncer, animationFrame, () => {
+      region.setAttribute('role', 'alert');
+    });
+  } else {
+    if (alertDebouncer) {
+      alertDebouncer.cancel();
+    }
+    region.removeAttribute('role');
+    region.setAttribute('aria-live', mode);
+  }
 
   region.textContent = '';
 

package/src/element-mixin.js

@@ -32,7 +32,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.0.0-beta1';
+      return '23.0.0-beta2';
     }
 
     /** @protected */

package/src/focus-trap-controller.js

@@ -134,6 +134,7 @@ export class FocusTrapController {
    * @private
    */
   get __focusedElementIndex() {
-    return this.__focusableElements.findIndex(isElementFocused);
+    const focusableElements = this.__focusableElements;
+    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
   }
 }

package/src/focus-utils.js

@@ -39,7 +39,7 @@ function isElementHiddenDirectly(element) {
  * @return {number}
  */
 function normalizeTabIndex(element) {
-  if (!isElementFocusable(element) || isElementHiddenDirectly(element)) {
+  if (!isElementFocusable(element)) {
     return -1;
   }
 
@@ -116,8 +116,8 @@ function sortElementsByTabIndex(elements) {
  * @private
  */
 function collectFocusableNodes(node, result) {
-  if (node.nodeType !== Node.ELEMENT_NODE) {
-    // Don't traverse children if the node is not an HTML element.
+  if (node.nodeType !== Node.ELEMENT_NODE || isElementHiddenDirectly(node)) {
+    // Don't traverse children if the node is not an HTML element or not visible.
     return false;
   }
 

package/src/slot-controller.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 
 /**
@@ -30,10 +31,13 @@ export class SlotController extends EventTarget {
   static generateId(slotName, host) {
     const prefix = slotName || 'default';
 
+    // Support dash-case slot names e.g. "error-message"
+    const field = `${dashToCamelCase(prefix)}Id`;
+
     // Maintain the unique ID counter for a given prefix.
-    this[`${prefix}Id`] = 1 + this[`${prefix}Id`] || 0;
+    this[field] = 1 + this[field] || 0;
 
-    return `${prefix}-${host.localName}-${this[`${prefix}Id`]}`;
+    return `${prefix}-${host.localName}-${this[field]}`;
   }
 
   hostConnected() {

package/src/tabindex-mixin.js

@@ -56,7 +56,9 @@ export const TabindexMixin = (superclass) =>
       super._disabledChanged(disabled, oldDisabled);
 
       if (disabled) {
-        this.__lastTabIndex = this.tabindex;
+        if (this.tabindex !== undefined) {
+          this.__lastTabIndex = this.tabindex;
+        }
         this.tabindex = -1;
       } else if (oldDisabled) {
         this.tabindex = this.__lastTabIndex;