@vaadin/select 24.1.0-alpha7 → 24.1.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "24.1.0-alpha7",
+  "version": "24.1.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -38,18 +38,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.1.0-alpha7",
-    "@vaadin/button": "24.1.0-alpha7",
-    "@vaadin/component-base": "24.1.0-alpha7",
-    "@vaadin/field-base": "24.1.0-alpha7",
-    "@vaadin/input-container": "24.1.0-alpha7",
-    "@vaadin/item": "24.1.0-alpha7",
-    "@vaadin/list-box": "24.1.0-alpha7",
-    "@vaadin/lit-renderer": "24.1.0-alpha7",
-    "@vaadin/overlay": "24.1.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "24.1.0-alpha7",
-    "@vaadin/vaadin-material-styles": "24.1.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha7"
+    "@vaadin/a11y-base": "24.1.0-alpha9",
+    "@vaadin/button": "24.1.0-alpha9",
+    "@vaadin/component-base": "24.1.0-alpha9",
+    "@vaadin/field-base": "24.1.0-alpha9",
+    "@vaadin/input-container": "24.1.0-alpha9",
+    "@vaadin/item": "24.1.0-alpha9",
+    "@vaadin/list-box": "24.1.0-alpha9",
+    "@vaadin/lit-renderer": "24.1.0-alpha9",
+    "@vaadin/overlay": "24.1.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "24.1.0-alpha9",
+    "@vaadin/vaadin-material-styles": "24.1.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha9"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6711b6ac7b49e2ddc0990c34de9718b58c2d16b3"
+  "gitHead": "db4fe44603a6702b85b0da2a6d033ddf8ffea5c4"
 }

package/src/vaadin-select.js

@@ -9,10 +9,10 @@ import './vaadin-select-list-box.js';
 import './vaadin-select-overlay.js';
 import './vaadin-select-value-button.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { setAriaIDReference } from '@vaadin/a11y-base/src/aria-id-reference.js';
 import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
-import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
@@ -20,12 +20,16 @@ import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
+import { LabelController } from '@vaadin/field-base/src/label-controller.js';
 import { fieldShared } from '@vaadin/field-base/src/styles/field-shared-styles.js';
 import { inputFieldContainer } from '@vaadin/field-base/src/styles/input-field-container-styles.js';
+import { screenReaderOnly } from '@vaadin/field-base/src/styles/sr-only-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ButtonController } from './button-controller.js';
 
-registerStyles('vaadin-select', [fieldShared, inputFieldContainer], { moduleId: 'vaadin-select-styles' });
+registerStyles('vaadin-select', [fieldShared, inputFieldContainer, screenReaderOnly], {
+  moduleId: 'vaadin-select-styles',
+});
 
 /**
  * `<vaadin-select>` is a Web Component for selecting values from a list of items.
@@ -193,6 +197,9 @@ class Select extends OverlayClassMixin(
       ></vaadin-select-overlay>
 
       <slot name="tooltip"></slot>
+      <div class="sr-only">
+        <slot name="sr-label"></slot>
+      </div>
     `;
   }
 
@@ -326,6 +333,8 @@ class Select extends OverlayClassMixin(
     super();
 
     this._itemId = `value-${this.localName}-${generateUniqueId()}`;
+    this._srLabelController = new LabelController(this);
+    this._srLabelController.slotName = 'sr-label';
   }
 
   /** @protected */
