fix(cdk/listbox): scroll active option into view when using aria-acti…

…vedescendant (#29722)

When the CDK listbox has `useActiveDescendant` enabled, it won't focus the individual options so they won't be scrolled into the view automatically. This change adds a manual call to scroll them in instead.

Fixes #28989.

(cherry picked from commit fd40858)

src/cdk/listbox/listbox.ts

@@ -194,7 +194,13 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
  * No-op implemented as a part of `Highlightable`.
  * @docs-private
  */
- setActiveStyles() {}
+ setActiveStyles() {
+ // If the listbox is using `aria-activedescendant` the option won't have focus so the
+ // browser won't scroll them into view automatically so we need to do it ourselves.
+ if (this.listbox.useActiveDescendant) {
+ this.element.scrollIntoView({block: 'nearest', inline: 'nearest'});
+ }
+ }
 
  /**
  * No-op implemented as a part of `Highlightable`.