@vaadin/multi-select-combo-box 23.1.0-alpha4 → 23.1.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.0-alpha4",
+  "version": "23.1.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -33,18 +33,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.1.0-alpha4",
-    "@vaadin/component-base": "23.1.0-alpha4",
-    "@vaadin/field-base": "23.1.0-alpha4",
-    "@vaadin/input-container": "23.1.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
+    "@vaadin/combo-box": "23.1.0-beta1",
+    "@vaadin/component-base": "23.1.0-beta1",
+    "@vaadin/field-base": "23.1.0-beta1",
+    "@vaadin/input-container": "23.1.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta1",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
+  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
 }

package/src/vaadin-multi-select-combo-box-chip.js

@@ -30,6 +30,16 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
 
   static get properties() {
     return {
+      disabled: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
+      readonly: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       label: {
         type: String,
       },
@@ -49,7 +59,6 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
           align-self: center;
           white-space: nowrap;
           box-sizing: border-box;
-          min-width: 0;
         }
 
         [part='label'] {
@@ -57,7 +66,7 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
           text-overflow: ellipsis;
         }
 
-        :host([part~='overflow']) [part='remove-button'] {
+        :host(:is([readonly], [disabled], [part~='overflow'])) [part='remove-button'] {
           display: none !important;
         }
       </style>

package/src/vaadin-multi-select-combo-box-container.js

@@ -9,10 +9,9 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-multi-select-combo-box-container',
   css`
-    .wrapper {
+    #wrapper {
       display: flex;
       width: 100%;
-      min-width: 0;
     }
   `,
   {
@@ -40,7 +39,7 @@ class MultiSelectComboBoxContainer extends InputContainer {
       const slots = content.querySelectorAll('slot');
 
       const wrapper = document.createElement('div');
-      wrapper.setAttribute('class', 'wrapper');
+      wrapper.setAttribute('id', 'wrapper');
       content.insertBefore(wrapper, slots[2]);
 
       wrapper.appendChild(slots[0]);

package/src/vaadin-multi-select-combo-box-scroller.js

@@ -17,6 +17,19 @@ class MultiSelectComboBoxScroller extends ComboBoxScroller {
     return 'vaadin-multi-select-combo-box-scroller';
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('aria-multiselectable', 'true');
+  }
+
+  /** @private */
+  __getAriaSelected(_focusedIndex, itemIndex) {
+    const item = this.items[itemIndex];
+    return this.__isItemSelected(item, null, this.itemIdPath).toString();
+  }
+
   /** @private */
   __isItemSelected(item, _selectedItem, itemIdPath) {
     if (item instanceof ComboBoxPlaceholder) {

package/src/vaadin-multi-select-combo-box.d.ts

@@ -20,6 +20,13 @@ import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+export interface MultiSelectComboBoxI18n {
+  cleared: string;
+  selected: string;
+  deselected: string;
+  total: string;
+}
+
 /**
  * Fired when the user commits a value change.
  */
@@ -79,6 +86,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  *
  * Part name              | Description
  * -----------------------|----------------
+ * `chips`                | The element that wraps chips for selected items
  * `chip`                 | Chip shown for every selected item
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
@@ -112,7 +120,6 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
- * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `60px`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
  * ### Internal components
@@ -199,6 +206,28 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   itemValuePath: string;
 
+  /**
+   * The object used to localize this component.
+   * To change the default localization, replace the entire
+   * _i18n_ object or just the property you want to modify.
+   *
+   * The object has the following JSON structure and default values:
+   * ```
+   * {
+   *   // Screen reader announcement on clear button click.
+   *   cleared: 'Selection cleared',
+   *   // Screen reader announcement when item is selected.
+   *   selected: 'added to selection',
+   *   // Screen reader announcement when item is deselected.
+   *   deselected: 'removed from selection',
+   *   // Screen reader announcement of the selected items count.
+   *   // {count} is replaced with the actual count of items.
+   *   total: '{count} items selected',
+   * }
+   * ```
+   */
+  i18n: MultiSelectComboBoxI18n;
+
   /**
    * True if the dropdown is open, false otherwise.
    */

package/src/vaadin-multi-select-combo-box.js

@@ -7,6 +7,7 @@ import './vaadin-multi-select-combo-box-chip.js';
 import './vaadin-multi-select-combo-box-container.js';
 import './vaadin-multi-select-combo-box-internal.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -18,7 +19,6 @@ import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixi
 
 const multiSelectComboBox = css`
   :host {
-    --chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 4em);
     --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
   }
 
@@ -26,6 +26,11 @@ const multiSelectComboBox = css`
     display: none !important;
   }
 
+  #chips {
+    display: flex;
+    align-items: center;
+  }
+
   :host([has-value]) ::slotted(input:placeholder-shown) {
     color: transparent !important;
   }
@@ -37,11 +42,12 @@ const multiSelectComboBox = css`
 
   [part='chip'] {
     flex: 0 1 auto;
-    min-width: var(--chip-min-width);
   }
 
-  :host([readonly]) [part~='chip'] {
-    pointer-events: none;
+  :host(:is([readonly], [disabled])) ::slotted(input) {
+    flex-grow: 0;
+    flex-basis: 0;
+    padding: 0;
   }
 `;
 
@@ -69,6 +75,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  *
  * Part name              | Description
  * -----------------------|----------------
+ * `chips`                | The element that wraps chips for selected items
  * `chip`                 | Chip shown for every selected item
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
@@ -102,7 +109,6 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
- * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `60px`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
  * ### Internal components
@@ -172,14 +178,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
             theme$="[[theme]]"
           >
             <vaadin-multi-select-combo-box-chip
+              id="overflow"
               slot="prefix"
               part$="[[_getOverflowPart(_overflowItems.length)]]"
               disabled="[[disabled]]"
+              readonly="[[readonly]]"
               label="[[_getOverflowLabel(_overflowItems.length)]]"
               title$="[[_getOverflowTitle(_overflowItems)]]"
               hidden$="[[_isOverflowHidden(_overflowItems.length)]]"
               on-mousedown="_preventBlur"
             ></vaadin-multi-select-combo-box-chip>
+            <div id="chips" part="chips" slot="prefix"></div>
             <slot name="input"></slot>
             <div id="clearButton" part="clear-button" slot="suffix"></div>
             <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix"></div>
@@ -249,6 +258,40 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: String,
       },
 
+      /**
+       * The object used to localize this component.
+       * To change the default localization, replace the entire
+       * _i18n_ object or just the property you want to modify.
+       *
+       * The object has the following JSON structure and default values:
+       * ```
+       * {
+       *   // Screen reader announcement on clear button click.
+       *   cleared: 'Selection cleared',
+       *   // Screen reader announcement when item is selected.
+       *   selected: 'added to selection',
+       *   // Screen reader announcement when item is deselected.
+       *   deselected: 'removed from selection',
+       *   // Screen reader announcement of the selected items count.
+       *   // {count} is replaced with the actual count of items.
+       *   total: '{count} items selected',
+       * }
+       * ```
+       * @type {!MultiSelectComboBoxI18n}
+       * @default {English/US}
+       */
+      i18n: {
+        type: Object,
+        value: () => {
+          return {
+            cleared: 'Selection cleared',
+            selected: 'added to selection',
+            deselected: 'removed from selection',
+            total: '{count} items selected',
+          };
+        },
+      },
+
       /**
        * When present, it specifies that the field is read-only.
        */
@@ -401,7 +444,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
    * @return {boolean}
    */
   checkValidity() {
-    return this.required ? this._hasValue : true;
+    return this.required && !this.readonly ? this._hasValue : true;
   }
 
   /**
@@ -413,9 +456,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     super._disabledChanged(disabled, oldDisabled);
 
     if (disabled || oldDisabled) {
-      this._chips.forEach((chip) => {
-        chip.toggleAttribute('disabled', disabled);
-      });
+      this.__updateChips();
     }
   }
 
@@ -464,6 +505,26 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.__updateChips();
   }
 
+  /**
+   * Override method from `DelegateStateMixin` to set required state
+   * using `aria-required` attribute instead of `required`, in order
+   * to prevent screen readers from announcing "invalid entry".
+   * @protected
+   * @override
+   */
+  _delegateAttribute(name, value) {
+    if (!this.stateTarget) {
+      return;
+    }
+
+    if (name === 'required') {
+      this._delegateAttribute('aria-required', value ? 'true' : false);
+      return;
+    }
+
+    super._delegateAttribute(name, value);
+  }
+
   /**
    * Setting clear button visible reduces total space available
    * for rendering chips, and making it hidden increases it.
@@ -480,18 +541,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     if (readonly) {
       this.__savedItems = this.$.comboBox._getOverlayItems();
       this.$.comboBox._setOverlayItems(Array.from(this.selectedItems));
-
-      // Update chips to hide remove button
-      this._chips.forEach((chip) => {
-        chip.setAttribute('readonly', '');
-      });
+      this.__updateChips();
     } else if (oldReadonly) {
       this.$.comboBox._setOverlayItems(this.__savedItems);
       this.__savedItems = null;
-
-      this._chips.forEach((chip) => {
-        chip.removeAttribute('readonly');
-      });
+      this.__updateChips();
     }
   }
 
@@ -511,6 +565,14 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
     this._toggleHasValue();
 
+    // Use placeholder for announcing items
+    if (this._hasValue) {
+      this.__savedPlaceholder = this.placeholder;
+      this.placeholder = selectedItems.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+    } else {
+      this.placeholder = this.__savedPlaceholder;
+    }
+
     // Re-render chips
     this.__updateChips();
 
@@ -580,11 +642,19 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.$.comboBox.clear();
   }
 
+  /** @private */
+  __announceItem(itemLabel, isSelected, itemCount) {
+    const state = isSelected ? 'selected' : 'deselected';
+    const total = this.i18n.total.replace('{count}', itemCount || 0);
+    announce(`${itemLabel} ${this.i18n[state]} ${total}`);
+  }
+
   /** @private */
   __removeItem(item) {
     const itemsCopy = [...this.selectedItems];
     itemsCopy.splice(itemsCopy.indexOf(item), 1);
     this.__updateSelection(itemsCopy);
+    this.__announceItem(item, false, itemsCopy.length);
   }
 
   /** @private */
@@ -592,9 +662,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     const itemsCopy = [...this.selectedItems];
 
     const index = this._findIndex(item, itemsCopy, this.itemIdPath);
+    const itemLabel = this._getItemLabel(item, this.itemLabelPath);
+
+    let isSelected = false;
+
     if (index !== -1) {
       // Do not unselect when manually typing and committing an already selected item.
-      if (this.filter.toLowerCase() === this._getItemLabel(item, this.itemLabelPath).toLowerCase()) {
+      if (this.filter.toLowerCase() === itemLabel.toLowerCase()) {
         this.__clearFilter();
         return;
       }
@@ -602,12 +676,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       itemsCopy.splice(index, 1);
     } else {
       itemsCopy.push(item);
+      isSelected = true;
     }
 
     this.__updateSelection(itemsCopy);
 
     // Suppress `value-changed` event.
     this.__clearFilter();
+
+    this.__announceItem(itemLabel, isSelected, itemsCopy.length);
   }
 
   /** @private */
@@ -626,8 +703,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     chip.setAttribute('slot', 'prefix');
 
     chip.item = item;
-    chip.toggleAttribute('disabled', this.disabled);
-    chip.toggleAttribute('readonly', this.readonly);
+    chip.disabled = this.disabled;
+    chip.readonly = this.readonly;
 
     const label = this._getItemLabel(item, this.itemLabelPath);
     chip.label = label;
@@ -640,18 +717,21 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 
   /** @private */
-  __getMinWidth(chip) {
+  __getOverflowWidth() {
+    const chip = this.$.overflow;
+
     chip.style.visibility = 'hidden';
-    chip.style.display = 'block';
-    chip.style.minWidth = 'var(--chip-min-width)';
+    chip.removeAttribute('hidden');
 
-    const result = parseInt(getComputedStyle(chip).minWidth);
+    // Detect max possible width of the overflow chip
+    chip.setAttribute('part', 'chip overflow');
+    const overflowStyle = getComputedStyle(chip);
+    const overflowWidth = chip.clientWidth + parseInt(overflowStyle.marginInlineStart);
 
-    chip.style.minWidth = '';
-    chip.style.display = '';
+    chip.setAttribute('hidden', '');
     chip.style.visibility = '';
 
-    return result;
+    return overflowWidth;
   }
 
   /** @private */
@@ -661,46 +741,36 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
 
     // Clear all chips except the overflow
-    const chips = Array.from(this._chips).reverse();
-    const overflow = chips.pop();
-
-    chips.forEach((chip) => {
-      chip.remove();
+    Array.from(this._chips).forEach((chip) => {
+      if (chip !== this.$.overflow) {
+        chip.remove();
+      }
     });
 
     const items = [...this.selectedItems];
 
-    let refNode = overflow.nextElementSibling;
-
-    // Use overflow chip to measure min-width
-    const chipMinWidth = this.__getMinWidth(overflow);
-    const inputMinWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
-    const containerStyle = getComputedStyle(this._inputField);
+    // Detect available remaining width for chips
+    const totalWidth = this._inputField.$.wrapper.clientWidth;
+    const inputWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
 
-    // Detect available width for chips
-    let totalWidth =
-      parseInt(containerStyle.width) -
-      parseInt(containerStyle.paddingLeft) -
-      parseInt(containerStyle.paddingRight) -
-      this.$.toggleButton.clientWidth -
-      inputMinWidth;
+    let remainingWidth = totalWidth - inputWidth;
 
-    if (this.clearButtonVisible) {
-      totalWidth -= this.$.clearButton.clientWidth;
+    if (items.length > 1) {
+      remainingWidth -= this.__getOverflowWidth();
     }
 
-    for (let i = items.length - 1; i >= 0; i--) {
-      // Ensure there is enough space for another chip
-      if (totalWidth < chipMinWidth) {
+    // Add chips until remaining width is exceeded
+    for (let i = items.length - 1, refNode = null; i >= 0; i--) {
+      const chip = this.__createChip(items[i]);
+      this.$.chips.insertBefore(chip, refNode);
+
+      if (this.$.chips.clientWidth > remainingWidth) {
+        chip.remove();
         break;
       }
 
-      const item = items.pop();
-      const chip = this.__createChip(item);
-      this._inputField.insertBefore(chip, refNode);
-
+      items.pop();
       refNode = chip;
-      totalWidth -= chipMinWidth;
     }
 
     this._overflowItems = items;
@@ -715,6 +785,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     event.stopPropagation();
 
     this.__updateSelection([]);
+
+    announce(this.i18n.cleared);
   }
 
   /**

package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js

@@ -79,6 +79,7 @@ const chip = css`
     justify-content: center;
     margin-top: -0.3125em;
     margin-bottom: -0.3125em;
+    margin-inline-start: auto;
     width: 1.25em;
     height: 1.25em;
     font-size: 1.5em;
@@ -93,11 +94,6 @@ const chip = css`
     -webkit-text-fill-color: var(--lumo-disabled-text-color);
     pointer-events: none;
   }
-
-  :host([readonly]) [part='remove-button'],
-  :host([disabled]) [part='remove-button'] {
-    display: none;
-  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {

package/theme/lumo/vaadin-multi-select-combo-box-styles.js

@@ -30,14 +30,14 @@ const multiSelectComboBox = css`
     padding-inline-start: 0;
   }
 
-  :host([readonly]) [part~='chip'] {
-    opacity: 0.7;
-  }
-
   [part~='chip']:not(:last-of-type) {
     margin-inline-end: var(--lumo-space-xs);
   }
 
+  [part~='overflow']:not([hidden]) + :not(:empty) {
+    margin-inline-start: var(--lumo-space-xs);
+  }
+
   [part='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
   }

package/theme/material/vaadin-multi-select-combo-box-chip-styles.js

@@ -79,6 +79,7 @@ const chip = css`
     box-sizing: border-box;
     width: 20px;
     height: 20px;
+    margin-inline-start: auto;
     line-height: 20px;
     padding: 0;
     font-size: 0.75em;
@@ -93,11 +94,6 @@ const chip = css`
     -webkit-text-fill-color: var(--material-disabled-text-color);
     pointer-events: none;
   }
-
-  :host([readonly]) [part='remove-button'],
-  :host([disabled]) [part='remove-button'] {
-    display: none;
-  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {

package/theme/material/vaadin-multi-select-combo-box-styles.js

@@ -25,10 +25,6 @@ registerStyles(
 );
 
 const multiSelectComboBox = css`
-  :host([readonly]) [part~='chip'] {
-    opacity: 0.5;
-  }
-
   [part='input-field'] {
     height: auto;
     min-height: 32px;