[Azure][Screen Reader-CosmosDB – Data Explorer] Alt is not correctly defined for the console image on the data explorer page (#247)

* Update NotificationConsoleComponent.tsx

'Accessibiliy for alt image'

* Update NotificationConsoleComponent.tsx

'meet Unit test problems'

* Update NotificationConsoleComponent.test.tsx.snap

Update for snapshot

Co-authored-by: Chris896 <caoyiqun2017@gmail.com>

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -134,10 +134,13 @@ export class NotificationConsoleComponent extends React.Component<
             className="expandCollapseButton"
             role="button"
             tabIndex={0}
-            aria-label={this.state.isExpanded ? "collapse console" : "expand console"}
+            aria-label={"console button" + (this.state.isExpanded ? " collapsed" : " expanded")}
-            aria-expanded={this.state.isExpanded}
+            aria-expanded={!this.state.isExpanded}
           >
-            <img src={this.state.isExpanded ? ChevronDownIcon : ChevronUpIcon} alt="" />
+            <img
+              src={this.state.isExpanded ? ChevronDownIcon : ChevronUpIcon}
+              alt={this.state.isExpanded ? "ChevronDownIcon" : "ChevronUpIcon"}
+            />
           </div>
         </div>
         <AnimateHeight

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

@@ -68,14 +68,14 @@ exports[`NotificationConsoleComponent renders the console (expanded) 1`] = `
       </span>
     </div>
     <div
-      aria-expanded={true}
+      aria-expanded={false}
-      aria-label="collapse console"
+      aria-label="console button collapsed"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
     >
       <img
-        alt=""
+        alt="ChevronDownIcon"
         src=""
       />
     </div>