random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
DanielSPham 2020-09-11 10:36:53 -07:00 committed by GitHub
parent a2845a0102
commit af820c0fbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
View File

@ -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}>
<img
src={this.state.isExpanded ? ChevronDownIcon : ChevronUpIcon}
alt={this.state.isExpanded ? "collapse console" : "expand console"}
/>
<div
className="expandCollapseButton"
role="button"
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

4
src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
View File

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