fix(radio-group): keyboard navigation issues in dialog (#12815)

* fix(radio-group): keyboard navigation issues in dialog

* fix(radio-group): prevent focusing two buttons at a time

* style(radio-group): update style

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: SisIvanova

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts

@@ -1,7 +1,7 @@
 import {
     AfterContentInit,
     AfterViewInit,
-    ContentChildren, Directive, EventEmitter, HostBinding, HostListener, Input, NgModule, OnDestroy, Optional, Output, QueryList, Self
+    ContentChildren, Directive, DoCheck, EventEmitter, HostBinding, HostListener, Input, NgModule, OnDestroy, Optional, Output, QueryList, Self
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { fromEvent, noop, Subject } from 'rxjs';
@@ -49,7 +49,7 @@ let nextId = 0;
     exportAs: 'igxRadioGroup',
     selector: 'igx-radio-group, [igxRadioGroup]'
 })
-export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit, ControlValueAccessor, OnDestroy {
+export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit, ControlValueAccessor, OnDestroy, DoCheck {
     private static ngAcceptInputType_required: boolean | '';
     private static ngAcceptInputType_invalid: boolean | '';
     /**
@@ -204,10 +204,10 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
     @HostListener('keydown', ['$event'])
     protected handleKeyDown(event: KeyboardEvent) {
         const { key } = event;
+        const buttons = this.radioButtons.filter(radio => !radio.disabled);
+        const checked = buttons.find((radio) => radio.checked);
 
         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
-            const buttons = this.radioButtons.filter(radio => !radio.disabled);
-            const checked = buttons.find((radio) => radio.checked);
             let index = checked ? buttons.indexOf(checked!) : -1;
             const ltr = this._directionality.value === 'ltr';
 
@@ -238,6 +238,14 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
             buttons[index].select();
             event.preventDefault();
         }
+
+        if (event.key === "Tab") {
+            buttons.forEach((radio) => {
+                if (radio !== checked) {
+                    event.stopPropagation();
+                }
+            });
+        }
     }
 
     /**
@@ -352,6 +360,12 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
                 .subscribe(() => {
                     this.updateValidityOnBlur()
                 });
+
+                fromEvent(button.nativeElement, 'keyup')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((event: KeyboardEvent) => {
+                    this.updateOnKeyUp(event)
+                });
             });
         }
     }
@@ -371,6 +385,45 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    private updateOnKeyUp(event: KeyboardEvent) {
+        const checked = this.radioButtons.find(x => x.checked);
+
+        if (event.key === "Tab") {
+            this.radioButtons.forEach((radio) => {
+                if (radio === checked) {
+                    checked.focused = true;
+                }
+            });
+        }
+    }
+
+    public ngDoCheck(): void {
+        this._updateTabIndex();
+    }
+
+    private _updateTabIndex() {
+        // Needed so that the keyboard navigation of a radio group
+        // placed inside a dialog works properly
+        if (this.radioButtons) {
+            const checked = this.radioButtons.find(x => x.checked);
+
+            if (checked) {
+                this.radioButtons.forEach((button) => {
+                    checked.nativeElement.tabIndex = 0;
+
+                    if (button !== checked) {
+                        button.nativeElement.tabIndex = -1;
+                        button.focused = false;
+                    }
+                });
+            }
+        }
+    }
+
     /**
      * Sets the "checked" property value on the radio input element.
      *