Skip to content

Commit 1c14bfb

Browse files
committed
fix(aria/combobox): Adjust AutoComplete examples to properly announce no results text (#32786)
(cherry picked from commit fcdfed8)
1 parent f69bb64 commit 1c14bfb

File tree

4 files changed

+10
-4
lines changed

4 files changed

+10
-4
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
</button>
1717
</div>
1818

19-
<div class="cdk-visually-hidden"[cdkAriaLive]="'polite'">
20-
{{countries().length === 0 ? 'No results found' : ''}}
19+
<div aria-live="polite" class="cdk-visually-hidden">
20+
{{countries().length === 0 ? 'No results found for ' + query() : ''}}
2121
</div>
2222

2323
<ng-template ngComboboxPopupContainer>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
viewChildren,
2323
} from '@angular/core';
2424
import {COUNTRIES} from '../countries';
25-
import {CdkAriaLive} from '@angular/cdk/a11y';
2625
import {OverlayModule} from '@angular/cdk/overlay';
2726
import {FormsModule} from '@angular/forms';
2827

@@ -32,7 +31,6 @@ import {FormsModule} from '@angular/forms';
3231
templateUrl: 'autocomplete-auto-select-example.html',
3332
styleUrl: '../autocomplete.css',
3433
imports: [
35-
CdkAriaLive,
3634
Combobox,
3735
ComboboxInput,
3836
ComboboxPopup,

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
</button>
1717
</div>
1818

19+
<div aria-live="polite" class="cdk-visually-hidden">
20+
{{countries().length === 0 ? 'No results found for ' + query() : ''}}
21+
</div>
22+
1923
<ng-template ngComboboxPopupContainer>
2024
<ng-template
2125
[cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
</button>
1717
</div>
1818

19+
<div aria-live="polite" class="cdk-visually-hidden">
20+
{{countries().length === 0 ? 'No results found for ' + query() : ''}}
21+
</div>
22+
1923
<ng-template ngComboboxPopupContainer>
2024
<ng-template
2125
[cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"

0 commit comments

Comments
 (0)