Merge branch '10.x.x' into release-please--branches--10.x.x--componen…

…ts--skyux

apps/playground/src/app/shared/help.service.ts

@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { SkyHelpOpenArgs, SkyHelpService } from '@skyux/core';
 
 @Injectable()
-export class PlaygroundHelpService implements SkyHelpService {
-  public openHelp(args: SkyHelpOpenArgs): void {
+export class PlaygroundHelpService extends SkyHelpService {
+  public override openHelp(args: SkyHelpOpenArgs): void {
     alert('help key: ' + args.helpKey);
   }
 }

libs/components/core/src/lib/modules/help/help.service.spec.ts

@@ -1,5 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 
+import { firstValueFrom } from 'rxjs';
+
 import { SkyHelpService } from './help.service';
 
 describe('Help service', () => {
@@ -18,4 +20,12 @@ describe('Help service', () => {
       }),
     ).toThrowError();
   });
+
+  it('should default widget ready state to false', async () => {
+    const helpService = TestBed.inject(SkyHelpService);
+
+    await expectAsync(
+      firstValueFrom(helpService.widgetReadyStateChange),
+    ).toBeResolvedTo(false);
+  });
 });

libs/components/core/src/lib/modules/help/help.service.ts

@@ -1,13 +1,22 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Injectable } from '@angular/core';
 
