Merge branch 'main' into vaadin-test-runner-commands

vaadin · Jan 27, 2025 · fafe422 · fafe422
2 parents e8c4e28 + edc4eed
commit fafe422
Show file tree

Hide file tree

Showing 135 changed files with 1,745 additions and 1,179 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -85,7 +85,7 @@
       }
     },
     {
-      "files": ["scripts/**/*.js", "*.js"],
+      "files": ["scripts/**/*.js", "*.config.js", "wtr-utils.js"],
       "rules": {
         "@typescript-eslint/no-require-imports": "off",
         "no-console": "off"

diff --git a/lerna.json b/lerna.json
@@ -5,5 +5,5 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "24.7.0-alpha6"
+  "version": "24.7.0-alpha7"
 }
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@types/mocha": "^10.0.7",
     "@types/sinon": "^17.0.3",
     "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/test-runner-commands": "24.7.0-alpha7",
     "@web/dev-server": "^0.4.3",
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/rollup-plugin-html": "^2.0.0",

diff --git a/packages/a11y-base/package.json b/packages/a11y-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/a11y-base",
-  "version": "24.7.0-alpha6",
+  "version": "24.7.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -32,12 +32,11 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.7.0-alpha6",
+    "@vaadin/component-base": "24.7.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha6",
-    "@vaadin/test-runner-commands": "24.7.0-alpha6",
+    "@vaadin/chai-plugins": "24.7.0-alpha7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   }

diff --git a/packages/a11y-base/src/keyboard-direction-mixin.d.ts b/packages/a11y-base/src/keyboard-direction-mixin.d.ts
@@ -38,4 +38,10 @@ export declare class KeyboardDirectionMixinClass {
    * Focus the given item. Override this method to add custom logic.
    */
   protected _focusItem(item: Element, navigating: boolean): void;
+
+  /**
+   * Returns whether the item is focusable. By default,
+   * returns true if the item is not disabled.
+   */
+  protected _isItemFocusable(item: Element): boolean;
 }
diff --git a/packages/a11y-base/src/keyboard-direction-mixin.js b/packages/a11y-base/src/keyboard-direction-mixin.js
@@ -171,7 +171,7 @@ export const KeyboardDirectionMixin = (superclass) =>
 
         const item = items[idx];
 
-        if (!item.hasAttribute('disabled') && this.__isMatchingItem(item, condition)) {
+        if (this._isItemFocusable(item) && this.__isMatchingItem(item, condition)) {
           return idx;
         }
       }
@@ -189,4 +189,16 @@ export const KeyboardDirectionMixin = (superclass) =>
     __isMatchingItem(item, condition) {
       return typeof condition === 'function' ? condition(item) : true;
     }
+
+    /**
+     * Returns whether the item is focusable. By default,
+     * returns true if the item is not disabled.
+     *
+     * @param {Element} item
+     * @return {boolean}
+     * @protected
+     */
+    _isItemFocusable(item) {
+      return !item.hasAttribute('disabled');
+    }
   };
