feat(tooltip): Make persistent rich tooltips persist when click target is within the rich tooltip.

PiperOrigin-RevId: 349318491

Author: Shi Shu

packages/mdc-tooltip/foundation.ts

@@ -215,14 +215,19 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
   }
 
   handleDocumentClick(evt: MouseEvent) {
-    const anchorContainsTargetElement = evt.target instanceof HTMLElement &&
-        this.adapter.anchorContainsElement(evt.target);
-    // For persistent rich tooltips, we will only hide if the click target is
-    // not within the anchor element, otherwise both the anchor element's click
-    // handler and this handler will handle the click (due to event
-    // propagation), resulting in a shown tooltip being immediately hidden if
-    // the tooltip was initially hidden.
-    if (this.isRich && this.isPersistent && anchorContainsTargetElement) {
+    const anchorOrTooltipContainsTargetElement =
+        evt.target instanceof HTMLElement &&
+        (this.adapter.anchorContainsElement(evt.target) ||
+         this.adapter.tooltipContainsElement(evt.target));
+    // For persistent rich tooltips, we will not hide if:
+    // - The click target is within the anchor element. Otherwise, both
+    //   the anchor element's click handler and this handler will handle the
+    //   click (due to event propagation), resulting in a shown tooltip
+    //   being immediately hidden if the tooltip was initially hidden.
+    // - The click target is within the tooltip element, since clicks
+    //   on the tooltip do not close the tooltip.
+    if (this.isRich && this.isPersistent &&
+        anchorOrTooltipContainsTargetElement) {
       return;
     }
     // Hide the tooltip immediately on click.

packages/mdc-tooltip/test/component.test.ts

@@ -583,7 +583,7 @@ describe('MDCTooltip', () => {
          expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');
        });
 
-    it('set aria-expanded to false on anchor when element other than anchor is clicked while tooltip is shown',
+    it('set aria-expanded to false on anchor when element other than anchor or the tooltip is clicked while tooltip is shown',
        () => {
          const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
          const anchorElem =
@@ -599,6 +599,22 @@ describe('MDCTooltip', () => {
          expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');
        });
 
+    it('aria-expanded remains true on anchor when tooltip is clicked while tooltip is shown',
+       () => {
+         const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
+         const anchorElem =
+             fixture.querySelector<HTMLElement>('[aria-describedby]')!;
+         MDCTooltip.attachTo(tooltipElem);
+
+         emitEvent(anchorElem, 'click');
+         expect(tooltipElem.getAttribute('aria-hidden')).toEqual('false');
+         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
+         emitEvent(tooltipElem, 'click');
+
+         expect(tooltipElem.getAttribute('aria-hidden')).toEqual('false');
+         expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
+       });
+
     it('aria-expanded remains true on anchor when mouseleave anchor while tooltip is shown',
        () => {
          const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;

packages/mdc-tooltip/test/foundation.test.ts

@@ -589,11 +589,12 @@ describe('MDCTooltipFoundation', () => {
        expectTooltipToHaveBeenHidden(foundation, mockAdapter);
      });
 
-  it('#handleDocumentClick hides the tooltip immediately for persistent rich tooltips if event target is not within anchorElement',
+  it('#handleDocumentClick hides the tooltip immediately for persistent rich tooltips if event target is not within anchorElement or tooltipElement',
      () => {
        const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(
            MDCTooltipFoundation, {isPersistent: true});
        mockAdapter.anchorContainsElement.and.returnValue(false);
+       mockAdapter.tooltipContainsElement.and.returnValue(false);
        const mockClickEvent = {
          ...createMouseEvent('click'),
          target: document.createElement('div')
@@ -610,6 +611,24 @@ describe('MDCTooltipFoundation', () => {
        const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(
            MDCTooltipFoundation, {isPersistent: true});
        mockAdapter.anchorContainsElement.and.returnValue(true);
+       mockAdapter.tooltipContainsElement.and.returnValue(false);
+       const mockClickEvent = {
+         ...createMouseEvent('click'),
+         target: document.createElement('div')
+       };
+
+       foundation.show();
+       foundation.handleDocumentClick(mockClickEvent);
+
+       expectTooltipNotToHaveBeenHidden(foundation, mockAdapter);
+     });
+
+  it('#handleDocumentClick does not hide the tooltip for persistent rich tooltips if event target is within tooltipElement',
+     () => {
+       const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(
+           MDCTooltipFoundation, {isPersistent: true});
+       mockAdapter.anchorContainsElement.and.returnValue(false);
+       mockAdapter.tooltipContainsElement.and.returnValue(true);
        const mockClickEvent = {
          ...createMouseEvent('click'),
          target: document.createElement('div')