Skip to content

Commit

Permalink
fix(cdk): add cdk- -focused classes to radio and disable focus on alert
Browse files Browse the repository at this point in the history
  • Loading branch information
Margar1ta authored and pimenovoleg committed Jul 19, 2019
1 parent c76b96a commit 9b1f9bb
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 12 deletions.
6 changes: 1 addition & 5 deletions packages/mosaic/core/styles/_alerts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/mosaic/radio/_radio-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
25 changes: 19 additions & 6 deletions packages/mosaic/radio/radio.component.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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
) {

Expand All @@ -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.
Expand Down

0 comments on commit 9b1f9bb

Please sign in to comment.