fix(application-header): launchpad Show more/less should have aria-expanded

api-goldens/element-ng/application-header/index.api.md

@@ -137,7 +137,8 @@ export class SiLaunchpadFactoryComponent {
     readonly favoriteAppsText: _angular_core.InputSignal<TranslatableString>;
     // (undocumented)
     readonly favoriteChange: _angular_core.OutputEmitterRef<FavoriteChangeEvent>;
-    readonly showLessAppsText: _angular_core.InputSignal<TranslatableString>;
+    // @deprecated (undocumented)
+    readonly showLessAppsText: _angular_core.InputSignal<unknown>;
     readonly showMoreAppsText: _angular_core.InputSignal<TranslatableString>;
     readonly subtitleText: _angular_core.InputSignal<TranslatableString | undefined>;
     readonly titleText: _angular_core.InputSignal<TranslatableString>;

playwright/snapshots/navbar-launchpad.spec.ts-snapshots/si-navbar--si-navbar-launchpad-categories.yaml

@@ -17,7 +17,7 @@
   - text: Favorites
   - link "Water":
     - /url: .
-  - button "Show less"
+  - button "Show more" [expanded]
   - text: Phishing Apps
   - link "Water":
     - /url: .

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad--mobile.yaml

@@ -14,7 +14,7 @@
     - /url: "#/viewer/viewer/stats"
   - link "Rocket System name":
     - /url: .
-  - button "Show less"
+  - button "Show more" [expanded]
   - link "Assets System name":
     - /url: .
   - link "Fischbach System name":

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad--new-favorite.yaml

@@ -12,7 +12,7 @@
     - /url: "#/viewer/viewer/stats"
   - link "Rocket System name":
     - /url: .
-  - button "Show less"
+  - button "Show more" [expanded]
   - link "Assets System name":
     - /url: .
   - link "Fischbach System name":

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad.yaml

@@ -14,7 +14,7 @@
     - /url: "#/viewer/viewer/stats"
   - link "Rocket System name":
     - /url: .
-  - button "Show less"
+  - button "Show more" [expanded]
   - link "Assets System name":
     - /url: .
   - link "Fischbach System name":

projects/element-ng/application-header/launchpad/si-launchpad-factory.component.html

@@ -93,9 +93,10 @@
           type="button"
           class="btn btn-link btn-show-all dropdown-toggle text-decoration-none"
           [class.show]="showAllApps"
+          [attr.aria-expanded]="showAllApps"
           (click)="showAllApps = !showAllApps"
         >
-          <b>{{ (showAllApps ? showLessAppsText() : showMoreAppsText()) | translate }}</b>
+          <b>{{ showMoreAppsText() | translate }}</b>
           <si-icon class="link-icon dropdown-caret" [icon]="icons.elementDown2" />
         </button>
       }

projects/element-ng/application-header/launchpad/si-launchpad-factory.component.ts

@@ -90,15 +90,8 @@ export class SiLaunchpadFactoryComponent {
    */
   readonly showMoreAppsText = input(t(() => $localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`));
 
-  /**
-   * Title of the show less apps button.
-   *
-   * @defaultValue
-   * ```
-   * t(() => $localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`)
-   * ```
-   */
-  readonly showLessAppsText = input(t(() => $localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`));
+  /** @deprecated This input no longer has an effect. {@link showMoreAppsText} is shown in all cases. */
+  readonly showLessAppsText = input();
 
   readonly favoriteChange = output<FavoriteChangeEvent>();
 

projects/element-ng/application-header/launchpad/si-launchpad.spec.ts

@@ -55,8 +55,10 @@ describe('SiLaunchpad', () => {
           }
         ]);
         expect(await harness.hasToggle()).toBe(true);
+        expect(await harness.isExpanded()).toBe(false);
         expect(await harness.getCategories()).toHaveLength(1);
         await harness.toggleMore();
+        expect(await harness.isExpanded()).toBe(true);
         expect(await harness.getCategories()).toHaveLength(2);
         expect(await harness.getCategory('C-1').then(category => category.getApps())).toHaveLength(
           2

projects/element-ng/application-header/testing/si-launchpad.harness.ts

@@ -32,6 +32,12 @@ export class SiLaunchpadHarness extends ComponentHarness {
     return this.toggleButton().then(toggle => !!toggle);
   }
 
+  async isExpanded(): Promise<boolean> {
+    return (await this.toggleButton())!
+      .getAttribute('aria-expanded')
+      .then(value => value === 'true');
+  }
+
   async toggleMore(): Promise<void> {
     return this.toggleButton().then(toggle => toggle!.click());
   }