fix(select): add duration to live announcer message (#15655)

Sets a duration so that the live announcement message from `mat-select` is cleared after a while. Currently after the message is removed, the user can navigate to it using the arrow keys and moving focus all the way to the end of the page.

Author: crisbeto

src/material/select/select.spec.ts

@@ -378,7 +378,7 @@ describe('MatSelect', () => {
 
           dispatchKeyboardEvent(select, 'keydown', RIGHT_ARROW);
 
-          expect(liveAnnouncer.announce).toHaveBeenCalledWith('Steak');
+          expect(liveAnnouncer.announce).toHaveBeenCalledWith('Steak', jasmine.any(Number));
 
           flush();
         })));

src/material/select/select.ts

@@ -734,7 +734,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       // Since the value has changed, we need to announce it ourselves.
       // @breaking-change 8.0.0 remove null check for _liveAnnouncer.
       if (this._liveAnnouncer && selectedOption && previouslySelectedOption !== selectedOption) {
-        this._liveAnnouncer.announce((selectedOption as MatOption).viewValue);
+        // We set a duration on the live announcement, because we want the live element to be
+        // cleared after a while so that users can't navigate to it using the arrow keys.
+        this._liveAnnouncer.announce((selectedOption as MatOption).viewValue, 10000);
       }
     }
   }