Skip to content

feat(launchpad): add arial-label for favorite icons #1360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dauriamarco wants to merge 1 commit into from
Closed

feat(launchpad): add arial-label for favorite icons #1360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions api-goldens/element-ng/translate/index.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,8 @@ export interface SiTranslatableKeys {
// (undocumented)
'SI_LANGUAGE_SWITCHER.LABEL'?: string;
// (undocumented)
'SI_LAUNCHPAD.ADD_FAVORITE'?: string;
// (undocumented)
'SI_LAUNCHPAD.CLOSE'?: string;
// (undocumented)
'SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE'?: string;
Expand All @@ -300,6 +302,8 @@ export interface SiTranslatableKeys {
// (undocumented)
'SI_LAUNCHPAD.FAVORITE_APPS'?: string;
// (undocumented)
'SI_LAUNCHPAD.REMOVE_FAVORITE'?: string;
// (undocumented)
'SI_LAUNCHPAD.SHOW_LESS'?: string;
// (undocumented)
'SI_LAUNCHPAD.SHOW_MORE'?: string;
Expand Down
15 changes: 10 additions & 5 deletions ...apshots/navbar-launchpad.spec.ts-snapshots/si-navbar--si-navbar-launchpad-categories.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,23 @@
- paragraph: Access all your apps
- button "Close launchpad"
- text: Favorites
- link "Water":
- link "Water Remove from favorites":
- /url: .
- text: ""
- button "Show less"
- text: Phishing Apps
- link "Water":
- link "Water Remove from favorites":
- /url: .
- text: ""
- text: Other Apps
- link "Assets":
- link "Assets Add to favorites":
- /url: .
- link "Rocket":
- text: ""
- link "Rocket Add to favorites":
- /url: .
- link "Statistics":
- text: ""
- link "Statistics Add to favorites":
- /url: .
- text: ""
- link "Add more":
- /url: https://example.org
57 changes: 37 additions & 20 deletions ...snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad--mobile.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,67 @@
- paragraph: Switch applications
- button "Close launchpad"
- text: Favorites
- link "Assets System name":
- link "Assets System name Remove from favorites":
- /url: .
- link "Fischbach System name":
- text: ""
- link "Fischbach System name Remove from favorites":
- /url: .
- link "Statistics System name":
- text: ""
- link "Statistics System name Remove from favorites":
- /url: "#/viewer/viewer/stats"
- link "Rocket System name":
- text: ""
- link "Rocket System name Remove from favorites":
- /url: .
- text: ""
- button "Show less"
- link "Assets System name":
- link "Assets System name Remove from favorites":
- /url: .
- link "Fischbach System name":
- text: ""
- link "Fischbach System name Remove from favorites":
- /url: .
- link "Statistics System name":
- text: ""
- link "Statistics System name Remove from favorites":
- /url: "#/viewer/viewer/stats"
- link "Rocket System name":
- text: ""
- link "Rocket System name Remove from favorites":
- /url: .
- link "This is a really long name External application System name":
- text: ""
- link "This is a really long name External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 1 External application System name":
- link "App name 1 External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 2 System name":
- link "App name 2 System name Add to favorites":
- /url: .
- link "App name 3 System name":
- text: ""
- link "App name 3 System name Add to favorites":
- /url: .
- link "This is a really long name External application System name":
- text: ""
- link "This is a really long name External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 4 System name":
- link "App name 4 System name Add to favorites":
- /url: .
- link "App name 5 System name":
- text: ""
- link "App name 5 System name Add to favorites":
- /url: .
- link "App name 6 This is a really long name":
- text: ""
- link "App name 6 This is a really long name Add to favorites":
- /url: .
- link "App name 7 System name":
- text: ""
- link "App name 7 System name Add to favorites":
- /url: .
- link "App name 8 System name":
- text: ""
- link "App name 8 System name Add to favorites":
- /url: .
- link "App name 9 System name":
- text: ""
- link "App name 9 System name Add to favorites":
- /url: .
- link /App name \d+ System name/:
- text: ""
- link /App name \d+ System name Add to favorites/:
- /url: .
- text: ""
- heading "Launchpad Configuration" [level=2]
- paragraph: Configure your launchpad settings and test different display modes.
- text: Enable Favorites Show favorite apps at the top
Expand Down
54 changes: 35 additions & 19 deletions ...ots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad--new-favorite.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,64 @@
- paragraph: Switch applications
- button "Close launchpad"
- text: Favorites
- link "Assets System name":
- link "Assets System name Remove from favorites":
- /url: .
- link "Statistics System name":
- text: ""
- link "Statistics System name Remove from favorites":
- /url: "#/viewer/viewer/stats"
- link "Rocket System name":
- text: ""
- link "Rocket System name Remove from favorites":
- /url: .
- text: ""
- button "Show less"
- link "Assets System name":
- link "Assets System name Remove from favorites":
- /url: .
- link "Fischbach System name":
- text: ""
- link "Fischbach System name Add to favorites":
- /url: .
- link "Statistics System name":
- text: ""
- link "Statistics System name Remove from favorites":
- /url: "#/viewer/viewer/stats"
- link "Rocket System name":
- text: ""
- link "Rocket System name Remove from favorites":
- /url: .
- link "This is a really long name External application System name":
- text: ""
- link "This is a really long name External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 1 External application System name":
- link "App name 1 External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 2 System name":
- link "App name 2 System name Add to favorites":
- /url: .
- link "App name 3 System name":
- text: ""
- link "App name 3 System name Add to favorites":
- /url: .
- link "This is a really long name External application System name":
- text: ""
- link "This is a really long name External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 4 System name":
- link "App name 4 System name Add to favorites":
- /url: .
- link "App name 5 System name":
- text: ""
- link "App name 5 System name Add to favorites":
- /url: .
- link "App name 6 This is a really long name":
- text: ""
- link "App name 6 This is a really long name Add to favorites":
- /url: .
- link "App name 7 System name":
- text: ""
- link "App name 7 System name Add to favorites":
- /url: .
- link "App name 8 System name":
- text: ""
- link "App name 8 System name Add to favorites":
- /url: .
- link "App name 9 System name":
- text: ""
- link "App name 9 System name Add to favorites":
- /url: .
- link /App name \d+ System name/:
- text: ""
- link /App name \d+ System name Add to favorites/:
- /url: .
- text: ""
- heading "Launchpad Configuration" [level=2]
- paragraph: Configure your launchpad settings and test different display modes.
- text: Enable Favorites Show favorite apps at the top
Expand Down
57 changes: 37 additions & 20 deletions playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,67 @@
- paragraph: Switch applications
- button "Close launchpad"
- text: Favorites
- link "Assets System name":
- link "Assets System name Remove from favorites":
- /url: .
- link "Fischbach System name":
- text: ""
- link "Fischbach System name Remove from favorites":
- /url: .
- link "Statistics System name":
- text: ""
- link "Statistics System name Remove from favorites":
- /url: "#/viewer/viewer/stats"
- link "Rocket System name":
- text: ""
- link "Rocket System name Remove from favorites":
- /url: .
- text: ""
- button "Show less"
- link "Assets System name":
- link "Assets System name Remove from favorites":
- /url: .
- link "Fischbach System name":
- text: ""
- link "Fischbach System name Remove from favorites":
- /url: .
- link "Statistics System name":
- text: ""
- link "Statistics System name Remove from favorites":
- /url: "#/viewer/viewer/stats"
- link "Rocket System name":
- text: ""
- link "Rocket System name Remove from favorites":
- /url: .
- link "This is a really long name External application System name":
- text: ""
- link "This is a really long name External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 1 External application System name":
- link "App name 1 External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 2 System name":
- link "App name 2 System name Add to favorites":
- /url: .
- link "App name 3 System name":
- text: ""
- link "App name 3 System name Add to favorites":
- /url: .
- link "This is a really long name External application System name":
- text: ""
- link "This is a really long name External application System name Add to favorites":
- /url: .
- text: ""
- link "App name 4 System name":
- link "App name 4 System name Add to favorites":
- /url: .
- link "App name 5 System name":
- text: ""
- link "App name 5 System name Add to favorites":
- /url: .
- link "App name 6 This is a really long name":
- text: ""
- link "App name 6 This is a really long name Add to favorites":
- /url: .
- link "App name 7 System name":
- text: ""
- link "App name 7 System name Add to favorites":
- /url: .
- link "App name 8 System name":
- text: ""
- link "App name 8 System name Add to favorites":
- /url: .
- link "App name 9 System name":
- text: ""
- link "App name 9 System name Add to favorites":
- /url: .
- link /App name \d+ System name/:
- text: ""
- link /App name \d+ System name Add to favorites/:
- /url: .
- text: ""
- heading "Launchpad Configuration" [level=2]
- paragraph: Configure your launchpad settings and test different display modes.
- text: Enable Favorites Show favorite apps at the top
Expand Down
1 change: 1 addition & 0 deletions projects/element-ng/application-header/launchpad/si-launchpad-app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
class="favorite-icon"
[class.is-favorite]="favorite()"
[icon]="favorite() ? icons.elementFavoritesFilled : icons.elementFavorites"
[attr.aria-label]="(favorite() ? removeFavoriteText() : addFavoriteText()) | translate"
(click)="favoriteClicked($event)"
/>
}
22 changes: 22 additions & 0 deletions projects/element-ng/application-header/launchpad/si-launchpad-app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,28 @@ export class SiLaunchpadAppComponent {
readonly externalLinkText = input<TranslatableString>(
t(() => $localize`:@@SI_LAUNCHPAD.EXTERNAL_LINK:External application`)
);
/**
* Aria-label for the favorite toggle icon when the app is marked as favorite.
*
* @defaultValue
* ```
* t(() => $localize`:@@SI_LAUNCHPAD.REMOVE_FAVORITE:Remove from favorites`)
* ```
*/
readonly removeFavoriteText = input<TranslatableString>(
Copy link
Member

@spliffone spliffone Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
readonly removeFavoriteText = input<TranslatableString>(
readonly removeFavoriteText = input(

t(() => $localize`:@@SI_LAUNCHPAD.REMOVE_FAVORITE:Remove from favorites`)
);
/**
* Aria-label for the favorite toggle icon when the app is not marked as favorite.
*
* @defaultValue
* ```
* t(() => $localize`:@@SI_LAUNCHPAD.ADD_FAVORITE:Add to favorites`)
* ```
*/
readonly addFavoriteText = input<TranslatableString>(
Copy link
Member

@spliffone spliffone Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the type is unneccessary since you use the t()function.

Suggested change
readonly addFavoriteText = input<TranslatableString>(
readonly addFavoriteText = input(

t(() => $localize`:@@SI_LAUNCHPAD.ADD_FAVORITE:Add to favorites`)
);

protected readonly icons = addIcons({ elementExport, elementFavorites, elementFavoritesFilled });

Expand Down
2 changes: 2 additions & 0 deletions projects/element-ng/translate/si-translatable-keys.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,10 +144,12 @@ export interface SiTranslatableKeys {
'SI_ICON_STATUS.UNKNOWN'?: string;
'SI_ICON_STATUS.WARNING'?: string;
'SI_LANGUAGE_SWITCHER.LABEL'?: string;
'SI_LAUNCHPAD.ADD_FAVORITE'?: string;
'SI_LAUNCHPAD.CLOSE'?: string;
'SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE'?: string;
'SI_LAUNCHPAD.EXTERNAL_LINK'?: string;
'SI_LAUNCHPAD.FAVORITE_APPS'?: string;
'SI_LAUNCHPAD.REMOVE_FAVORITE'?: string;
'SI_LAUNCHPAD.SHOW_LESS'?: string;
'SI_LAUNCHPAD.SHOW_MORE'?: string;
'SI_LAUNCHPAD.SUB_TITLE'?: string;
Expand Down