From 6b8c9f6961cb1b9c5dd00ed01ca536fddfdfb343 Mon Sep 17 00:00:00 2001
From: Chris-MS-896 <64865559+Chris-MS-896@users.noreply.github.com>
Date: Mon, 5 Oct 2020 16:14:51 -0500
Subject: [PATCH] =?UTF-8?q?[Azure][Screen=20Reader-CosmosDB=20=E2=80=93=20?=
 =?UTF-8?q?Data=20Explorer]=20Alt=20is=20not=20correctly=20defined=20for?=
 =?UTF-8?q?=20the=20console=20image=20on=20the=20data=20explorer=20page=20?=
 =?UTF-8?q?(#247)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../NotificationConsole/NotificationConsoleComponent.tsx | 9 ++++++---
 .../NotificationConsoleComponent.test.tsx.snap           | 6 +++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
index 6a13b7713..de411f2c4 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/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-expanded={this.state.isExpanded}
+            aria-label={"console button" + (this.state.isExpanded ? " collapsed" : " expanded")}
+            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
diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
index e02e1cbdb..51d6908eb 100644
--- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
+++ b/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-label="collapse console"
+      aria-expanded={false}
+      aria-label="console button collapsed"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
     >
       <img
-        alt=""
+        alt="ChevronDownIcon"
         src=""
       />
     </div>