[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>
This commit is contained in:
Chris-MS-896 2020-10-05 16:14:51 -05:00 committed by GitHub
parent 2f978bac69
commit 6b8c9f6961
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 6 deletions

View File

@ -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

View File

@ -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>