fix(material-experimental/mdc-chips): don't allow focus on checkmark icon (#18588)

On some browsers SVG elements default to being focusable, which means that currently users are able to tab into the checkmark icon of the MDC chip option. These changes make it so that the element isn't focusable.

(cherry picked from commit 1c2300f)

Author: crisbeto

src/material-experimental/mdc-chips/chip-option.html

@@ -8,7 +8,7 @@
 
 <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
 <div class="mdc-chip__checkmark" *ngIf="_chipListMultiple">
-  <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
+  <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30" focusable="false">
     <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
           d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
   </svg>

src/material-experimental/mdc-chips/chip-option.spec.ts

@@ -231,6 +231,16 @@ describe('MDC-based Option Chips', () => {
           expect(chipNativeElement.getAttribute('aria-selected')).toBe('true');
         }));
 
+        it('should disable focus on the checkmark', fakeAsync(() => {
+          // The checkmark is only shown in multi selection mode.
+          testComponent.chipList.multiple = true;
+          flush();
+          fixture.detectChanges();
+
+          const checkmark = chipNativeElement.querySelector('.mdc-chip__checkmark-svg')!;
+          expect(checkmark.getAttribute('focusable')).toBe('false');
+        }));
+
       });
 
       describe('when selectable is false', () => {