@@ -345,7 +354,7 @@ class Select extends OverlayClassMixin(
 
     this._valueButtonController = new ButtonController(this);
     this.addController(this._valueButtonController);
-
+    this.addController(this._srLabelController);
     this.addController(
       new MediaQueryController(this._phoneMediaQuery, (matches) => {
         this._phone = matches;
@@ -627,6 +636,55 @@ class Select extends OverlayClassMixin(
     itemElement.setAttribute('id', this._itemId);
   }
 
+  /**
+   * @param {string} accessibleName
+   * @protected
+   */
+  _accessibleNameChanged(accessibleName) {
+    this._srLabelController.setLabel(accessibleName);
+    this._setCustomAriaLabelledBy(accessibleName ? this._srLabelController.defaultId : null);
+  }
+
+  /**
+   * @param {string} accessibleNameRef
+   * @protected
+   */
+  _accessibleNameRefChanged(accessibleNameRef) {
+    this._setCustomAriaLabelledBy(accessibleNameRef);
+  }
+
+  /**
+   * @param {string} ariaLabelledby
+   * @private
+   */
+  _setCustomAriaLabelledBy(ariaLabelledby) {
+    const labelId = this._getLabelIdWithItemId(ariaLabelledby);
+    this._fieldAriaController.setLabelId(labelId, true);
+  }
+
+  /**
+   * @param {string | null} labelId
+   * @returns string | null
+   * @private
+   */
+  _getLabelIdWithItemId(labelId) {
+    const selected = this._items ? this._items[this._menuElement.selected] : false;
+    const itemId = selected || this.placeholder ? this._itemId : '';
+
+    return labelId ? `${labelId} ${itemId}`.trim() : null;
+  }
+
+  /**
+   * @returns HTMLLabelElement
+   * @private
+   */
+  _createScreenReaderLabel() {
+    const label = document.createElement('label');
+    label.id = `sr-label-vaadin-select-${generateUniqueId()}`;
+    label.setAttribute('slot', 'sr-label');
+    return label;
+  }
+
   /** @private */
   __updateValueButton() {
     const valueButton = this.focusElement;
@@ -662,11 +720,11 @@ class Select extends OverlayClassMixin(
       }
     }
 
-    // Add the item ID to aria-labelledby if there is a selected item or a placeholder text.
-    if (selected || this.placeholder) {
-      addValueToAttribute(valueButton, 'aria-labelledby', this._itemId);
-    } else {
-      removeValueFromAttribute(valueButton, 'aria-labelledby', this._itemId);
+    const labelledIdReferenceConfig = selected || this.placeholder ? { newId: this._itemId } : { oldId: this._itemId };
+
+    setAriaIDReference(valueButton, 'aria-labelledby', labelledIdReferenceConfig);
+    if (this.accessibleName || this.accessibleNameRef) {
+      this._setCustomAriaLabelledBy(this.accessibleNameRef || this._srLabelController.defaultId);
     }
   }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "24.1.0-alpha7",
+  "version": "24.1.0-alpha9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-select",
-          "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n  { label: 'Most recent first', value: 'recent' },\n  { component: 'hr' },\n  { label: 'Rating: low to high', value: 'rating-asc' },\n  { label: 'Rating: high to low', value: 'rating-desc' },\n  { component: 'hr' },\n  { label: 'Price: low to high', value: 'price-asc', disabled: true },\n  { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n  const listBox = document.createElement('vaadin-list-box');\n  // append 3 <vaadin-item> elements\n  ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n    const item = document.createElement('vaadin-item');\n    item.textContent = name;\n    item.setAttribute('label', name)\n    listBox.appendChild(item);\n  });\n\n  // update the content\n  root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                    | Description                  | Target element          | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width`     | Default width of the field   | :host                   | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha7/#/elements/vaadin-text-field) for the styling documentation.\n\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description                 | Part name\n----------|-----------------------------|-----------\n`opened`  | Set when the select is open | :host\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha7/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha7/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha7/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n  { label: 'Most recent first', value: 'recent' },\n  { component: 'hr' },\n  { label: 'Rating: low to high', value: 'rating-asc' },\n  { label: 'Rating: high to low', value: 'rating-desc' },\n  { component: 'hr' },\n  { label: 'Price: low to high', value: 'price-asc', disabled: true },\n  { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n  const listBox = document.createElement('vaadin-list-box');\n  // append 3 <vaadin-item> elements\n  ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n    const item = document.createElement('vaadin-item');\n    item.textContent = name;\n    item.setAttribute('label', name)\n    listBox.appendChild(item);\n  });\n\n  // update the content\n  root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                    | Description                  | Target element          | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width`     | Default width of the field   | :host                   | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description                 | Part name\n----------|-----------------------------|-----------\n`opened`  | Set when the select is open | :host\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha9/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha9/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha9/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "label",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "24.1.0-alpha7",
+  "version": "24.1.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-select",
-          "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n  { label: 'Most recent first', value: 'recent' },\n  { component: 'hr' },\n  { label: 'Rating: low to high', value: 'rating-asc' },\n  { label: 'Rating: high to low', value: 'rating-desc' },\n  { component: 'hr' },\n  { label: 'Price: low to high', value: 'price-asc', disabled: true },\n  { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n  const listBox = document.createElement('vaadin-list-box');\n  // append 3 <vaadin-item> elements\n  ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n    const item = document.createElement('vaadin-item');\n    item.textContent = name;\n    item.setAttribute('label', name)\n    listBox.appendChild(item);\n  });\n\n  // update the content\n  root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                    | Description                  | Target element          | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width`     | Default width of the field   | :host                   | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha7/#/elements/vaadin-text-field) for the styling documentation.\n\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description                 | Part name\n----------|-----------------------------|-----------\n`opened`  | Set when the select is open | :host\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha7/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha7/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha7/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n  { label: 'Most recent first', value: 'recent' },\n  { component: 'hr' },\n  { label: 'Rating: low to high', value: 'rating-asc' },\n  { label: 'Rating: high to low', value: 'rating-desc' },\n  { component: 'hr' },\n  { label: 'Price: low to high', value: 'price-asc', disabled: true },\n  { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n  const listBox = document.createElement('vaadin-list-box');\n  // append 3 <vaadin-item> elements\n  ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n    const item = document.createElement('vaadin-item');\n    item.textContent = name;\n    item.setAttribute('label', name)\n    listBox.appendChild(item);\n  });\n\n  // update the content\n  root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                    | Description                  | Target element          | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width`     | Default width of the field   | :host                   | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name       | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description                 | Part name\n----------|-----------------------------|-----------\n`opened`  | Set when the select is open | :host\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha9/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha9/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-alpha9/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {