fix(radio-button, circle-toggle): add tabindex="-1" to label element …

…in radio groups (#1340) The tabindex is necessary that on focusout events the relatedTarget gets set properly in browsers.
allianz · Sep 30, 2024 · e3ada6b · e3ada6b
1 parent 9d190ed
commit e3ada6b
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/projects/ng-aquila/src/circle-toggle/circle-toggle/circle-toggle.component.html b/projects/ng-aquila/src/circle-toggle/circle-toggle/circle-toggle.component.html
@@ -13,7 +13,7 @@
     (keydown.enter)="handleEnterKey($event)"
     (click)="toggle($event)"
 />
-<label class="nx-circle-toggle__label" [for]="id + '-input'" [id]="id + '-label'">
+<label class="nx-circle-toggle__label" [for]="id + '-input'" [id]="id + '-label'" tabindex="-1">
     <nx-icon-toggle-button
         [label]="label"
         [hint]="hint"

diff --git a/projects/ng-aquila/src/radio-button/radio-button.html b/projects/ng-aquila/src/radio-button/radio-button.html
@@ -15,7 +15,7 @@
     [attr.aria-disabled]="disabled || readonly || null"
     class="nx-radio__input"
 />
-<label [id]="labelId" [attr.for]="inputId" class="nx-radio__label" [class.has-label]="labelHasContent">
+<label [id]="labelId" [attr.for]="inputId" tabindex="-1" class="nx-radio__label" [class.has-label]="labelHasContent">
     <div class="nx-radio__circle">
         @if (checked) {
         <div class="nx-radio__dot"></div>