fix(aria/combobox): Adjust AutoComplete examples to announce no results text#32786
fix(aria/combobox): Adjust AutoComplete examples to announce no results text#32786adolgachev merged 1 commit intoangular:mainfrom
Conversation
|
Deployed dev-app for 3d7e876 to: https://ng-dev-previews-comp--pr-angular-components-32786-dev-i9va9327.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
|
|
||
| <div class="cdk-visually-hidden"[cdkAriaLive]="'polite'"> | ||
| {{countries().length === 0 ? 'No results found' : ''}} | ||
| <div aria-live="polite" class="cdk-visually-hidden" role="status" > |
There was a problem hiding this comment.
role="status" implicitly sets aria-live="polite", so don't need both.
Also curious about why cdkAriaLive didn't work.
There was a problem hiding this comment.
Oh yeah, good catch. That was left-over when I was trying everything to make it work.
I think cdkAriaLive would work with the changes to include the query text as that is the issue with why it doesn't re-announce even when text switches to blank and then back to the text. But it didn't help without so I just took it out as didn't add any value and this is simpler.
89b95cc to
3d7e876
Compare
…nside the button Add a new API, testing API, and docs for allowing progress indicators to be projected into a button and have them shown in an accessible manner Fixes angular#13667 undo Use more specific selector refactor(cdk/overlay): add way to only handle specific events in overlay We dispatch keyboard events to the different overlays depending on their attachment order and if they're listening for keyboard events. This works fine for the most part, but can lead to unexpected behavior where an overlay only cares about one type of event which ends up blocking the event from reaching other overlays. These changes add an `eventPredicate` option that overlay can use to allow some events to pass through. fix(material/tooltip): do not block events to other overlays Fixes that the tooltip was blocking keyboard events to other overlays, even if it doesn't care about them. Fixes angular#32760. fix(multiple): change aria keyboard manager to only handle repeated events in correct places (angular#32728) perf(aria/grid): performance when selecting in a large grid (angular#32766) Fixes that the grid cell's host bindings were slowing down the page significantly during selection when placed in a large grid. The issue seems to come from the fact that there's a non-zero cost to the signal reads in the directive's host bindings which can add up. These changes address the issue by batching the reads together in an effect. Fixes angular#32759. fix(material/radio): hide empty labels (angular#32754) We have similar logic in the checkbox and slide toggle so these changes apply it to the radio button: hiding the label when it's empty so it doesn't affect the layout. build: bump stackblitz template to 21.1 (angular#32752) Updates the template for Stackblitz examples to the latest version of Angular. docs: release notes for the v21.1.4 release release: cut the v21.2.0-next.4 release fix(aria/combobox): fix autocomplete examples and add comments explaining combobox selection behavior (angular#32714) fix(material/select): disable position locking (angular#32772) In angular#9789 we enabled locked positioning for `mat-select` due to the previous of laying out the panel. Then in angular#30628 we enabled flexible dimensions so it's able to shrink. This combination can cause the panel to shrink when the user scrolls it out of view. These changes remove the locked positioning since it's not necessary anymore. Fixes angular#32771. build: update cross-repo angular dependencies (angular#32684) See associated pull request for more information. fix(google-maps): fix mismatch in clusterer types (angular#32778) Fixes that the clusterer types seem to no longer match with the ones on npm, causing a type error. Fixes angular#32696. refactor(material/select): remove dependency on NgClass (angular#32776) Drops the dependency on `NgClass` from the select component since we can achieve the same with class bindings. fix(cdk/tree): no nodes focusable if data is replaced (angular#32781) Fixes that none of the tree nodes were focusable if the data is swapped out after initialization. Fixes angular#32779. build: update bazel dependencies (angular#32689) See associated pull request for more information. build: update all github actions (angular#32722) See associated pull request for more information. build: lock file maintenance (angular#32737) See associated pull request for more information. build: update pnpm to v10.29.3 (angular#32755) See associated pull request for more information. build: update cross-repo angular dependencies (angular#32784) See associated pull request for more information. docs: release notes for the v21.1.5 release release: cut the v21.2.0-next.5 release release: bump the next branch to v21.3.0-next.0 docs: release notes for the v21.2.0-rc.0 release build: update cross-repo angular dependencies (angular#32794) See associated pull request for more information. fix(aria/combobox): Adjust AutoComplete examples to properly announce no results text (angular#32786) build: update pnpm to v10.30.0 (angular#32803) See associated pull request for more information. build: update cross-repo angular dependencies (angular#32801) See associated pull request for more information. build: update dependencies and resolve breaking change (angular#32799) Takes over the dependency bump from angular#32690 and resolves a breaking change. fix(material/core): expose strong focus indicator structural styles (angular#32808) Exposes the structural styles for strong focus indicators so users can use them in their own components. Fixes angular#32773. build: set up schematics for v22 (angular#32806) One of the pre-requisites to release the next version of v22 is to have schematics set up. These changes add them ahead of time so we don't run into any issues when we go to release. fix(material/datepicker): drop dependency on NgClass (angular#32810) Drops the dependency on `NgClass` from the datepicker in favor of a direct `class` binding.
Text has to be updated to be announced again so included the query string. Also removed cdkAriaLive usage as wasn't helping.
This is just update to example code, but shows a simple way to announce "no results".