feat(tooltip): Interactive rich tooltip content becomes scrollable if…

… it extends beyond the max-height limit.

PiperOrigin-RevId: 574951152

packages/mdc-tooltip/_rich-tooltip-theme.scss

@@ -57,6 +57,8 @@ $light-theme: (
   container-shadow-color: null,
   container-shape: null,
   container-surface-tint-layer-color: null,
+  content-overflow-y: null,
+  content-overflow-x: null,
   subhead-color: null,
   subhead-font: null,
   subhead-line-height: null,
@@ -133,6 +135,10 @@ $light-theme: (
   }
 
   @include _container-elevation(map.get($resolvers, 'elevation'), $theme);
+  @include tooltip-theme.content-scroll(
+    map.get($theme, 'content-overflow-x'),
+    map.get($theme, 'content-overflow-y')
+  );
 
   .mdc-tooltip__surface .mdc-tooltip__title {
     @include typography.theme-styles(

packages/mdc-tooltip/_tooltip-theme.scss

@@ -44,6 +44,8 @@ $rich-background-color: theme-color.prop-value(surface);
 $rich-title-text-color: text-primary-on-light;
 $rich-content-text-color: rgba(black, theme-color.text-emphasis(medium));
 $rich-content-link-color: primary;
+$rich-content-overflow-x: unset;
+$rich-content-overflow-y: auto;
 
 // Use a custom property so IE11 does not use "normal" and instead uses provided
 // fall-back value.
@@ -256,3 +258,23 @@ $z-index: 9;
     overflow: hidden;
   }
 }
+
+// Sets the overflow behavior on interactive rich tooltip content. Note that
+// this is only applied to INTERACTIVE rich tooltips, as the content of non-
+// interactive rich tooltip is not focusable. This means keyboard users cannot
+// scroll the tooltip content and is an a11y violation. Non-interactive rich
+// tooltips should, therefore, utilize the `max-height` mixin above to increase
+// the tooltip height.
+@mixin content-scroll(
+  $content-overflow-x,
+  $content-overflow-y,
+  $query: feature-targeting.all()
+) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+  @include feature-targeting.targets($feat-structure) {
+    .mdc-tooltip__interactive-content {
+      @include theme.property(overflow-x, $content-overflow-x);
+      @include theme.property(overflow-y, $content-overflow-y);
+    }
+  }
+}

packages/mdc-tooltip/_tooltip.scss

@@ -264,6 +264,12 @@ $_caret-size: 24px;
     $query: $query
   );
 
+  @include tooltip-theme.content-scroll(
+    tooltip-theme.$rich-content-overflow-x,
+    tooltip-theme.$rich-content-overflow-y,
+    $query: $query
+  );
+
   .mdc-tooltip {
     @include tooltip-theme.rich-fill-color(
       tooltip-theme.$rich-background-color,