From d6fb3c2f35371298ce98d273c81eb91855b96ae1 Mon Sep 17 00:00:00 2001 From: Douglas Parker Date: Thu, 3 Nov 2022 00:42:36 -0700 Subject: [PATCH 1/5] refactor: replaces `aria-hidden` with `alt=""` (#25911) An `alt` attribute is required for an upcoming extended diagnostic, and from my understanding is desirable over `aria-hidden` since it maintains `role="img"` while also indicating that the image is decorative. (cherry picked from commit b260cb120785ef4356b10aac7a5eea7568fa7d14) --- .../autocomplete-overview/autocomplete-overview-example.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html index 7f3340905aac..8c8623c255c2 100644 --- a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html +++ b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html @@ -7,7 +7,7 @@ [formControl]="stateCtrl"> - + {{state.name}} | Population: {{state.population}} From a1473b93fcc1e737fea03063d092e6d535844f21 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 7 Nov 2022 13:21:21 +0100 Subject: [PATCH 2/5] fix(material/stepper): content not visibile on first navigation when nested in tabs (#25930) Fixes an issue where the content of a stepper that is nested inside of a `` becomes invisible after the first navigation. This appears to be some sort of a bug where the `visibility: inherit` that we have on the stepper doesn't get recalculated so it stays `hidden`. Fixes #25925. (cherry picked from commit 7e3a9df9d5604ab4fbe6d8817340aec88c67c572) --- src/material/stepper/stepper.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss index b920468390a4..41c756947198 100644 --- a/src/material/stepper/stepper.scss +++ b/src/material/stepper/stepper.scss @@ -133,6 +133,15 @@ height: 0; overflow: hidden; } + + // Used to avoid an issue where when the stepper is nested inside a component that + // changes the `visibility` as a part of an Angular animation, the stepper's content + // stays hidden (see #25925). The value has to be `!important` to override the incorrect + // `visibility` from the animations package. This can also be solved using `visibility: visible` + // on `.mat-horizontal-stepper-content`, but it can allow tabbing into hidden content. + &:not(.mat-horizontal-stepper-content-inactive) { + visibility: inherit !important; + } } .mat-horizontal-content-container { @@ -179,6 +188,15 @@ .mat-vertical-stepper-content { overflow: hidden; outline: 0; + + // Used to avoid an issue where when the stepper is nested inside a component that + // changes the `visibility` as a part of an Angular animation, the stepper's content + // stays hidden (see #25925). The value has to be `!important` to override the incorrect + // `visibility` from the animations package. This can also be solved using `visibility: visible` + // on `.mat-vertical-stepper-content`, but it can allow tabbing into hidden content. + &:not(.mat-vertical-stepper-content-inactive) { + visibility: inherit !important; + } } .mat-vertical-content { From 53588b51d2caa9ba13d72f3fa282f0aec7f9f338 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Mon, 7 Nov 2022 17:14:46 +0000 Subject: [PATCH 3/5] fix(material/stepper): add HCM disabled styles for stepper and tabs (#25393) (#25932) * fix(material/stepper): add HCM disabled styles This adds disabled styles for stepper header in high contrast mode * fix(material/tabs): add HCM disabled styles This adds disabled styles for tab labels in high contrast mode Co-authored-by: Jeremy Elbourn --- .../mdc-tabs/tab-header.scss | 19 +++++++++++++++---- src/material/stepper/step-header.scss | 11 +++++++++++ 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/material-experimental/mdc-tabs/tab-header.scss b/src/material-experimental/mdc-tabs/tab-header.scss index 95375660e56b..5dad511323ae 100644 --- a/src/material-experimental/mdc-tabs/tab-header.scss +++ b/src/material-experimental/mdc-tabs/tab-header.scss @@ -1,3 +1,4 @@ +@use '@angular/cdk'; @use './tabs-common'; @include tabs-common.paginated-tab-header; @@ -10,8 +11,18 @@ @include tabs-common.paginated-tab-header-item-wrapper('.mat-mdc-tab-header'); } -// For the tab element, default inset/offset values are necessary to ensure that -// the focus indicator is sufficiently contrastive and renders appropriately. -.mat-mdc-tab::before { - margin: 5px; +.mat-mdc-tab { + // For the tab element, default inset/offset values are necessary to ensure that + // the focus indicator is sufficiently contrastive and renders appropriately. + &::before { + margin: 5px; + } + + @include cdk.high-contrast(active, off) { + // When a tab is disabled in high contrast mode, set the text color to the disabled + // color, which is (unintuitively) named "GrayText". + &[aria-disabled='true'] { + color: GrayText; + } + } } diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss index d01e87b5e745..8447fc3f2f08 100644 --- a/src/material/stepper/step-header.scss +++ b/src/material/stepper/step-header.scss @@ -25,6 +25,17 @@ text-decoration: underline; } } + + // When a step header is disabled in high contrast mode, set the text color to the disabled + // color, which is (unintuitively) named "GrayText". + &[aria-disabled='true'] { + outline-color: GrayText; + .mat-step-label, + .mat-step-icon, + .mat-step-optional { + color: GrayText; + } + } } } From f63918a3b86f88af842cea1153a95d5a8a9d549c Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 8 Nov 2022 17:08:22 +0100 Subject: [PATCH 4/5] fix(cdk/scrolling): error when querying for CdkVirtualScrollViewport as CdkScrollable (#25937) In an earlier change we started providing the `CdkVirtualScrollable` through the `VIRTUAL_SCROLLABLE` token, but the change wasn't reflected in the `CdkVirtualScrollViewport` which was causing an error. Fixes #25917. (cherry picked from commit fcfb99dadebbdbbbdc2810761c35b186273a580b) --- .../scrolling/virtual-scroll-viewport.spec.ts | 20 +++++++++++++++++++ src/cdk/scrolling/virtual-scroll-viewport.ts | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts index e307679eda57..c61ec400f7d9 100644 --- a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts @@ -1,5 +1,6 @@ import {ArrayDataSource} from '@angular/cdk/collections'; import { + CdkScrollable, CdkVirtualForOf, CdkVirtualScrollViewport, ScrollDispatcher, @@ -1175,6 +1176,18 @@ describe('CdkVirtualScrollViewport', () => { .toBe(50); })); }); + + it('should be able to query for a virtual scroll viewport as a CdkScrollable', () => { + TestBed.configureTestingModule({ + imports: [ScrollingModule], + declarations: [VirtualScrollableQuery], + }).compileComponents(); + + const fixture = TestBed.createComponent(VirtualScrollableQuery); + fixture.detectChanges(); + + expect(fixture.componentInstance.scrollable).toBeTruthy(); + }); }); /** Finish initializing the virtual scroll component at the beginning of a test. */ @@ -1565,3 +1578,10 @@ class VirtualScrollWithScrollableWindow { .fill(0) .map((_, i) => i); } + +@Component({ + template: '', +}) +class VirtualScrollableQuery { + @ViewChild(CdkScrollable) scrollable: CdkScrollable; +} diff --git a/src/cdk/scrolling/virtual-scroll-viewport.ts b/src/cdk/scrolling/virtual-scroll-viewport.ts index 3417e8be0a78..d2dce44e84f2 100644 --- a/src/cdk/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk/scrolling/virtual-scroll-viewport.ts @@ -74,7 +74,7 @@ const SCROLL_SCHEDULER = virtualScrollable: CdkVirtualScrollable | null, viewport: CdkVirtualScrollViewport, ) => virtualScrollable || viewport, - deps: [CdkVirtualScrollable, CdkVirtualScrollViewport], + deps: [[new Optional(), new Inject(VIRTUAL_SCROLLABLE)], CdkVirtualScrollViewport], }, ], }) From 441742713b666edd9b0dacdf0a277994ecb71a60 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 9 Nov 2022 23:02:25 +0000 Subject: [PATCH 5/5] release: cut the v14.2.7 release --- CHANGELOG.md | 16 ++++++++++++++++ package.json | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 58eb06cfd7c4..c1570062625f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,19 @@ + +# 14.2.7 "smoke-spirit" (2022-11-09) +### cdk +| Commit | Type | Description | +| -- | -- | -- | +| [f63918a3b8](https://github.com/angular/components/commit/f63918a3b86f88af842cea1153a95d5a8a9d549c) | fix | **scrolling:** error when querying for CdkVirtualScrollViewport as CdkScrollable ([#25937](https://github.com/angular/components/pull/25937)) | +### material +| Commit | Type | Description | +| -- | -- | -- | +| [53588b51d2](https://github.com/angular/components/commit/53588b51d2caa9ba13d72f3fa282f0aec7f9f338) | fix | **stepper:** add HCM disabled styles for stepper and tabs ([#25393](https://github.com/angular/components/pull/25393)) ([#25932](https://github.com/angular/components/pull/25932)) | +| [a1473b93fc](https://github.com/angular/components/commit/a1473b93fcc1e737fea03063d092e6d535844f21) | fix | **stepper:** content not visibile on first navigation when nested in tabs ([#25930](https://github.com/angular/components/pull/25930)) | +## Special Thanks +Douglas Parker, Kristiyan Kostadinov and Wagner Maciel + + + # 14.2.6 "quilt-seagull" (2022-10-26) ### material diff --git a/package.json b/package.json index b8cd3abbe8ea..ddacb7d5db35 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "ci-notify-slack-failure": "ts-node --esm --project scripts/tsconfig.json scripts/circleci/notify-slack-job-failure.mts", "prepare": "husky install" }, - "version": "14.2.6", + "version": "14.2.7", "dependencies": { "@angular/animations": "^14.2.0", "@angular/common": "^14.2.0",