feat(list): Add support for aria active descendant, id

PiperOrigin-RevId: 468163114
material-components · Aug 17, 2022 · d9b1deb · d9b1deb
1 parent 2c06c2e
commit d9b1deb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/list/lib/list.ts b/list/lib/list.ts
@@ -28,6 +28,11 @@ export class List extends LitElement {
   @property({type: String, attribute: 'data-aria-label', noAccessor: true})
   override ariaLabel!: string;
 
+  @ariaProperty  // tslint:disable-line:no-new-decorators
+  @property(
+      {type: String, attribute: 'data-aria-activedescendant', noAccessor: true})
+  ariaActivedescendant!: string;
+
   @ariaProperty  // tslint:disable-line:no-new-decorators
   @property({type: String, attribute: 'data-role', noAccessor: true})
   role: ARIARole = 'list';
@@ -69,11 +74,11 @@ export class List extends LitElement {
     if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1) return;
 
     for (const item of this.items) {
-      if (item.isActive()) {
+      if (this.isListItemActive(item)) {
         this.activeListItem = item;
       }
 
-      item.deactivate();
+      this.deactivateListItem(item);
     }
 
     if (event.key === NAVIGATABLE_KEYS.ArrowDown) {
@@ -104,7 +109,21 @@ export class List extends LitElement {
       this.activeListItem = this.getLastItem();
     }
 
-    this.activeListItem?.activate();
+    if (this.activeListItem) {
+      this.activateListItem(this.activeListItem);
+    }
+  }
+
+  protected activateListItem(item: ListItem) {
+    item.activate();
+  }
+
+  protected deactivateListItem(item: ListItem) {
+    item.deactivate();
+  }
+
+  protected isListItemActive(item: ListItem): boolean {
+    return item.isActive();
   }
 
   protected handleAction(event: CustomEvent) {}

diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts
@@ -31,6 +31,8 @@ export class ListItem extends ActionElement {
   @property({type: String, attribute: 'data-aria-checked', noAccessor: true})
   override ariaChecked!: 'true'|'false';
 
+  @property({type: String}) itemId!: string;
+
   @property({type: String}) supportingText = '';
   @property({type: String}) multiLineSupportingText = '';
   @property({type: String}) trailingSupportingText = '';
@@ -39,7 +41,7 @@ export class ListItem extends ActionElement {
   @property({type: String}) headline = '';
   @query('md-ripple') ripple!: MdRipple;
   @query('[data-query-md3-list-item]') listItemRoot!: HTMLElement;
-  @state() protected showFocusRing = false;
+  @property({type: Boolean}) showFocusRing = false;
 
   /** @soyTemplate */
   override render(): TemplateResult {
@@ -49,6 +51,7 @@ export class ListItem extends ActionElement {
           role=${this.role}
           aria-selected=${ifDefined(this.ariaSelected || undefined)}
           aria-checked=${ifDefined(this.ariaChecked || undefined)}
+          id=${ifDefined(this.itemId || undefined)}
           data-query-md3-list-item
           class="md3-list-item ${classMap(this.getRenderClasses())}"
           @pointerdown=${this.handlePointerDown}
@@ -204,7 +207,8 @@ export class ListItem extends ActionElement {
     if (e.key !== ' ' && e.key !== 'Enter') return;
 
     e.preventDefault();
-    // TODO(b/240124486): Replace with beginPress provided by action element.
+    // TODO(b/240124486): Replace with beginPress provided by action
+    // element.
     this.ripple.beginPress(e);
   }