diff --git a/packages/a11y-base/src/tabindex-mixin.js b/packages/a11y-base/src/tabindex-mixin.js
@@ -52,6 +52,10 @@ export const TabindexMixin = (superclass) =>
     _disabledChanged(disabled, oldDisabled) {
       super._disabledChanged(disabled, oldDisabled);
 
+      if (this.__shouldAllowFocusWhenDisabled()) {
+        return;
+      }
+
       if (disabled) {
         if (this.tabindex !== undefined) {
           this._lastTabIndex = this.tabindex;
@@ -70,9 +74,39 @@ export const TabindexMixin = (superclass) =>
      * @protected
      */
     _tabindexChanged(tabindex) {
+      if (this.__shouldAllowFocusWhenDisabled()) {
+        return;
+      }
+
       if (this.disabled && tabindex !== -1) {
         this._lastTabIndex = tabindex;
         this.tabindex = -1;
       }
     }
+
+    /**
+     * Overrides the native `focus` method in order to prevent
+     * focusing the element when it is disabled. Note, setting
+     * `tabindex` to -1 does not prevent the element from being
+     * programmatically focusable.
+     *
+     * @protected
+     * @override
+     */
+    focus() {
+      if (!this.disabled || this.__shouldAllowFocusWhenDisabled()) {
+        super.focus();
+      }
+    }
+
+    /**
+     * Returns whether the component should be focusable when disabled.
+     * Returns false by default.
+     *
+     * @private
+     * @return {boolean}
+     */
+    __shouldAllowFocusWhenDisabled() {
+      return false;
+    }
   };
diff --git a/packages/a11y-base/test/tabindex-mixin.test.js b/packages/a11y-base/test/tabindex-mixin.test.js
@@ -67,6 +67,19 @@ describe('tabindex-mixin', () => {
       element.disabled = false;
       expect(element.getAttribute('tabindex')).to.be.equal('2');
     });
+
+    it('should allow programmatic focus when enabled', () => {
+      element.tabIndex = 0;
+      element.focus();
+      expect(document.activeElement).to.equal(element);
+    });
+
+    it('should not allow programmatic focus when disabled', () => {
+      element.tabIndex = 0;
+      element.disabled = true;
+      element.focus();
+      expect(document.activeElement).to.equal(document.body);
+    });
   });
 
   describe('custom', () => {

diff --git a/packages/accordion/package.json b/packages/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "24.7.0-alpha6",
+  "version": "24.7.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -37,17 +37,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha6",
-    "@vaadin/component-base": "24.7.0-alpha6",
-    "@vaadin/details": "24.7.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha6",
+    "@vaadin/a11y-base": "24.7.0-alpha7",
+    "@vaadin/component-base": "24.7.0-alpha7",
+    "@vaadin/details": "24.7.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha6",
-    "@vaadin/test-runner-commands": "24.7.0-alpha6",
+    "@vaadin/chai-plugins": "24.7.0-alpha7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },

diff --git a/packages/app-layout/package.json b/packages/app-layout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "24.7.0-alpha6",
+  "version": "24.7.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -37,17 +37,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha6",
-    "@vaadin/button": "24.7.0-alpha6",
-    "@vaadin/component-base": "24.7.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha6",
+    "@vaadin/a11y-base": "24.7.0-alpha7",
+    "@vaadin/button": "24.7.0-alpha7",
+    "@vaadin/component-base": "24.7.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha6",
-    "@vaadin/test-runner-commands": "24.7.0-alpha6",
+    "@vaadin/chai-plugins": "24.7.0-alpha7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },

diff --git a/packages/avatar-group/package.json b/packages/avatar-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "24.7.0-alpha6",
+  "version": "24.7.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -38,20 +38,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha6",
-    "@vaadin/avatar": "24.7.0-alpha6",
-    "@vaadin/component-base": "24.7.0-alpha6",
-    "@vaadin/item": "24.7.0-alpha6",
-    "@vaadin/list-box": "24.7.0-alpha6",
-    "@vaadin/overlay": "24.7.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha6",
+    "@vaadin/a11y-base": "24.7.0-alpha7",
+    "@vaadin/avatar": "24.7.0-alpha7",
+    "@vaadin/component-base": "24.7.0-alpha7",
+    "@vaadin/item": "24.7.0-alpha7",
+    "@vaadin/list-box": "24.7.0-alpha7",
+    "@vaadin/overlay": "24.7.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha6",
-    "@vaadin/test-runner-commands": "24.7.0-alpha6",
+    "@vaadin/chai-plugins": "24.7.0-alpha7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },

diff --git a/packages/avatar/package.json b/packages/avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar",
-  "version": "24.7.0-alpha6",
+  "version": "24.7.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -38,17 +38,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha6",
-    "@vaadin/component-base": "24.7.0-alpha6",
-    "@vaadin/tooltip": "24.7.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha6",
+    "@vaadin/a11y-base": "24.7.0-alpha7",
+    "@vaadin/component-base": "24.7.0-alpha7",
+    "@vaadin/tooltip": "24.7.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha6",
-    "@vaadin/test-runner-commands": "24.7.0-alpha6",
+    "@vaadin/chai-plugins": "24.7.0-alpha7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },

diff --git a/packages/board/package.json b/packages/board/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/board",
-  "version": "24.7.0-alpha6",
+  "version": "24.7.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -40,13 +40,12 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha6",
-    "@vaadin/component-base": "24.7.0-alpha6",
+    "@vaadin/a11y-base": "24.7.0-alpha7",
+    "@vaadin/component-base": "24.7.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha6",
-    "@vaadin/test-runner-commands": "24.7.0-alpha6",
+    "@vaadin/chai-plugins": "24.7.0-alpha7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },

diff --git a/packages/button/package.json b/packages/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/button",
-  "version": "24.7.0-alpha6",
+  "version": "24.7.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -36,17 +36,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha6",
-    "@vaadin/component-base": "24.7.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha6",
+    "@vaadin/a11y-base": "24.7.0-alpha7",
+    "@vaadin/component-base": "24.7.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha6",
-    "@vaadin/test-runner-commands": "24.7.0-alpha6",
-    "@vaadin/icon": "24.7.0-alpha6",
+    "@vaadin/chai-plugins": "24.7.0-alpha7",
+    "@vaadin/icon": "24.7.0-alpha7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },

diff --git a/packages/button/src/vaadin-button-base.js b/packages/button/src/vaadin-button-base.js
@@ -19,6 +19,11 @@ export const buttonStyles = css`
     display: none !important;
   }
 
+  :host([disabled]) {
+    pointer-events: var(--_vaadin-button-disabled-pointer-events, none);
+    cursor: not-allowed;
+  }
+
   /* Aligns the button with form fields when placed on the same line.
   Note, to make it work, the form fields should have the same "::before" pseudo-element. */
   .vaadin-button-container::before {