3556812

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -1,6 +1,6 @@
 @import "../../../../less/Common/Constants";
 
-@ConsoleHeaderHeight: 32px;
+// @ConsoleHeaderHeight: 32px;
 @ConsoleContentsPaneHeight: 220px;
 @ConsoleStatusMaxWidth: 672px;
 
@@ -22,7 +22,7 @@
         justify-content: space-between;
         align-items: center;
         flex-shrink: 0;
-        height: @ConsoleHeaderHeight;
+        // height: @ConsoleHeaderHeight;
         width: 100%;
         background-color: @NotificationLow;
         border-top: @ButtonBorderWidth @BaseMedium solid;
@@ -38,6 +38,9 @@
         }
 
         .statusBar {
+            width: 100%;
+            padding: 6px 0px;
+
             .dataTypeIcons {
                 cursor: pointer;
                 margin: 0px @DefaultSpace 0px @MediumSpace;
@@ -76,11 +79,14 @@
                     max-width: @ConsoleStatusMaxWidth;
                 }
             }
+            &:focus {
+                outline: none;
+            }
         }
 
         .expandCollapseButton {
             cursor: pointer;
-            padding-right: 5px;
+            padding: 6px 5px 6px 0px;
 
             img {
                 width: @ExpandCollapseIconSize;

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -81,9 +81,9 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement): void => {
+  // public setElememntRef = (element: HTMLElement): void => {
-    this.consoleHeaderElement = element;
+  //   this.consoleHeaderElement = element;
-  };
+  // };
 
   public render(): JSX.Element {
     const numInProgress = this.state.allConsoleData.filter(
@@ -98,26 +98,25 @@ export class NotificationConsoleComponent extends React.Component<
 
     return (
       <div className="notificationConsoleContainer">
-        <div
+        <div className="notificationConsoleHeader" id="notificationConsoleHeader">
-          className="notificationConsoleHeader"
+          <div
-          id="notificationConsoleHeader"
+            className="statusBar"
-          ref={this.setElememntRef}
+            // ref={this.setElememntRef}
-          onClick={() => this.expandCollapseConsole()}
+            onClick={() => this.expandCollapseConsole()}
-          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
+            onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
-          tabIndex={0}
+            tabIndex={0}
-        >
+          >
-          <div className="statusBar">
             <span className="dataTypeIcons">
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={LoadingIcon} alt="in progress items" />
+                <img src={LoadingIcon} alt="In progress items" />
                 <span className="numInProgress">{numInProgress}</span>
               </span>
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={ErrorBlackIcon} alt="error items" />
+                <img src={ErrorBlackIcon} alt="Error items" />
                 <span className="numErroredItems">{numErroredItems}</span>
               </span>
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={infoBubbleIcon} alt="info items" />
+                <img src={infoBubbleIcon} alt="Info items" />
                 <span className="numInfoItems">{numInfoItems}</span>
               </span>
             </span>
@@ -134,12 +133,14 @@ export class NotificationConsoleComponent extends React.Component<
             data-test="NotificationConsole/ExpandCollapseButton"
             role="button"
             tabIndex={0}
-            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
+            aria-label="Console"
-            aria-expanded={!this.props.isConsoleExpanded}
+            aria-expanded={this.props.isConsoleExpanded}
+            onClick={() => this.expandCollapseConsole()}
+            onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           >
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
-              alt={this.props.isConsoleExpanded ? "ChevronDownIcon" : "ChevronUpIcon"}
+              alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
             />
           </div>
         </div>
@@ -259,9 +260,9 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private onConsoleWasExpanded = (): void => {
-    if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
+    // if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
-      this.consoleHeaderElement.focus();
+    //   this.consoleHeaderElement.focus();
-    }
+    // }
     useNotificationConsole.getState().setConsoleAnimationFinished(true);
   };
 

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="in progress items"
+            alt="In progress items"
             src={{}}
           />
           <span
@@ -34,7 +34,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="error items"
+            alt="Error items"
             src={{}}
           />
           <span
@@ -47,7 +47,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="info items"
+            alt="Info items"
             src={{}}
           />
           <span
@@ -71,15 +71,15 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       </span>
     </div>
     <div
-      aria-expanded={true}
+      aria-expanded={false}
-      aria-label="console button collapsed"
+      aria-label="Console"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
       role="button"
       tabIndex={0}
     >
       <img
-        alt="ChevronUpIcon"
+        alt="Expand icon"
         src=""
       />
     </div>
@@ -192,7 +192,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="in progress items"
+            alt="In progress items"
             src={{}}
           />
           <span
@@ -205,7 +205,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="error items"
+            alt="Error items"
             src={{}}
           />
           <span
@@ -218,7 +218,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="info items"
+            alt="Info items"
             src={{}}
           />
           <span
@@ -244,15 +244,15 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       </span>
     </div>
     <div
-      aria-expanded={true}
+      aria-expanded={false}
-      aria-label="console button collapsed"
+      aria-label="Console"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
       role="button"
       tabIndex={0}
     >
       <img
-        alt="ChevronUpIcon"
+        alt="Expand icon"
         src=""
       />
     </div>