Merge branch 'main' into update-angular-17

.github/workflows/release-please.yml

@@ -7,8 +7,8 @@ on:
     branches:
       - main
 env:
-  PRERELEASE: 'false'
-  MAJOR_VERSION: 9
+  PRERELEASE: 'true'
+  MAJOR_VERSION: 10
 jobs:
   release:
     runs-on: ubuntu-latest
@@ -21,13 +21,20 @@ jobs:
           set -exo pipefail
 
           # Get the current prerelease version.
-          CURRENT_RELEASE=$(gh release list -R blackbaud/skyux|grep '^v${{ env.MAJOR_VERSION }}'|head -1|cut -d$'\t' -f 3)
+          ACC="Accept: application/vnd.github+json"
+          VER="X-GitHub-Api-Version: 2022-11-28"
+          JSON='map(.tag_name) | [.[] | select(startswith("${{ env.MAJOR_VERSION }}.")) ] | .[0] // empty'
+          CURRENT_RELEASE=$(gh api -H "${ACC}" -H "${VER}" /repos/${{ github.repository }}/releases | jq -r "${JSON}")
 
           # Bump the prerelease version.
-          NEXT_VERSION=$(npx --yes semver -i prerelease $CURRENT_RELEASE)
+          if [ -z "$CURRENT_RELEASE" ]; then
+            NEXT_VERSION="${{ env.MAJOR_VERSION }}.0.0-alpha.0"
+          else
+            NEXT_VERSION=$(npx --yes semver -i prerelease $CURRENT_RELEASE)
+          fi
 
           # If version is empty, exit.
-          if [ -z "$CURRENT_RELEASE" ] || [ -z "$NEXT_VERSION" ]; then
+          if [ -z "$NEXT_VERSION" ]; then
             echo "Not able to determine prerelease version."
             exit 1
           fi

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [9.21.3](https://github.com/blackbaud/skyux/compare/9.21.2...9.21.3) (2024-01-23)
+
+
+### Bug Fixes
+
+* **components/datetime:** datepicker calendar overlay prevents unintended keyboard navigation from reaching parent components ([#1952](https://github.com/blackbaud/skyux/issues/1952)) ([34c8941](https://github.com/blackbaud/skyux/commit/34c8941f19abec185b41997eb56fd3c5f0092d29))
+
 ## [9.21.2](https://github.com/blackbaud/skyux/compare/9.21.1...9.21.2) (2024-01-19)
 
 

apps/integration-e2e/src/e2e/toast.cy.ts

@@ -10,6 +10,6 @@ describe('ToastComponent', () => {
     cy.get('sky-toaster sky-toast:first-child button.sky-toast-btn-close')
       .should('be.visible')
       .should('have.attr', 'title')
-      .should('not.equal', 'skyux_toast_close_button');
+      .should('not.equal', 'skyux_toast_close_button_title');
   });
 });

apps/playground/src/app/components/popovers/popovers.module.ts

@@ -7,6 +7,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./dropdown/dropdown.module').then((m) => m.DropdownModule),
   },
