feat(chips): add label slot

chips/demo/stories.ts

@@ -50,28 +50,22 @@ const assist: MaterialStoryInit<StoryKnobs> = {
     const classes = {'scrolling': scrolling};
     return html`
       <md-chip-set class=${classMap(classes)} aria-label="Assist chips">
-        <md-assist-chip
-          label=${label || 'Assist chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}></md-assist-chip>
-        <md-assist-chip
-          label=${label || 'Assist chip with icon'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}>
+        <md-assist-chip ?disabled=${disabled} ?elevated=${elevated}>
+          ${label || 'Assist chip'}
+        </md-assist-chip>
+        <md-assist-chip ?disabled=${disabled} ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
+          ${label || 'Assist chip with icon'}
         </md-assist-chip>
         <md-assist-chip
-          label=${label || 'Assist link chip'}
           ?elevated=${elevated}
           href="https://google.com"
-          target="_blank"
-          >${GOOGLE_LOGO}</md-assist-chip
-        >
-        <md-assist-chip
-          label=${label || 'Soft-disabled assist chip (focusable)'}
-          soft-disabled
-          always-focusable
-          ?elevated=${elevated}></md-assist-chip>
+          target="_blank">
+          ${GOOGLE_LOGO} ${label || 'Assist link chip'}
+        </md-assist-chip>
+        <md-assist-chip soft-disabled always-focusable ?elevated=${elevated}>
+          ${label || 'Soft-disabled assist chip (focusable)'}
+        </md-assist-chip>
       </md-chip-set>
     `;
   },
@@ -84,26 +78,23 @@ const filters: MaterialStoryInit<StoryKnobs> = {
     const classes = {'scrolling': scrolling};
     return html`
       <md-chip-set class=${classMap(classes)} aria-label="Filter chips">
-        <md-filter-chip
-          label=${label || 'Filter chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}></md-filter-chip>
-        <md-filter-chip
-          label=${label || 'Filter chip with icon'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}>
+        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated}>
+          ${label || 'Filter chip'}
+        </md-filter-chip>
+        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
+          ${label || 'Filter chip with icon'}
+        </md-filter-chip>
+        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated} removable>
+          ${label || 'Removable filter chip'}
         </md-filter-chip>
         <md-filter-chip
-          label=${label || 'Removable filter chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}
-          removable></md-filter-chip>
-        <md-filter-chip
-          label=${label || 'Soft-disabled filter chip (focusable)'}
           soft-disabled
+          always-focusable
           ?elevated=${elevated}
-          removable></md-filter-chip>
+          removable>
+          ${label || 'Soft-disabled filter chip (focusable)'}
+        </md-filter-chip>
       </md-chip-set>
     `;
   },
@@ -116,35 +107,28 @@ const inputs: MaterialStoryInit<StoryKnobs> = {
     const classes = {'scrolling': scrolling};
     return html`
       <md-chip-set class=${classMap(classes)} aria-label="Input chips">
-        <md-input-chip
-          label=${label || 'Input chip'}
-          ?disabled=${disabled}></md-input-chip>
-        <md-input-chip
-          label=${label || 'Input chip with icon'}
-          ?disabled=${disabled}>
+        <md-input-chip ?disabled=${disabled}>
+          ${label || 'Input chip'}
+        </md-input-chip>
+        <md-input-chip ?disabled=${disabled}>
           <md-icon slot="icon">local_laundry_service</md-icon>
+          ${label || 'Input chip with icon'}
         </md-input-chip>
-        <md-input-chip
-          label=${label || 'Input chip with avatar'}
-          ?disabled=${disabled}
-          avatar>
+        <md-input-chip ?disabled=${disabled} avatar>
           <img
             slot="icon"
             src="https://lh3.googleusercontent.com/a/default-user=s48" />
+          ${label || 'Input chip with avatar'}
         </md-input-chip>
-        <md-input-chip
-          label=${label || 'Input link chip'}
-          href="https://google.com"
-          target="_blank"
-          >${GOOGLE_LOGO}</md-input-chip
+        <md-input-chip href="https://google.com" target="_blank"
+          >${GOOGLE_LOGO} ${label || 'Input link chip'}</md-input-chip
         >
-        <md-input-chip
-          label=${label || 'Remove-only input chip'}
-          ?disabled=${disabled}
-          remove-only></md-input-chip>
-        <md-input-chip
-          label=${label || 'Soft-disabled input chip (focusable)'}
-          soft-disabled></md-input-chip>
+        <md-input-chip ?disabled=${disabled} remove-only>
+          ${label || 'Remove-only input chip'}
+        </md-input-chip>
+        <md-input-chip soft-disabled always-focusable>
+          ${label || 'Soft-disabled input chip (focusable)'}
+        </md-input-chip>
       </md-chip-set>
     `;
   },
