Skip to content
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

[DO NOT MERGE] changes to accept i18Nlabels as input #397

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

[DO NOT MERGE] changes to accept i18Nlabels as input #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
293a3de
changes to accept i18Nlabels as input
RAJESH-GN Jan 29, 2025
243916a
changes to accept i18Nlabels as input
RAJESH-GN Jan 29, 2025
608f748
changes to accept i18Nlabels as input
RAJESH-GN Jan 30, 2025
36ee772
tests updated
RAJESH-GN Jan 31, 2025
fb4be66
comments on the input changes
RAJESH-GN Feb 3, 2025
18ec5e0
merging received Inputs
RAJESH-GN Feb 3, 2025
b386ebb
merging received Inputs routing example
RAJESH-GN Feb 4, 2025
df5f969
merging received Inputs routing example bug fix
RAJESH-GN Feb 4, 2025
763f9b2
merging received Inputs routing example bug fix
RAJESH-GN Feb 4, 2025
3616818
changes to variable referenced
RAJESH-GN Feb 10, 2025
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
134 changes: 35 additions & 99 deletions apps/golden-sample-app/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,28 @@
layoutService.isHighResolutionView$ | async
}"
>
<!-- Dummy text -->
<!-- Topbar Area -->
<nav class="bb-layout__topbar">
<!-- Skip to content -->
<button
aria-label="skip to content"
i18n-aria-label="
Move focus to beginning of content - 'skip to content'|This string is
used as the aria-label for a button that moves the focus to the
beginning of the content. It is presented to the user as an
accessibility feature to quickly navigate to the main content section.
This aria-label is located in the topbar area of the
layout.@@move-focus-to-beginning-of-content"
[ariaLabel]="appTranslations['move-focus-to-beginning-of-content']"
class="bb-layout__skip-to-content"
(click)="focusMainContainer($event)"
i18n="
Skip to content - 'Skip to content'|This string is used as the text for
a button that moves the focus to the beginning of the content. It is
presented to the user as an accessibility feature to quickly navigate to
the main content section. This text is located in the topbar area of the
layout.@@skip-to-content"
>
Skip to Content
{{ appTranslations['skip-to-content'] }}
</button>

<!-- Hamburger -->
<button
Copy link
Collaborator

Choose a reason for hiding this comment

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

It's a problem with this button because on running the accesibility linter it asks to have a text for the button. In my case I added the following code after the line 29.

<span class="sr-only">{{
        translations['bb-layout.sidebar_toggler']
      }}</span>

In your code it should be something like:

<span class="sr-only">{{
        appTranslations['bb-layout.sidebar_toggler']
      }}</span>

For this to work you also will need to add a class on the scss file:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

If you don't do this, the e2e tests will fail

class="bb-layout__nav-expand-marker"
aria-label="Toggle sidebar"
i18n-aria-label="
Sidebar Toggler - 'Toggle sidebar'|This string is used as the aria-label
for a button that toggles the sidebar state. It is presented to the user
as an accessibility feature to indicate the button's function. This
aria-label is located in the topbar area of the
layout.@@bb-layout.sidebar_toggler"
[attr.aria-expanded]="layoutService.navigationExpanded$ | async"
[ariaLabel]="appTranslations['bb-layout.sidebar_toggler']"
[ariaExpanded]="layoutService.navigationExpanded$ | async"
(click)="layoutService.toggleNav()"
>
<span class="bb-icon"></span>
<span class="sr-only">{{
appTranslations['bb-layout.sidebar_toggler']
}}</span>
</button>

