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.

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', () => {