feat(select): Improvements

package.json

@@ -40,7 +40,7 @@
     "@angular/forms": "^9.1.2",
     "@angular/platform-browser": "^9.1.2",
     "core-js": "^2.6.9",
-    "material-components-web": "6.0.0",
+    "material-components-web": "7.0.0-canary.09f591967.0",
     "rxjs": "^6.5.5",
     "tsickle": "0.38.1",
     "tslib": "1.11.1",

packages.bzl

@@ -3,7 +3,7 @@
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^9.0.0 || ^10.0.0-0"
 ANGULAR_CDK_PACKAGE_VERSION = "^9.2.1"
-MDC_PACKAGE_VERSION = "6.0.0"
+MDC_PACKAGE_VERSION = "7.0.0-canary.09f591967.0"
 TSLIB_PACKAGE_VERSION = "^1.11.1"
 
 VERSION_PLACEHOLDER_REPLACEMENTS = {

packages/select/helper-text.ts

@@ -8,9 +8,12 @@ import {
 } from '@material/select';
 import {MDCComponent} from '@angular-mdc/web/base';
 
+let nextUniqueId = 0;
+
 export class MdcSelectHelperTextFoundation extends MDCComponent<MDCSelectHelperTextFoundation>
   implements OnDestroy {
   private _initialized: boolean = false;
+  _uniqueId: string = `helper-text-${++nextUniqueId}`;
 
   _helperLineElement?: HTMLElement;
 
@@ -37,8 +40,8 @@ export class MdcSelectHelperTextFoundation extends MDCComponent<MDCSelectHelperT
   }
 
   /** Sets the persistency of the helper text. */
-  setPersistent(isPersistent: boolean) {
-    this._foundation.setPersistent(isPersistent);
+  setValidationMsgPersistent(isPersistent: boolean) {
+    this._foundation.setValidationMsgPersistent(isPersistent);
   }
 
   /** True to make the helper text act as an error validation message. */
@@ -84,6 +87,7 @@ export class MdcSelectHelperTextFoundation extends MDCComponent<MDCSelectHelperT
   private _createHelperElement() {
     this._helperLineElement = this._document.createElement('p');
     this._helperLineElement.className = 'mdc-select-helper-text';
+    this._helperLineElement.id = this._uniqueId;
     this._appendHelperElement();
   }
 

packages/select/select.html

@@ -1,23 +1,39 @@
 <div #selectAnchor class="mdc-select__anchor"
-  role="button"
+  role="combobox"
+  aria-autocomplete="none"
   aria-haspopup="listbox"
   [tabindex]="disabled ? '-1' : '0'"
   [attr.aria-required]="required"
   [attr.aria-labelledby]="placeholder"
+  [attr.aria-describedby]="describedby"
   (focus)="onFocus()"
   (blur)="onBlur()"
   (keydown)="onKeydown($event)"
   (click)="onClick($event)">
   <span class="mdc-select__ripple" *ngIf="!outlined"></span>
   <ng-content select="mdc-icon"></ng-content>
-  <input #selectSelectedText class="mdc-select__selected-text"
-    type="text"
-    disabled
-    readonly
-    [value]="_selectedText" />
-    <i class="mdc-select__dropdown-icon"></i>
-    <label mdcFloatingLabel *ngIf="!outlined" [for]="id">{{placeholder}}</label>
-    <mdc-line-ripple *ngIf="!outlined"></mdc-line-ripple>
-    <mdc-notched-outline *ngIf="outlined" [label]="placeholder" [for]="id"></mdc-notched-outline>
+  <span #selectSelectedText class="mdc-select__selected-text">{{_selectedText}}</span>
+  <span class="mdc-select__dropdown-icon">
+    <svg
+        width="10px"
+        height="5px"
+        viewBox="7 10 10 5">
+      <polygon
+          class="mdc-select__dropdown-icon-inactive"
+          stroke="none"
+          fill-rule="evenodd"
+          points="7 10 12 15 17 10">
+      </polygon>
+      <polygon
+          class="mdc-select__dropdown-icon-active"
+          stroke="none"
+          fill-rule="evenodd"
+          points="7 15 12 10 17 15">
+      </polygon>
+    </svg>
+  </span>
+  <label mdcFloatingLabel *ngIf="!outlined" [for]="id">{{placeholder}}</label>
+  <mdc-line-ripple *ngIf="!outlined"></mdc-line-ripple>
+  <mdc-notched-outline *ngIf="outlined" [label]="placeholder" [for]="id"></mdc-notched-outline>
 </div>
-<ng-content select="mdc-menu"></ng-content>
+<ng-content select="mdc-menu"></ng-content>

packages/select/select.ts

@@ -129,6 +129,7 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
   @Input() name?: string;
   @Input() helper?: string;
   @Input() validationMessage?: string;
+  describedby?: string;
 
   /** Placeholder to be shown if no value has been selected. */
   @Input() placeholder?: string;
@@ -197,18 +198,6 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
   }
   private _value: any;
 
-  @Input()
-  get helperPersistent(): boolean {
-    return this._helperPersistent;
-  }
-  set helperPersistent(value: boolean) {
-    const newValue = coerceBooleanProperty(value);
-    if (newValue !== this._helperPersistent) {
-      this._helperPersistent = newValue;
-    }
-  }
-  private _helperPersistent = false;
-
   get _hasPlaceholder(): boolean {
     return this.placeholder ? this.placeholder.length > 0 : false;
   }
@@ -232,7 +221,7 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
   @ViewChild(MdcLineRipple, {static: false}) _lineRipple?: MdcLineRipple;
   @ViewChild(MdcNotchedOutline, {static: false}) _notchedOutline?: MdcNotchedOutline;
   @ViewChild('selectAnchor', {static: false}) _selectAnchor!: ElementRef<HTMLDivElement>;
-  @ViewChild('selectSelectedText', {static: true}) _selectSelectedText!: ElementRef<HTMLInputElement>;
+  @ViewChild('selectSelectedText', {static: true}) _selectSelectedText!: ElementRef<HTMLSpanElement>;
   @ContentChild(MdcMenu, {static: false}) _menu!: MdcMenu;
   @ContentChild(MdcSelectIcon, {static: false}) leadingIcon?: MdcSelectIcon;
 
@@ -582,7 +571,7 @@ export class MdcSelect extends _MdcSelectMixinBase implements AfterViewInit, DoC
     }
 
     this._foundationHelper!.setContent(this.helper ?? '');
-    this._foundationHelper!.setPersistent(this._helperPersistent);
+    this.describedby = this._shouldRenderHelperText ? this._foundationHelper?._uniqueId : undefined;
   }
 
   private _syncHelperValidityState(): void {