@@ -157,27 +141,25 @@ const suggestions: MaterialStoryInit<StoryKnobs> = {
     const classes = {'scrolling': scrolling};
     return html`
       <md-chip-set class=${classMap(classes)} aria-label="Suggestion chips">
-        <md-suggestion-chip
-          label=${label || 'Suggestion chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}></md-suggestion-chip>
-        <md-suggestion-chip
-          label=${label || 'Suggestion chip with icon'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}>
+        <md-suggestion-chip ?disabled=${disabled} ?elevated=${elevated}>
+          ${label || 'Suggestion chip'}
+        </md-suggestion-chip>
+        <md-suggestion-chip ?disabled=${disabled} ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
+          ${label || 'Suggestion chip with icon'}
         </md-suggestion-chip>
         <md-suggestion-chip
-          label=${label || 'Suggestion link chip'}
           ?elevated=${elevated}
           href="https://google.com"
           target="_blank"
-          >${GOOGLE_LOGO}</md-suggestion-chip
+          >${GOOGLE_LOGO} ${label || 'Suggestion link chip'}</md-suggestion-chip
         >
         <md-suggestion-chip
-          label=${label || 'Soft-disabled suggestion chip (focusable)'}
           soft-disabled
-          ?elevated=${elevated}></md-suggestion-chip>
+          always-focusable
+          ?elevated=${elevated}>
+          ${label || 'Soft-disabled suggestion chip (focusable)'}
+        </md-suggestion-chip>
       </md-chip-set>
     `;
   },

chips/internal/chip.ts

