@vaadin/a11y-base 25.2.0-alpha11 → 25.2.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/a11y-base",
-  "version": "25.2.0-alpha11",
+  "version": "25.2.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -32,15 +32,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.2.0-alpha11",
+    "@vaadin/component-base": "25.2.0-alpha13",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.2.0-alpha11",
-    "@vaadin/test-runner-commands": "25.2.0-alpha11",
+    "@vaadin/chai-plugins": "25.2.0-alpha13",
+    "@vaadin/test-runner-commands": "25.2.0-alpha13",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "fdc37e932709f95491a027aeb2090911cb7528c6"
+  "gitHead": "a1052aee053529ffcef1a1e9be2c855ed3e98cb2"
 }

package/src/keyboard-direction-mixin.js

@@ -124,7 +124,7 @@ export const KeyboardDirectionMixin = (superclass) =>
 
       if (idx >= 0) {
         event.preventDefault();
-        this._focus(idx, { focusVisible: true }, true);
+        this._focus(idx, { focusVisible: true, preventScroll: true }, true);
       }
     }
 

package/src/list-mixin.js

@@ -282,40 +282,19 @@ export const ListMixin = (superClass) =>
       });
       this._setFocusable(idx);
       this._scrollToItem(idx);
-      super._focus(idx, options);
+      super._focus(idx, options ?? { preventScroll: true });
     }
 
     /**
-     * Scroll the container to have the next item by the edge of the viewport.
+     * Scroll the container to have the item visible.
      * @param {number} idx
      * @protected
      */
     _scrollToItem(idx) {
-      const item = this.items[idx];
-      if (!item) {
-        return;
+      const item = this._getItems()[idx];
+      if (item) {
+        item.scrollIntoView({ block: 'nearest', inline: 'nearest' });
       }
-
-      const props = this._vertical ? ['top', 'bottom'] : this._isRTL ? ['right', 'left'] : ['left', 'right'];
-
-      const scrollerRect = this._scrollerElement.getBoundingClientRect();
-      const nextItemRect = (this.items[idx + 1] || item).getBoundingClientRect();
-      const prevItemRect = (this.items[idx - 1] || item).getBoundingClientRect();
-
-      let scrollDistance = 0;
-      if (
-        (!this._isRTL && nextItemRect[props[1]] >= scrollerRect[props[1]]) ||
-        (this._isRTL && nextItemRect[props[1]] <= scrollerRect[props[1]])
-      ) {
-        scrollDistance = nextItemRect[props[1]] - scrollerRect[props[1]];
-      } else if (
-        (!this._isRTL && prevItemRect[props[0]] <= scrollerRect[props[0]]) ||
-        (this._isRTL && prevItemRect[props[0]] >= scrollerRect[props[0]])
-      ) {
-        scrollDistance = prevItemRect[props[0]] - scrollerRect[props[0]];
-      }
-
-      this._scroll(scrollDistance);
     }
 
     /**