[Focus Service, Translation Service]: Tests and refactoring

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts

@@ -10,7 +10,6 @@ import {
 import { FudisLanguageAbbr, FudisLanguageBadgeContent } from '../../../../types/miscellaneous';
 import { FudisTranslationService } from '../../../../services/translation/translation.service';
 import { DescriptionListItemComponent } from '../description-list-item.component';
-import { FudisLanguageBadgeGroupService } from '../../../../services/language-badge-group/language-badge-group.service';
 import { DescriptionListComponent } from '../../description-list.component';
 import { FudisIdService } from '../../../../services/id/id.service';
 
@@ -23,7 +22,6 @@ export class DescriptionListItemTermComponent implements AfterContentInit {
  constructor(
  private _elementRef: ElementRef,
  private _translationService: FudisTranslationService,
- private _languageBadgeGroupService: FudisLanguageBadgeGroupService,
  private _idService: FudisIdService,
  @Host() private _parentDlItem: DescriptionListItemComponent,
  @Host() protected _parentDl: DescriptionListComponent,
@@ -36,7 +34,7 @@ export class DescriptionListItemTermComponent implements AfterContentInit {
 
  effect(() => {
  this._currentLanguage = _translationService.getLanguage();
- this._languageOptions = this._languageBadgeGroupService.getLanguages();
+ this._languageOptions = _translationService.getBadgeGroupLanguages();
  this._setLanguageOptions();
  });
 
@@ -62,7 +60,7 @@ export class DescriptionListItemTermComponent implements AfterContentInit {
  protected _parentLanguageOptions: FudisLanguageBadgeContent;
 
  /**
- * Filtered array, where DOM is compared with Language config set in FudisLanguageBadgeGroupService
+ * Filtered array, where DOM is compared with Language config set in FudisTranslationService
  */
  protected _availableLanguages: FudisLanguageAbbr[];
 
@@ -87,7 +85,7 @@ export class DescriptionListItemTermComponent implements AfterContentInit {
  private _currentLanguage: FudisLanguageAbbr;
 
  /**
- * Config array from FudisLanguageBadgeGroupService
+ * Config array from FudisTranslationService
  */
  private _languageOptions: Signal<FudisLanguageAbbr[]>;
 

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts

@@ -2,9 +2,9 @@ import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
 import { Component } from '@angular/core';
 import { DescriptionListComponent } from './description-list.component';
 import docs from './docs.mdx';
-import { FudisLanguageBadgeGroupService } from '../../services/language-badge-group/language-badge-group.service';
 import { FudisLanguageAbbr } from '../../types/miscellaneous';
 import { descriptionListExclude } from '../../utilities/storybook';
+import { FudisTranslationService } from '../../services/translation/translation.service';
 
 @Component({
  selector: 'example-language-service-change-component',
@@ -26,12 +26,12 @@ import { descriptionListExclude } from '../../utilities/storybook';
  `,
 })
 class LanguageChangeComponent {
- constructor(private _languageService: FudisLanguageBadgeGroupService) {
- this._languageService.setLanguages(['fi', 'sv', 'en']);
+ constructor(private _languageService: FudisTranslationService) {
+ this._languageService.setBadgeGroupLanguages(['fi', 'sv', 'en']);
  }
 
  changeBadgeLanguages(languages: FudisLanguageAbbr[]): void {
- this._languageService.setLanguages(languages);
+ this._languageService.setBadgeGroupLanguages(languages);
  }
 }
 

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.html

@@ -1,8 +1,6 @@
 <fieldset
  fudisGrid
- #fieldset
  [attr.id]="id"
- [tabIndex]="-1"
  [classes]="_classes"
  [align]="align"
  [width]="inputSize ? 'initial' : width"
@@ -11,7 +9,7 @@
  [marginBottom]="marginBottom"
  [marginTop]="marginTop"
 >
- <legend class="fudis-fieldset__legend">
+ <legend #fieldsetLegend class="fudis-fieldset__legend" [attr.id]="id + '-legend'" [tabIndex]="-1">
  <div
  class="fudis-fieldset__legend__container"
  [class.fudis-fieldset__legend__container__row-end]="_headerActions?.align === 'end'"

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts

@@ -25,6 +25,7 @@ import { FudisInternalErrorSummaryService } from '../../../services/form/error-s
 import { FudisFormErrorSummarySection, FudisInputSize } from '../../../types/forms';
 import { FudisTranslationService } from '../../../services/translation/translation.service';
 import { FormComponent } from '../form/form.component';
+import { FudisFocusService } from '../../../services/focus/focus.service';
 
 @Component({
  selector: 'fudis-fieldset',
@@ -39,6 +40,7 @@ export class FieldSetComponent
  constructor(
  @Host() @Optional() private _parentForm: FormComponent | null,
  private _errorSummaryService: FudisInternalErrorSummaryService,
+ private _focusService: FudisFocusService,
  _idService: FudisIdService,
  _translationService: FudisTranslationService,
  _changeDetectorRef: ChangeDetectorRef,
@@ -62,9 +64,9 @@ export class FieldSetComponent
  @ContentChild(ContentDirective) protected _content: ContentDirective;
 
  /**
- * View for native fieldset HTMLelement
+ * Legend elementRef to trigger initialFocus
  */
- @ViewChild('fieldset') private _fieldset: ElementRef;
+ @ViewChild('fieldsetLegend') private _fieldsetLegend: ElementRef;
 
  /**
  * Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes.
@@ -142,8 +144,8 @@ export class FieldSetComponent
  }
 
  ngAfterViewInit(): void {
- if (this.initialFocus) {
- this._fieldset.nativeElement.focus();
+ if (this.initialFocus && !this._focusService.isIgnored(this.id)) {
+ this._fieldsetLegend.nativeElement.focus();
  }
  }
 

ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/common/select-base/select-base.directive.ts

@@ -121,6 +121,8 @@ export class SelectBaseDirective extends InputBaseDirective implements OnDestroy
  */
  public noResultsFound: boolean = true;
 
+ private _focusTryCounter: number = 0;
+
  /**
  * For setting dropdown open / closed
  */
@@ -352,6 +354,8 @@ export class SelectBaseDirective extends InputBaseDirective implements OnDestroy
  * To focus on first option when dropdown opens
  * @param cssFocusSelector CSS class to focus to
  */
+
+ // TODO: check if this could be achieved more elegantly
  protected _focusToFirstOption(cssFocusSelector: string, clickFirstOption?: boolean): void {
  const cssSelector = `.${cssFocusSelector}`;
 

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts

@@ -7,21 +7,17 @@ import {
 } from '../../types/miscellaneous';
 import { FudisTranslationService } from '../../services/translation/translation.service';
 import { TooltipApiDirective } from '../../directives/tooltip/tooltip-api.directive';
-import { FudisLanguageBadgeGroupService } from '../../services/language-badge-group/language-badge-group.service';
 
 @Component({
  selector: 'fudis-language-badge-group',
  templateUrl: './language-badge-group.component.html',
  styleUrls: ['./language-badge-group.component.scss'],
 })
 export class LanguageBadgeGroupComponent extends TooltipApiDirective implements OnInit {
- constructor(
- private _translationService: FudisTranslationService,
- private _languageBadgeGroupService: FudisLanguageBadgeGroupService,
- ) {
+ constructor(private _translationService: FudisTranslationService) {
  super();
  effect(() => {
- this._languageOptions = this._languageBadgeGroupService.getLanguages();
+ this._languageOptions = _translationService.getBadgeGroupLanguages();
  this._translations = _translationService.getTranslations();
  this._groupLabel = this._translations().LANGUAGE_BADGE.ARIA_LABEL.TRANSLATIONS;
  this._setLanguageOptions();

ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.html

@@ -1,6 +1,7 @@
 <ng-container *ngIf="externalLink">
  <a
  fudisLink
+ [id]="id"
  [color]="color"
  [size]="size"
  [classes]="['fudis-link__external']"
@@ -45,6 +46,7 @@
 <ng-container *ngIf="(link || fragmentId) && !externalLink">
  <a
  fudisLink
+ [id]="id"
  [color]="color"
  [size]="size"
  [classes]="['fudis-link__router']"
@@ -61,6 +63,7 @@
 <ng-container *ngIf="href && !link && !externalLink">
  <a
  fudisLink
+ [id]="id"
  [color]="color"
  [size]="size"
  [classes]="['fudis-link__href']"

ngx-fudis/projects/ngx-fudis/src/lib/directives/form/input-base/input-base.directive.ts

@@ -107,8 +107,6 @@ export class InputBaseDirective extends TooltipApiDirective implements OnDestroy
  */
  protected _required: boolean = false;
 
- protected _focusTryCounter: number = 0;
-
  protected _destroyed = new Subject<void>();
 
  /**
@@ -138,12 +136,6 @@ export class InputBaseDirective extends TooltipApiDirective implements OnDestroy
  public focusToInput(): void {
  if (this._inputRef?.nativeElement) {
  this._inputRef.nativeElement.focus();
- this._focusTryCounter = 0;
- } else if (this._focusTryCounter < 100) {
- setTimeout(() => {
- this._focusTryCounter += 1;
- this.focusToInput();
- }, 100);
  }
  }
 

ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link-api/link-api.directive.ts

@@ -19,4 +19,9 @@ export class LinkApiDirective {
  * Set browser focus to link on the first load.
  */
  @Input() initialFocus: boolean = false;
+
+ /**
+ * Id for the anchor element. By default generated with FudisIdService
+ */
+ @Input() id: string;
 }

ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts

@@ -1,12 +1,18 @@
 import { OnInit, AfterViewInit, Directive, ElementRef, OnChanges, Input } from '@angular/core';
 import { LinkApiDirective } from './link-api/link-api.directive';
 import { FudisComponentChanges } from '../../types/miscellaneous';
+import { FudisFocusService } from '../../services/focus/focus.service';
+import { FudisIdService } from '../../services/id/id.service';
 
 @Directive({
  selector: '[fudisLink]',
 })
 export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges, AfterViewInit {
- constructor(protected _bindedElement: ElementRef<HTMLAnchorElement>) {
+ constructor(
+ protected _bindedElement: ElementRef<HTMLAnchorElement>,
+ private _focusService: FudisFocusService,
+ private _idService: FudisIdService,
+ ) {
  super();
  }
 
@@ -15,19 +21,22 @@ export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges
  */
  @Input() classes: string[] = [];
 
- /**
- * Helper counter for setting link focus
- */
- private _focusTryCounter: number = 0;
-
  ngAfterViewInit(): void {
  if (this.initialFocus) {
- this._focusToLink();
+ this._focusToAnchorElement();
  }
  }
 
  ngOnInit(): void {
  this._setCssClasses();
+
+ if (this.id) {
+ this._idService.addNewId('link', this.id);
+ } else {
+ this.id = this._idService.getNewId('link');
+ }
+
+ this._bindedElement.nativeElement.setAttribute('id', this.id);
  }
 
  ngOnChanges(changes: FudisComponentChanges<LinkDirective>): void {
@@ -36,21 +45,6 @@ export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges
  }
  }
 
- /**
- * Set visible focus to the link
- */
- protected _focusToLink(): void {
- if (this._bindedElement?.nativeElement) {
- (this._bindedElement.nativeElement as HTMLAnchorElement).focus();
- this._focusTryCounter = 0;
- } else if (this._focusTryCounter < 100) {
- setTimeout(() => {
- this._focusTryCounter += 1;
- this._focusToLink();
- }, 100);
- }
- }
-
  /**
  * Set CSS classes
  */
@@ -71,4 +65,10 @@ export class LinkDirective extends LinkApiDirective implements OnInit, OnChanges
 
  (this._bindedElement.nativeElement as HTMLElement).classList.value = arrayToString;
  }
+
+ private _focusToAnchorElement(): void {
+ if (this._bindedElement?.nativeElement && !this._focusService.isIgnored(this.id)) {
+ (this._bindedElement.nativeElement as HTMLAnchorElement).focus();
+ }
+ }
 }

ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts

@@ -93,7 +93,6 @@ import { FooterComponent } from './components/footer/footer.component';
 import { LanguageBadgeGroupComponent } from './components/language-badge-group/language-badge-group.component';
 import { LanguageBadgeComponent } from './components/language-badge-group/language-badge/language-badge.component';
 import { FudisTranslationService } from './services/translation/translation.service';
-import { FudisLanguageBadgeGroupService } from './services/language-badge-group/language-badge-group.service';
 import { AlertComponent } from './components/alert/alert/alert.component';
 import { AlertGroupComponent } from './components/alert/alert-group/alert-group.component';
 import { FudisAlertService } from './services/alert/alert.service';
@@ -288,7 +287,6 @@ import { SelectOptionBaseDirective } from './components/form/select/common/selec
  FudisFocusService,
  FudisGridService,
  FudisIdService,
- FudisLanguageBadgeGroupService,
  FudisTranslationService,
  ],
 })