diff --git a/less/Common/Constants.less b/less/Common/Constants.less index 222b13c32..f77e82c8b 100644 --- a/less/Common/Constants.less +++ b/less/Common/Constants.less @@ -248,6 +248,10 @@ outline: 1px dashed @FocusColor; } +.focusedBorder() { + border: 1px dashed @FocusColor; +} + /************************************************************************************************ Common Toggle Switch *************************************************************************************************/ diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less index 2e9413020..a03573a72 100644 --- a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less +++ b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less @@ -36,6 +36,10 @@ &:active { background-color:@NotificationHigh; } + + &:focus { + .focusedBorder(); + } .statusBar { .dataTypeIcons { diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx index 1821fd14c..e2f63926f 100644 --- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx +++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx @@ -81,10 +81,6 @@ export class NotificationConsoleComponent extends React.Component< } } - public setElememntRef = (element: HTMLElement): void => { - this.consoleHeaderElement = element; - }; - public render(): JSX.Element { const numInProgress = this.state.allConsoleData.filter( (data: ConsoleData) => data.type === ConsoleDataType.InProgress, @@ -101,7 +97,9 @@ export class NotificationConsoleComponent extends React.Component<
this.expandCollapseConsole()} onKeyDown={(event: React.KeyboardEvent) => this.onExpandCollapseKeyPress(event)} tabIndex={0} @@ -129,14 +127,7 @@ export class NotificationConsoleComponent extends React.Component<
-
+
{this.props.isConsoleExpanded { - if (this.props.isConsoleExpanded && this.consoleHeaderElement) { - this.consoleHeaderElement.focus(); - } useNotificationConsole.getState().setConsoleAnimationFinished(true); }; diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap index 268b110b0..b2672aeec 100644 --- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap +++ b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap @@ -5,10 +5,13 @@ exports[`NotificationConsoleComponent renders the console 1`] = ` className="notificationConsoleContainer" >
Expand icon