+  {
+    path: 'popovers',
+    loadChildren: () =>
+      import('./popovers/popovers.module').then((m) => m.PopoversModule),
+  },
 ];
 
 @NgModule({

apps/playground/src/app/components/popovers/popovers/popovers-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ComponentRouteInfo } from '../../../shared/component-info/component-route-info';
+
+import { PopoversComponent } from './popovers.component';
+
+const routes: ComponentRouteInfo[] = [
+  {
+    path: '',
+    component: PopoversComponent,
+    data: {
+      name: 'Popover',
+      icon: 'caret-down',
+      library: 'popovers',
+    },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PopoversRoutingModule {
+  public static routes = routes;
+}

apps/playground/src/app/components/popovers/popovers/popovers.component.html

@@ -0,0 +1,24 @@
+<sky-page layout="blocks">
+  <sky-page-content>
+    <button
+      class="sky-btn sky-btn-primary sky-margin-inline-default"
+      type="button"
+      [skyPopover]="myPopover0"
+    >
+      Popover demo on click
+    </button>
+
+    <button
+      class="sky-btn sky-btn-link"
+      type="button"
+      [skyPopover]="myPopover0"
+      [skyPopoverTrigger]="'mouseenter'"
+    >
+      Popover demo on hover
+    </button>
+
+    <sky-popover popoverTitle="Playground popover" #myPopover0>
+      The content of a popover can be text, HTML, or Angular components.
+    </sky-popover>
+  </sky-page-content>
+</sky-page>

apps/playground/src/app/components/popovers/popovers/popovers.component.ts

@@ -0,0 +1,17 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SkyPageModule } from '@skyux/pages';
+import { SkyPopoverModule } from '@skyux/popovers';
+
+@Component({
+  selector: 'app-popovers',
+  templateUrl: './popovers.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [SkyPopoverModule, SkyPageModule],
+})
+export class PopoversComponent {}

apps/playground/src/app/components/popovers/popovers/popovers.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { PopoversRoutingModule } from './popovers-routing.module';
+import { PopoversComponent } from './popovers.component';
+
+@NgModule({
+  imports: [CommonModule, PopoversRoutingModule, PopoversComponent],
+})
+export class PopoversModule {
+  public static routes = PopoversRoutingModule.routes;
+}

libs/components/datetime/src/lib/modules/datepicker/datepicker.component.spec.ts

@@ -341,15 +341,16 @@ describe('datepicker', () => {
       fixture.detectChanges();
       tick();
       clickTrigger(fixture);
+      let picker = getCalendar();
 
-      SkyAppTestUtility.fireDomEvent(window.document, 'keydown', {
+      SkyAppTestUtility.fireDomEvent(picker, 'keyup', {
         customEventInit: {
           key: 'escape',
         },
       });
       fixture.detectChanges();
       tick();
-      const picker = getCalendar();
+      picker = getCalendar();
 
       expect(picker).toBeNull();
     }));
@@ -406,15 +407,16 @@ describe('datepicker', () => {
       fixture.detectChanges();
       tick();
       clickTrigger(fixture);
+      let picker = getCalendar();
 
-      SkyAppTestUtility.fireDomEvent(window.document, 'keydown', {
+      SkyAppTestUtility.fireDomEvent(picker, 'keydown', {
         customEventInit: {
           key: undefined,
         },
       });
       fixture.detectChanges();
       tick();
-      const picker = getCalendar();
+      picker = getCalendar();
 
       expect(picker).not.toBeNull();
     }));

libs/components/datetime/src/lib/modules/datepicker/datepicker.component.ts

@@ -120,6 +120,8 @@ export class SkyDatepickerComponent implements OnDestroy, OnInit {
     if (value) {
       this.#_calendarRef = value;
 
+      this.#addKeyupListener();
+
       // Wait for the calendar component to render before gauging dimensions.
       setTimeout(() => {
         if (this.calendarRef) {
@@ -181,7 +183,7 @@ export class SkyDatepickerComponent implements OnDestroy, OnInit {
 
   #overlay: SkyOverlayInstance | undefined;
 
-  #overlayKeydownListener: Subscription | undefined;
+  #overlayKeyupListener: Subscription | undefined;
 
   #_calendarRef: ElementRef | undefined;
 
@@ -382,8 +384,6 @@ export class SkyDatepickerComponent implements OnDestroy, OnInit {
           }
         });
 
-      this.#addKeydownListener();
-
       overlay.attachTemplate(this.calendarTemplateRef);
 
       this.#overlay = overlay;
@@ -398,25 +398,29 @@ export class SkyDatepickerComponent implements OnDestroy, OnInit {
     }
   }
 
-  #addKeydownListener(): void {
-    this.#overlayKeydownListener = fromEvent<KeyboardEvent>(
-      window.document,
-      'keydown',
-    )
-      .pipe(takeUntil(this.#ngUnsubscribe))
-      .subscribe((event) => {
-        const key = event.key?.toLowerCase();
-        if (key === 'escape' && this.isOpen) {
-          this.#closePicker();
-        }
-      });
+  #addKeyupListener(): void {
+    const datepickerCalendarElement = this.calendarRef?.nativeElement;
+
+    if (datepickerCalendarElement) {
+      this.#overlayKeyupListener = fromEvent<KeyboardEvent>(
+        datepickerCalendarElement,
+        'keyup',
+      )
+        .pipe(takeUntil(this.#ngUnsubscribe))
+        .subscribe((event) => {
+          const key = event.key?.toLowerCase();
+          if (key === 'escape' && this.isOpen) {
+            this.#closePicker();
+          }
+        });
+    }
   }
 
   #removePickerEventListeners(): void {
     this.#calendarUnsubscribe.next();
     this.#calendarUnsubscribe.complete();
     this.#calendarUnsubscribe = new Subject<void>();
-    this.#overlayKeydownListener?.unsubscribe();
+    this.#overlayKeyupListener?.unsubscribe();
   }
 
   #cancelCustomDatesSubscription(): void {

libs/components/toast/src/assets/locales/resources_en_US.json

@@ -1,6 +1,10 @@
 {
-  "skyux_toast_close_button": {
+  "skyux_toast_close_button_aria_label": {
     "_description": "Screen reader text for the close button on toasts",
+    "message": "Close message:"
+  },
+  "skyux_toast_close_button_title": {
+    "_description": "Tooltip text for the close button on toasts",
     "message": "Close the message"
   }
 }

libs/components/toast/src/lib/modules/shared/sky-toast-resources.module.ts

@@ -18,7 +18,10 @@ import {
 } from '@skyux/i18n';
 
 const RESOURCES: { [locale: string]: SkyLibResources } = {
-  'EN-US': { skyux_toast_close_button: { message: 'Close the message' } },
+  'EN-US': {
+    skyux_toast_close_button_aria_label: { message: 'Close message:' },
+    skyux_toast_close_button_title: { message: 'Close the message' },
+  },
 };
 
 SkyLibResourcesService.addResources(RESOURCES);

libs/components/toast/src/lib/modules/toast/toast.component.html

@@ -17,16 +17,23 @@
         [topIcon]="topIcon"
       ></sky-icon-stack>
     </div>
-    <div class="sky-toast-content">
+    <div class="sky-toast-content" skyId="toastContent" #toastContent>
       <ng-content />
     </div>
     <button
       class="sky-toast-btn-close"
       type="button"
-      [attr.title]="'skyux_toast_close_button' | skyLibResources"
+      [attr.title]="'skyux_toast_close_button_title' | skyLibResources"
+      [attr.aria-labelledby]="toastCloseMessage.id + ' ' + toastContent.id"
       (click)="close()"
     >
       <sky-icon icon="close" />
     </button>
   </div>
+  <span
+    class="sky-screen-reader-only"
+    skyId="toastCloseMessage"
+    #toastCloseMessage
+    >{{ 'skyux_toast_close_button_aria_label' | skyLibResources }}</span
+  >
 </aside>

libs/components/toast/src/lib/modules/toast/toast.component.ts

@@ -13,6 +13,7 @@ import {
   inject,
 } from '@angular/core';
 import { skyAnimationEmerge } from '@skyux/animations';
+import { SkyIdModule } from '@skyux/core';
 import { SkyIconModule, SkyIconStackItem } from '@skyux/indicators';
 
 import { Subject, combineLatest } from 'rxjs';
@@ -37,7 +38,7 @@ const SKY_TOAST_TYPE_DEFAULT = SkyToastType.Info;
   animations: [skyAnimationEmerge],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, SkyIconModule, SkyToastResourcesModule],
+  imports: [CommonModule, SkyIconModule, SkyIdModule, SkyToastResourcesModule],
 })
 export class SkyToastComponent implements OnInit, OnDestroy {
   /**

libs/components/toast/testing/src/toast-fixture.ts

@@ -12,7 +12,7 @@ export class SkyToastFixture {
    * The toast's current text.
    */
   public get text(): string | undefined {
-    return SkyAppTestUtility.getText(this.#debugEl);
+    return SkyAppTestUtility.getText(this.#getToastContentEl());
   }
 
   /**
@@ -59,6 +59,10 @@ export class SkyToastFixture {
     return this.#debugEl.query(By.css('.sky-toast'));
   }
 
+  #getToastContentEl(): DebugElement {
+    return this.#debugEl.query(By.css('.sky-toast-content'));
+  }
+
   #getCloseBtnEl(): DebugElement {
     return this.#debugEl.query(By.css('.sky-toast-btn-close'));
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skyux",
-  "version": "9.21.2",
+  "version": "9.21.3",
   "license": "MIT",
   "scripts": {
     "ng": "nx",