fix(aria/combobox): Adjust AutoComplete examples to properly announce no results text (#32786)

Author: adolgachev

src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html

@@ -16,8 +16,8 @@
     </button>
   </div>
 
-  <div class="cdk-visually-hidden"[cdkAriaLive]="'polite'">
-    {{countries().length === 0 ? 'No results found' : ''}}
+  <div aria-live="polite" class="cdk-visually-hidden">
+    {{countries().length === 0 ? 'No results found for ' + query() : ''}}
   </div>
 
   <ng-template ngComboboxPopupContainer>

src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.ts

@@ -22,7 +22,6 @@ import {
   viewChildren,
 } from '@angular/core';
 import {COUNTRIES} from '../countries';
-import {CdkAriaLive} from '@angular/cdk/a11y';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {FormsModule} from '@angular/forms';
 
@@ -32,7 +31,6 @@ import {FormsModule} from '@angular/forms';
   templateUrl: 'autocomplete-auto-select-example.html',
   styleUrl: '../autocomplete.css',
   imports: [
-    CdkAriaLive,
     Combobox,
     ComboboxInput,
     ComboboxPopup,

src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html

@@ -16,6 +16,10 @@
     </button>
   </div>
 
+  <div aria-live="polite" class="cdk-visually-hidden">
+    {{countries().length === 0 ? 'No results found for ' + query() : ''}}
+  </div>
+ 
   <ng-template ngComboboxPopupContainer>
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"

src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.html

@@ -16,6 +16,10 @@
     </button>
   </div>
 
+  <div aria-live="polite" class="cdk-visually-hidden">
+    {{countries().length === 0 ? 'No results found for ' + query() : ''}}
+  </div>
+
   <ng-template ngComboboxPopupContainer>
     <ng-template
       [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"