fix(material/list): set initial focus on first selected option in selection list (#23092)

Currently when a selection list receives focus, it forwards it either to the option that the user interacted with last or the first option in the list. This goes against the a11y best practices and is weird when there the user lands on the list for the first time and it has preselected options.

These changes switch to focusing the first selected option and falling back to the first option. This is consistent with the MDC implementation as well.

Fixes #22675.

Author: crisbeto

scripts/check-mdc-tests-config.ts

@@ -82,10 +82,6 @@ export const config = {
       'should work in a step'
     ],
     'mdc-list': [
-      // MDC does focus previously focused options, but rather always selects the first selected
-      // option. We have different test in the MDC-based list that captures this behavior.
-      'should focus the previously focused option when the list takes focus a second time',
-
       // TODO: these tests need to be double-checked for missing functionality.
       'should not apply any additional class to a list without lines',
       'should not add the mat-list-single-selected-option class (in multiple mode)',

src/material/list/selection-list.spec.ts

@@ -326,22 +326,23 @@ describe('MatSelectionList without forms', () => {
         expect(listOptions[0].componentInstance.focus).not.toHaveBeenCalled();
       })));
 
-    it('should focus the previously focused option when the list takes focus a second time', () => {
-      spyOn(listOptions[1].componentInstance, 'focus').and.callThrough();
+    it('should focus the first selected option when list receives focus', () => {
+      spyOn(listOptions[2].componentInstance, 'focus').and.callThrough();
 
       const manager = selectionList.componentInstance._keyManager;
       expect(manager.activeItemIndex).toBe(-1);
 
-      // Focus and blur the option to move the active item index. This option is now the previously
-      // focused option.
-      listOptions[1].componentInstance._handleFocus();
-      listOptions[1].componentInstance._handleBlur();
+      dispatchMouseEvent(listOptions[2].nativeElement, 'click');
+      fixture.detectChanges();
+
+      dispatchMouseEvent(listOptions[3].nativeElement, 'click');
+      fixture.detectChanges();
 
       dispatchFakeEvent(selectionList.nativeElement, 'focus');
       fixture.detectChanges();
 
-      expect(manager.activeItemIndex).toBe(1);
-      expect(listOptions[1].componentInstance.focus).toHaveBeenCalled();
+      expect(manager.activeItemIndex).toBe(2);
+      expect(listOptions[2].componentInstance.focus).toHaveBeenCalled();
     });
 
     it('should allow focus to escape when tabbing away', fakeAsync(() => {

src/material/list/selection-list.ts

@@ -478,15 +478,14 @@ export class MatSelectionList extends _MatSelectionListBase implements CanDisabl
       .pipe(takeUntil(this._destroyed))
       .subscribe(origin => {
         if (origin === 'keyboard' || origin === 'program') {
-          const activeIndex = this._keyManager.activeItemIndex;
-
-          if (!activeIndex || activeIndex === -1) {
-            // If there is no active index, set focus to the first option.
-            this._keyManager.setFirstItemActive();
-          } else {
-            // Otherwise, set focus to the active option.
-            this._keyManager.setActiveItem(activeIndex);
+          let toFocus = 0;
+          for (let i = 0; i < this.options.length; i++) {
+            if (this.options.get(i)?.selected) {
+              toFocus = i;
+              break;
+            }
           }
+          this._keyManager.setActiveItem(toFocus);
         }
       });
   }