+import { Observable, of } from 'rxjs';
+
 import { SkyHelpOpenArgs } from './help-open-args';
 
 /**
  * Provides methods for opening a globally accessible help dialog.
  */
 @Injectable()
 export abstract class SkyHelpService {
+  /**
+   * Emits when the help widget ready state changes.
+   */
+  public get widgetReadyStateChange(): Observable<boolean> {
+    return of(false);
+  }
+
   /**
    * Opens a globally accessible help dialog.
    * @param args The options for opening the help dialog.

libs/components/core/testing/src/help/help-testing-controller.spec.ts

@@ -1,6 +1,8 @@
 import { TestBed } from '@angular/core/testing';
 import { SkyHelpService } from '@skyux/core';
 
+import { firstValueFrom } from 'rxjs';
+
 import { SkyHelpTestingController } from './help-testing-controller';
 import { SkyHelpTestingModule } from './help-testing.module';
 
@@ -50,4 +52,10 @@ describe('Help testing controller', () => {
       `Expected current help key to be 'test', but the current help key is undefined.`,
     );
   });
+
+  it('should set widget ready state to "true" on init', async () => {
+    await expectAsync(
+      firstValueFrom(helpSvc.widgetReadyStateChange),
+    ).toBeResolvedTo(true);
+  });
 });

libs/components/core/testing/src/help/help-testing-controller.ts

@@ -1,4 +1,5 @@
 import { inject } from '@angular/core';
+// eslint-disable-next-line @nx/enforce-module-boundaries
 import { SkyHelpService } from '@skyux/core';
 
 import { SkyHelpTestingService } from './help-testing.service';

libs/components/core/testing/src/help/help-testing.service.ts

@@ -1,11 +1,18 @@
 import { Injectable } from '@angular/core';
+// eslint-disable-next-line @nx/enforce-module-boundaries
 import { SkyHelpOpenArgs, SkyHelpService } from '@skyux/core';
 
+import { Observable, of } from 'rxjs';
+
 /**
  * @internal
  */
 @Injectable()
 export class SkyHelpTestingService extends SkyHelpService {
+  public override get widgetReadyStateChange(): Observable<boolean> {
+    return of(true);
+  }
+
   #currentHelpKey: string | undefined;
 
   public override openHelp(args: SkyHelpOpenArgs): void {

libs/components/help-inline/src/lib/modules/help-inline/help-inline-aria-controls.pipe.ts

@@ -17,9 +17,16 @@ export class SkyHelpInlineAriaControlsPipe implements PipeTransform {
     ariaControls: string | undefined,
     popoverId: string | undefined,
     helpKey: string | undefined,
+    widgetReadyState: boolean | null,
   ): string | undefined {
-    if (helpKey && this.#helpGlobalOptions) {
-      return this.#helpGlobalOptions.ariaControls;
+    if (helpKey) {
+      if (!widgetReadyState) {
+        return;
+      }
+
+      if (this.#helpGlobalOptions) {
+        return this.#helpGlobalOptions.ariaControls;
+      }
     }
 
     return popoverId || ariaControls;

libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.html

@@ -2,7 +2,11 @@
   class="sky-help-inline"
   type="button"
   [attr.aria-controls]="
-    ariaControls | skyHelpInlineAriaControls: popoverId : helpKey
+    ariaControls
+      | skyHelpInlineAriaControls
+        : popoverId
+        : helpKey
+        : (helpSvc?.widgetReadyStateChange | async)
   "
   [attr.aria-expanded]="
     ariaExpanded | skyHelpInlineAriaExpanded: ariaControls : isPopoverOpened

libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.spec.ts

@@ -60,7 +60,7 @@ describe('Help inline component', () => {
       options.ariaExpanded,
     );
 
-    if (options.ariaHaspopup) {
+    if (options.ariaHaspopup !== undefined) {
       expect(helpInlineEl?.getAttribute('aria-haspopup')).toBe(
         options.ariaHaspopup,
       );
@@ -90,11 +90,14 @@ describe('Help inline component', () => {
   let mockThemeSvc: { settingsChange: BehaviorSubject<SkyThemeSettingsChange> };
   let uniqueId = 0;
   let mockHelpSvc: jasmine.SpyObj<SkyHelpService>;
+  let readyStateChange: BehaviorSubject<boolean>;
 
   function setupTest(
     provideHelpSvc?: boolean,
     globalOptions?: SkyHelpGlobalOptions,
   ): void {
+    readyStateChange = new BehaviorSubject<boolean>(false);
+
     mockThemeSvc = {
       settingsChange: new BehaviorSubject<SkyThemeSettingsChange>({
         currentSettings: new SkyThemeSettings(
@@ -105,7 +108,16 @@ describe('Help inline component', () => {
       }),
     };
 
-    mockHelpSvc = jasmine.createSpyObj('SkyHelpService', ['openHelp']);
+    mockHelpSvc = jasmine.createSpyObj(
+      'SkyHelpService',
+      ['openHelp'],
+      ['widgetReadyStateChange'],
+    );
+
+    (
+      Object.getOwnPropertyDescriptor(mockHelpSvc, 'widgetReadyStateChange')
+        ?.get as unknown as jasmine.Spy
+    ).and.returnValue(readyStateChange);
 
     const providers: Provider[] = [
       { provide: SkyThemeService, useValue: mockThemeSvc },
@@ -434,6 +446,7 @@ describe('Help inline component', () => {
       });
 
       component.helpKey = 'test.html';
+      readyStateChange.next(true);
 
       fixture.detectChanges();
 
@@ -445,6 +458,43 @@ describe('Help inline component', () => {
       });
     });
 
+    it('should pass accessibility when a non-existent element is provided to the global ariaControls', async () => {
+      const ariaControls = 'lazy-element';
+
+      setupTest(true, {
+        ariaControls,
+        ariaHaspopup: 'dialog',
+      });
+
+      component.helpKey = 'foo.html';
+      fixture.detectChanges();
+
+      await checkAriaPropertiesAndAccessibility({
+        ariaLabel: 'Show help content',
+        ariaControls: null,
+        ariaExpanded: null,
+        ariaHaspopup: 'dialog',
+      });
+
+      // Create the ariaControls element.
+      const div = document.createElement('div');
+      div.id = ariaControls;
+      document.body.appendChild(div);
+
+      // Fire the ready state change event.
+      readyStateChange.next(true);
+      fixture.detectChanges();
+
+      await checkAriaPropertiesAndAccessibility({
+        ariaLabel: 'Show help content',
+        ariaControls,
+        ariaExpanded: null,
+        ariaHaspopup: 'dialog',
+      });
+
+      div.remove();
+    });
+
     describe('and help service is not provided but helpKey is specified', () => {
       it('should hide the help button', () => {
         setupTest(false);