@@ -58,8 +58,11 @@ export abstract class Chip extends chipBaseClass {
   @property({type: Boolean, attribute: 'always-focusable'})
   alwaysFocusable = false;
 
+  // TODO(b/350810013): remove the label property.
   /**
    * The label of the chip.
+   *
+   * @deprecated Set text as content of the chip instead.
    */
   @property() label = '';
 
@@ -149,7 +152,9 @@ export abstract class Chip extends chipBaseClass {
         ${this.renderLeadingIcon()}
       </span>
       <span class="label">
-        <span class="label-text">${this.label}</span>
+        <span class="label-text" id="label">
+          ${this.label ? this.label : html`<slot></slot>`}
+        </span>
       </span>
       <span class="touch"></span>
     `;

chips/internal/multi-action-chip.ts

@@ -16,14 +16,21 @@ const ARIA_LABEL_REMOVE = 'aria-label-remove';
  * A chip component with multiple actions.
  */
 export abstract class MultiActionChip extends Chip {
-  get ariaLabelRemove(): string {
+  get ariaLabelRemove(): string | null {
     if (this.hasAttribute(ARIA_LABEL_REMOVE)) {
       return this.getAttribute(ARIA_LABEL_REMOVE)!;
     }
 
     const {ariaLabel} = this as ARIAMixinStrict;
-    return `Remove ${ariaLabel || this.label}`;
+
+    // TODO(b/350810013): remove `this.label` when label property is removed.
+    if (ariaLabel || this.label) {
+      return `Remove ${ariaLabel || this.label}`;
+    }
+
+    return null;
   }
+
   set ariaLabelRemove(ariaLabel: string | null) {
     const prev = this.ariaLabelRemove;
     if (ariaLabel === prev) {

chips/internal/multi-action-chip_test.ts

@@ -29,8 +29,8 @@ class TestMultiActionChip extends MultiActionChip {
 
   protected primaryId = 'primary';
 
-  protected override renderPrimaryAction() {
-    return html`<button id="primary"></button>`;
+  protected override renderPrimaryAction(content: unknown) {
+    return html`<button id="primary">${content}</button>`;
   }
 
   protected override renderTrailingAction(focusListener: EventListener) {
@@ -49,10 +49,18 @@ class TestMultiActionChip extends MultiActionChip {
 describe('Multi-action chips', () => {
   const env = new Environment();
 
-  async function setupTest() {
-    const chip = new TestMultiActionChip();
-    env.render(html`${chip}`);
+  async function setupTest(
+    template = html`<test-multi-action-chip></test-multi-action-chip>`,
+  ): Promise<TestMultiActionChip> {
+    const root = env.render(template);
     await env.waitForStability();
+    const chip = root.querySelector<TestMultiActionChip>(
+      'test-multi-action-chip',
+    );
+    if (!chip) {
+      throw new Error('Failed to query the rendered <test-multi-action-chip>');
+    }
+
     return chip;
   }
 
@@ -222,28 +230,132 @@ describe('Multi-action chips', () => {
     });
 
     it('should provide a default "ariaLabelRemove" value', async () => {
+      const label = 'Label';
+      const chip = await setupTest(
+        html`<test-multi-action-chip>${label}</test-multi-action-chip>`,
+      );
+
+      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(`Remove ${label}`);
+    });
+
+    it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided', async () => {
+      const label = 'Label';
+      const chip = await setupTest(
+        html`<test-multi-action-chip aria-label=${'Descriptive label'}>
+          ${label}
+        </test-multi-action-chip>`,
+      );
+
+      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(
+        `Remove ${chip.ariaLabel}`,
+      );
+    });
+
+    it('should allow setting a custom "ariaLabelRemove"', async () => {
+      const label = 'Label';
+      const customAriaLabelRemove = 'Remove custom label';
+      const chip = await setupTest(
+        html`<test-multi-action-chip
+          aria-label=${'Descriptive label'}
+          aria-label-remove=${customAriaLabelRemove}>
+          ${label}
+        </test-multi-action-chip>`,
+      );
+
+      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(
+        customAriaLabelRemove,
+      );
+    });
+
+    // TODO(b/350810013): remove test when label property is removed.
+    it('should provide a default "ariaLabelRemove" value (using the label property)', async () => {
       const chip = await setupTest();
       chip.label = 'Label';
+      await env.waitForStability();
 
-      expect(chip.ariaLabelRemove).toEqual(`Remove ${chip.label}`);
+      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(
+        `Remove ${chip.label}`,
+      );
     });
 
-    it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided', async () => {
+    // TODO(b/350810013): remove test when label property is removed.
+    it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided (using the label property)', async () => {
       const chip = await setupTest();
       chip.label = 'Label';
       chip.ariaLabel = 'Descriptive label';
+      await env.waitForStability();
 
-      expect(chip.ariaLabelRemove).toEqual(`Remove ${chip.ariaLabel}`);
+      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(
+        `Remove ${chip.ariaLabel}`,
+      );
     });
 
-    it('should allow setting a custom "ariaLabelRemove"', async () => {
+    // TODO(b/350810013): remove test when label property is removed.
+    it('should allow setting a custom "ariaLabelRemove" (using the label property)', async () => {
       const chip = await setupTest();
       chip.label = 'Label';
       chip.ariaLabel = 'Descriptive label';
       const customAriaLabelRemove = 'Remove custom label';
       chip.ariaLabelRemove = customAriaLabelRemove;
+      await env.waitForStability();
 
-      expect(chip.ariaLabelRemove).toEqual(customAriaLabelRemove);
+      expect(getA11yLabelForChipRemoveButton(chip)).toEqual(
+        customAriaLabelRemove,
+      );
     });
   });
 });
+
+/**
+ * Returns the text content of a slot.
+ */
+function getSlotTextContent(slot: HTMLSlotElement) {
+  // Remove any newlines, comments, and whitespace from the label slot.
+  let text = '';
+  for (const node of slot.assignedNodes() ?? []) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent?.trim() || '';
+    }
+  }
+  return text;
+}
+
+/**
+ * Returns the a11y label of the remove button. If the button has an aria-label,
+ * it will return that. If it has aria-labelledby, it will return the text
+ * content of the elements it is labelled by.
+ */
+function getA11yLabelForChipRemoveButton(chip: TestMultiActionChip): string {
+  const removeButton = chip.shadowRoot!.querySelector<HTMLButtonElement>(
+    'button.trailing.action',
+  )!;
+
+  if (removeButton.ariaLabel) {
+    return removeButton.ariaLabel;
+  }
+
+  // If the remove button is not aria-labelled, it should be aria-labelledby.
+  const removeButtonAriaLabelledBy =
+    removeButton.getAttribute('aria-labelledby')!;
+  const elementsLabelledBy: HTMLElement[] = [];
+  removeButtonAriaLabelledBy.split(' ').forEach((id) => {
+    const labelledByElement = chip.shadowRoot?.getElementById(id);
+    if (!labelledByElement) {
+      throw new Error(
+        `Cannot find element with ID "#{id}" in the chip's shadow root`,
+      );
+    }
+    elementsLabelledBy.push(labelledByElement);
+  });
+  const textFromAriaLabelledBy: string[] = [];
+  elementsLabelledBy.forEach((element) => {
+    const unnamedSlotChildElement =
+      element.querySelector<HTMLSlotElement>('slot:not([name])');
+    if (unnamedSlotChildElement) {
+      textFromAriaLabelledBy.push(getSlotTextContent(unnamedSlotChildElement));
+    } else {
+      textFromAriaLabelledBy.push(element.textContent ?? '');
+    }
+  });
+  return textFromAriaLabelledBy.join(' ');
+}