feat(list): Add listId property

PiperOrigin-RevId: 472847375
material-components · Sep 7, 2022 · 78f125d · 78f125d
1 parent d2ea3ce
commit 78f125d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/autocomplete/lib/autocomplete.ts b/autocomplete/lib/autocomplete.ts
@@ -40,6 +40,10 @@ export abstract class Autocomplete extends LitElement {
   @property({type: String, reflect: true, converter: stringConverter})
   placeholder = '';
 
+  /**
+   * The ID on the list element, used for SSR.
+   */
+  @property({type: String}) listId = 'autocomplete-list';
   /**
    * The ID prefix for the item elements, used for SSR.
    */
@@ -89,6 +93,7 @@ export abstract class Autocomplete extends LitElement {
       role="combobox"
       aria-autocomplete="list"
       aria-activedescendant=${activeDescendant}
+      aria-controls=${this.listId}
       ?disabled=${this.disabled}
       ?error=${this.error}
       errorText=${this.errorText}
@@ -114,6 +119,7 @@ export abstract class Autocomplete extends LitElement {
     >
       <${this.listTag}
         class="md3-autocomplete__list"
+        listId=${this.listId}
         role="listbox">
         <slot></slot>
       </${this.listTag}>

diff --git a/list/lib/list.ts b/list/lib/list.ts
@@ -37,6 +37,8 @@ export class List extends LitElement {
   @property({type: String, attribute: 'data-role', noAccessor: true})
   role: ARIARole = 'list';
 
+  @property({type: String}) listId = '';
+
   @property({type: Number}) listTabIndex: number = 0;
 
   items: ListItem[] = [];
@@ -60,6 +62,7 @@ export class List extends LitElement {
     return html`
       <ul class="md3-list"
           aria-label="${ifDefined(this.ariaLabel)}"
+          id=${ifDefined(this.listId || undefined)}
           tabindex=${this.listTabIndex}
           role=${this.role}
           @action=${this.handleAction}