Fixed notification console screen reader issue (#193)

* Fixed notification console screen reader issue

* Added aria expanded

Co-authored-by: Daniel Si Pham <v-danpha@microsoft.com>

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -130,11 +130,14 @@ export class NotificationConsoleComponent extends React.Component<
               <span className="headerStatusEllipsis">{this.state.headerStatus}</span>
             </span>
           </div>
-          <div className="expandCollapseButton" role="button" tabIndex={0}>
+          <div
-            <img
+            className="expandCollapseButton"
-              src={this.state.isExpanded ? ChevronDownIcon : ChevronUpIcon}
+            role="button"
-              alt={this.state.isExpanded ? "collapse console" : "expand console"}
+            tabIndex={0}
-            />
+            aria-label={this.state.isExpanded ? "collapse console" : "expand console"}
+            aria-expanded={this.state.isExpanded}
+          >
+            <img src={this.state.isExpanded ? ChevronDownIcon : ChevronUpIcon} alt="" />
           </div>
         </div>
         <AnimateHeight

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

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