<!-- Logo -->
Expand All @@ -70,16 +53,8 @@
class="bb-layout__vertical-nav-item-icon"
name="payments"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="
Make transfer link - 'Make transfer'|This string is used as the
text for a link that navigates to the transfer page. It is
presented to the user as a navigation item in the horizontal
navigation bar. This text is located in the navigation items
section of the layout.@@main.transfer.link.text"
>
Make transfer
<span class="bb-layout__horizontal-nav-item-description">
{{ appTranslations['main.transfer.link.text'] }}
</span>
</a>
</li>
Expand All @@ -103,11 +78,8 @@
name="transactions"
size="md"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="transactions list link@@main.transactions.link.text"
>
Entitlements test - No grouping.
<span class="bb-layout__horizontal-nav-item-description">
{{ appTranslations['main.entitlements-test-no-grouping.text'] }}
</span>
</a>
</li>
Expand All @@ -131,11 +103,8 @@
name="transactions"
size="md"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="transactions list link@@main.transactions.link.text"
>
Entitlements test - Grouping.
<span class="bb-layout__horizontal-nav-item-description">
{{ appTranslations['main.entitlements-test-grouping.text'] }}
</span>
</a>
</li>
Expand All @@ -159,11 +128,8 @@
name="transactions"
size="md"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="transactions list link@@main.transactions.link.text"
>
Entitlements test - Nested groups.
<span class="bb-layout__horizontal-nav-item-description">
{{ appTranslations['main.entitlements-test-nested-groups.text'] }}
</span>
</a>
</li>
Expand All @@ -187,11 +153,12 @@
name="transactions"
size="md"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="transactions list link@@main.transactions.link.text"
>
Entitlements test - Using NOT operators on groups.
<span class="bb-layout__horizontal-nav-item-description">
{{
appTranslations[
'main.entitlements-test-using-not-operators-on-groups.text'
]
}}
</span>
</a>
</li>
Expand All @@ -215,11 +182,12 @@
name="transactions"
size="md"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="transactions list link@@main.transactions.link.text"
>
Entitlements test - Using multiple NOT operators on groups.
<span class="bb-layout__horizontal-nav-item-description">
{{
appTranslations[
'main.entitlements-test-using-multiple-not-operators-on-groups.text'
]
}}
</span>
</a>
</li>
Expand All @@ -241,16 +209,8 @@
name="transactions"
size="md"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="
Transactions list link - 'Transactions List'|This string is used
as the text for a link that navigates to the transactions list
page. It is presented to the user as a navigation item in the
horizontal navigation bar. This text is located in the navigation
items section of the layout.@@main.transactions.link.text"
>
Transactions List
<span class="bb-layout__horizontal-nav-item-description">
{{ appTranslations['main.transactions.link.text'] }}
</span>
</a>
</li>
Expand All @@ -271,16 +231,8 @@
class="bb-layout__vertical-nav-item-icon"
name="note"
></bb-icon-ui>
<span
class="bb-layout__horizontal-nav-item-description"
i18n="
Positive pay link - 'Positive Pay'|This string is used as the text
for a link that navigates to the Positive Pay page. It is
presented to the user as a navigation item in the horizontal
navigation bar. This text is located in the navigation items
section of the layout.@@main.positive-pay.link.text"
>
Positive Pay
<span class="bb-layout__horizontal-nav-item-description">
{{ appTranslations['main.positive-pay.link.text'] }}
</span>
</a>
</li>
Expand All @@ -302,16 +254,8 @@
name="verified-user"
></bb-icon-ui>

<span
class="bb-layout__horizontal-nav-item-description"
i18n="
Ach Positive pay link - 'ACH Positive Pay'|This string is used as
the text for a link that navigates to the ACH Positive Pay page.
It is presented to the user as a navigation item in the horizontal
navigation bar. This text is located in the navigation items
section of the layout.@@main.ach-positive-pay.link.text"
>
ACH Positive Pay
<span class="bb-layout__horizontal-nav-item-description">
{{ appTranslations['main.ach-positive-pay.link.text'] }}
</span>
</a>
</li>
Expand All @@ -330,16 +274,8 @@
name="verified-user"
></bb-icon-ui>

<span
class="bb-layout__horizontal-nav-item-description"
i18n="
Make a Payment Link - 'Make internal payment'|This string is used
as the text for a link that navigates to the internal payment
page. It is presented to the user as a navigation item in the
horizontal navigation bar. This text is located in the navigation
items section of the layout.@@main.make-a-payment.link.text"
>
Make internal payment
<span class="bb-layout__horizontal-nav-item-description">
{{ appTranslations['main.make-a-payment.link.text'] }}
</span>
</a>
</li>
Expand Down
11 changes: 11 additions & 0 deletions apps/golden-sample-app/src/app/app.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
.main-content {
padding: 20px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
2 changes: 2 additions & 0 deletions apps/golden-sample-app/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Tracker,
} from '@backbase/foundation-ang/observability';
import { environment } from '../environments/environment';
import { AppTranslations, appTranslations } from './translation-catalog';

@Component({
selector: 'app-root',
Expand All @@ -17,6 +18,7 @@ export class AppComponent {
triplets = triplets;
isAuthenticated = false;

public readonly appTranslations: AppTranslations = appTranslations;
constructor(
private oAuthService: OAuthService,
public layoutService: LayoutService,
Expand Down
2 changes: 1 addition & 1 deletion apps/golden-sample-app/src/app/components/view-wrapper/view-wrapper.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ export class ViewWrapperComponent {
@Input()
title = this.route.snapshot.data['title'];

constructor(private route: ActivatedRoute) {}
constructor(private readonly route: ActivatedRoute) {}
}
2 changes: 1 addition & 1 deletion apps/golden-sample-app/src/app/custom-payment/components/initiator/initiator.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export class InitiatorComponent implements OnInit, PaymentFormField {
requiredMessage!: string;

// Form controls based on InitiatorDetails
private initiatorFormControls: InitiatorFields[] = [
private readonly initiatorFormControls: InitiatorFields[] = [
InitiatorFields.id,
InitiatorFields.name,
InitiatorFields.accountNumber,
Expand Down
Loading