From 9b1f9bbdbe87a7456324d7cb18c472921e3c54d8 Mon Sep 17 00:00:00 2001
From: Iakovleva Margarita <naruyaoi@yandex.ru>
Date: Fri, 19 Jul 2019 16:13:09 +0300
Subject: [PATCH] fix(cdk): add cdk- -focused classes to radio and disable
 focus on alert #94  (#178)

---
 packages/mosaic/core/styles/_alerts.scss |  6 +-----
 packages/mosaic/radio/_radio-theme.scss  |  2 +-
 packages/mosaic/radio/radio.component.ts | 25 ++++++++++++++++++------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/mosaic/core/styles/_alerts.scss b/packages/mosaic/core/styles/_alerts.scss
index 855f1ce53..3eea5bd95 100644
--- a/packages/mosaic/core/styles/_alerts.scss
+++ b/packages/mosaic/core/styles/_alerts.scss
@@ -98,11 +98,7 @@
 
     $is-dark: map-get($theme, is-dark);
 
-    .mc-alert__close:focus {
-        border: 1px solid mc-color($primary);
-        box-shadow: 0 0 0 1px mc-color($primary);
-        z-index: 1;
-    }
+    
 
     .mc-alert {
         color: mc-color($foreground, text);
diff --git a/packages/mosaic/radio/_radio-theme.scss b/packages/mosaic/radio/_radio-theme.scss
index 7547d2d9c..9c611f58b 100644
--- a/packages/mosaic/radio/_radio-theme.scss
+++ b/packages/mosaic/radio/_radio-theme.scss
@@ -43,7 +43,7 @@
             }
         }
 
-        & .mc-radio-input:focus {
+        &.cdk-keyboard-focused .mc-radio-input {
             + .mc-radio-label-content .mc-radio-button__outer-circle {
                 border-color: $focus-color;
 
diff --git a/packages/mosaic/radio/radio.component.ts b/packages/mosaic/radio/radio.component.ts
index c3fb5e64b..aec5b8f76 100644
--- a/packages/mosaic/radio/radio.component.ts
+++ b/packages/mosaic/radio/radio.component.ts
@@ -1,6 +1,7 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import {
-    AfterContentInit,
+    AfterContentInit, AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component, ContentChildren, Directive, ElementRef, EventEmitter, forwardRef,
@@ -302,12 +303,11 @@ export const _McRadioButtonMixinBase:
         class: 'mc-radio-button',
         '[attr.id]': 'id',
         '[class.mc-checked]': 'checked',
-        '[class.mc-disabled]': 'disabled',
-        '(focus)': '_inputElement.nativeElement.focus()'
+        '[class.mc-disabled]': 'disabled'
     }
 })
 export class McRadioButton extends _McRadioButtonMixinBase
-    implements OnInit, OnDestroy, CanColor, HasTabIndex {
+    implements OnInit, AfterViewInit, OnDestroy, CanColor, HasTabIndex {
 
     /** Whether this radio button is checked. */
     @Input()
@@ -439,6 +439,7 @@ export class McRadioButton extends _McRadioButtonMixinBase
         @Optional() radioGroup: McRadioGroup,
         elementRef: ElementRef,
         private readonly _changeDetector: ChangeDetectorRef,
+        private focusMonitor: FocusMonitor,
         private readonly _radioDispatcher: UniqueSelectionDispatcher
     ) {
 
@@ -463,13 +464,25 @@ export class McRadioButton extends _McRadioButtonMixinBase
         }
     }
 
+    ngAfterViewInit() {
+        this.focusMonitor
+            .monitor(this._elementRef, true)
+            .subscribe((focusOrigin) => {
+                if (!focusOrigin && this.radioGroup) {
+                    this.radioGroup.touch();
+                }
+            });
+    }
+
     ngOnDestroy() {
+        this.focusMonitor.stopMonitoring(this._elementRef);
         this.removeUniqueSelectionListener();
     }
 
     /** Focuses the radio button. */
-    // tslint:disable-next-line
-    focus(): void {}
+    focus(): void {
+        this._inputElement.nativeElement.focus();
+    }
 
     /**
      * Marks the radio button as needing checking for change detection.