@vaadin/a11y-base 25.2.0-alpha9 → 25.2.0-beta2

package/src/focus-mixin.js

@@ -8,101 +8,100 @@ import { isKeyboardActive } from './focus-utils.js';
 
 /**
  * A mixin to handle `focused` and `focus-ring` attributes based on focus.
- *
- * @polymerMixin
  */
-export const FocusMixin = dedupeMixin(
-  (superclass) =>
-    class FocusMixinClass extends superclass {
-      /**
-       * @protected
-       * @return {boolean}
-       */
-      get _keyboardActive() {
-        return isKeyboardActive();
-      }
+const FocusMixinImplementation = (superclass) => {
+  return class FocusMixinClass extends superclass {
+    /**
+     * @protected
+     * @return {boolean}
+     */
+    get _keyboardActive() {
+      return isKeyboardActive();
+    }
 
-      /** @protected */
-      ready() {
-        this.addEventListener('focusin', (e) => {
-          if (this._shouldSetFocus(e)) {
-            this._setFocused(true);
-          }
-        });
+    /** @protected */
+    ready() {
+      this.addEventListener('focusin', (e) => {
+        if (this._shouldSetFocus(e)) {
+          this._setFocused(true);
+        }
+      });
 
-        this.addEventListener('focusout', (e) => {
-          if (this._shouldRemoveFocus(e)) {
-            this._setFocused(false);
-          }
-        });
+      this.addEventListener('focusout', (e) => {
+        if (this._shouldRemoveFocus(e)) {
+          this._setFocused(false);
+        }
+      });
 
-        // In super.ready() other 'focusin' and 'focusout' listeners might be
-        // added, so we call it after our own ones to ensure they execute first.
-        // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
-        // input field on iOS after "Done" is pressed.
-        super.ready();
-      }
+      // In super.ready() other 'focusin' and 'focusout' listeners might be
+      // added, so we call it after our own ones to ensure they execute first.
+      // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
+      // input field on iOS after "Done" is pressed.
+      super.ready();
+    }
 
-      /** @protected */
-      disconnectedCallback() {
-        super.disconnectedCallback();
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
 
-        // In non-Chrome browsers, blur does not fire on the element when it is disconnected.
-        // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-        if (this.hasAttribute('focused')) {
-          this._setFocused(false);
-        }
+      // In non-Chrome browsers, blur does not fire on the element when it is disconnected.
+      // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
+      if (this.hasAttribute('focused')) {
+        this._setFocused(false);
       }
+    }
 
-      /**
-       * @param {FocusOptions=} options
-       * @protected
-       * @override
-       */
-      focus(options) {
-        super.focus(options);
+    /**
+     * @param {FocusOptions=} options
+     * @protected
+     * @override
+     */
+    focus(options) {
+      super.focus(options);
 
-        // Set focus-ring attribute on programmatic focus by default
-        // unless explicitly disabled by `{ focusVisible: false }`.
-        if (!(options && options.focusVisible === false)) {
-          this.setAttribute('focus-ring', '');
-        }
+      // Set focus-ring attribute on programmatic focus by default
+      // unless explicitly disabled by `{ focusVisible: false }`.
+      if (options?.focusVisible !== false) {
+        this.setAttribute('focus-ring', '');
       }
+    }
 
-      /**
-       * Override to change how focused and focus-ring attributes are set.
-       *
-       * @param {boolean} focused
-       * @protected
-       */
-      _setFocused(focused) {
-        this.toggleAttribute('focused', focused);
+    /**
+     * Override to change how focused and focus-ring attributes are set.
+     *
+     * @param {boolean} focused
+     * @protected
+     */
+    _setFocused(focused) {
+      this.toggleAttribute('focused', focused);
 
-        // Focus-ring is true when the element was focused from the keyboard.
-        // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
-        this.toggleAttribute('focus-ring', focused && this._keyboardActive);
-      }
+      // Focus-ring is true when the element was focused from the keyboard.
+      // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
+      this.toggleAttribute('focus-ring', focused && this._keyboardActive);
+    }
 
-      /**
-       * Override to define if the field receives focus based on the event.
-       *
-       * @param {FocusEvent} _event
-       * @return {boolean}
-       * @protected
-       */
-      _shouldSetFocus(_event) {
-        return true;
-      }
+    /**
+     * Override to define if the field receives focus based on the event.
+     *
+     * @param {FocusEvent} _event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldSetFocus(_event) {
+      return true;
+    }
 
-      /**
-       * Override to define if the field loses focus based on the event.
-       *
-       * @param {FocusEvent} _event
-       * @return {boolean}
-       * @protected
-       */
-      _shouldRemoveFocus(_event) {
-        return true;
-      }
-    },
-);
+    /**
+     * Override to define if the field loses focus based on the event.
+     *
+     * @param {FocusEvent} _event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldRemoveFocus(_event) {
+      return true;
+    }
+  };
+};
+
+export const FocusMixin = dedupeMixin(FocusMixinImplementation);

package/src/keyboard-direction-mixin.js

@@ -8,9 +8,6 @@ import { KeyboardMixin } from './keyboard-mixin.js';
 
 /**
  * A mixin for navigating items with keyboard.
- *
- * @polymerMixin
- * @mixes KeyboardMixin
  */
 export const KeyboardDirectionMixin = (superclass) =>
   class KeyboardDirectionMixinClass extends KeyboardMixin(superclass) {
@@ -127,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/keyboard-mixin.js

@@ -9,77 +9,76 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * A mixin that manages keyboard handling.
  * The mixin subscribes to the keyboard events while an actual implementation
  * for the event handlers is left to the client (a component or another mixin).
- *
- * @polymerMixin
  */
-export const KeyboardMixin = dedupeMixin(
-  (superclass) =>
-    class KeyboardMixinClass extends superclass {
-      /** @protected */
-      ready() {
-        super.ready();
+const KeyboardMixinImplementation = (superclass) => {
+  return class KeyboardMixinClass extends superclass {
+    /** @protected */
+    ready() {
+      super.ready();
 
-        this.addEventListener('keydown', (event) => {
-          this._onKeyDown(event);
-        });
+      this.addEventListener('keydown', (event) => {
+        this._onKeyDown(event);
+      });
 
-        this.addEventListener('keyup', (event) => {
-          this._onKeyUp(event);
-        });
-      }
+      this.addEventListener('keyup', (event) => {
+        this._onKeyUp(event);
+      });
+    }
 
-      /**
-       * A handler for the `keydown` event. By default, it calls
-       * separate methods for handling "Enter" and "Escape" keys.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} event
-       * @protected
-       */
-      _onKeyDown(event) {
-        switch (event.key) {
-          case 'Enter':
-            this._onEnter(event);
-            break;
-          case 'Escape':
-            this._onEscape(event);
-            break;
-          default:
-            break;
-        }
+    /**
+     * A handler for the `keydown` event. By default, it calls
+     * separate methods for handling "Enter" and "Escape" keys.
+     * Override the method to implement your own behavior.
+     *
+     * @param {KeyboardEvent} event
+     * @protected
+     */
+    _onKeyDown(event) {
+      switch (event.key) {
+        case 'Enter':
+          this._onEnter(event);
+          break;
+        case 'Escape':
+          this._onEscape(event);
+          break;
+        default:
+          break;
       }
+    }
 
-      /**
-       * A handler for the `keyup` event. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onKeyUp(_event) {
-        // To be implemented.
-      }
+    /**
+     * A handler for the `keyup` event. By default, it does nothing.
+     * Override the method to implement your own behavior.
+     *
+     * @param {KeyboardEvent} _event
+     * @protected
+     */
+    _onKeyUp(_event) {
+      // To be implemented.
+    }
 
-      /**
-       * A handler for the "Enter" key. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onEnter(_event) {
-        // To be implemented.
-      }
+    /**
+     * A handler for the "Enter" key. By default, it does nothing.
+     * Override the method to implement your own behavior.
+     *
+     * @param {KeyboardEvent} _event
+     * @protected
+     */
+    _onEnter(_event) {
+      // To be implemented.
+    }
 
-      /**
-       * A handler for the "Escape" key. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onEscape(_event) {
-        // To be implemented.
-      }
-    },
-);
+    /**
+     * A handler for the "Escape" key. By default, it does nothing.
+     * Override the method to implement your own behavior.
+     *
+     * @param {KeyboardEvent} _event
+     * @protected
+     */
+    _onEscape(_event) {
+      // To be implemented.
+    }
+  };
+};
+
+export const KeyboardMixin = dedupeMixin(KeyboardMixinImplementation);

package/src/list-mixin.js

@@ -12,9 +12,6 @@ import { KeyboardDirectionMixin } from './keyboard-direction-mixin.js';
 
 /**
  * A mixin for list elements, facilitating navigation and selection of items.
- *
- * @polymerMixin
- * @mixes KeyboardDirectionMixin
  */
 export const ListMixin = (superClass) =>
   class ListMixinClass extends KeyboardDirectionMixin(superClass) {
@@ -285,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);
     }
 
     /**
@@ -350,13 +326,4 @@ export const ListMixin = (superClass) =>
 
       return super._isItemFocusable(item);
     }
-
-    /**
-     * Fired when the selection is changed.
-     * Not fired when used in `multiple` selection mode.
-     *
-     * @event selected-changed
-     * @param {Object} detail
-     * @param {Object} detail.value the index of the item selected in the items array.
-     */
   };

package/src/tabindex-mixin.js

@@ -10,9 +10,6 @@ import { DisabledMixin } from './disabled-mixin.js';
  *
  * The attribute is set to -1 whenever the user disables the element
  * and restored with the last known value once the element is enabled.
- *
- * @polymerMixin
- * @mixes DisabledMixin
  */
 export const TabindexMixin = (superclass) =>
   class TabindexMixinClass extends DisabledMixin(superclass) {