random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-23 01:53:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

[accessibility-3739618]:[Screen Reader - Azure Cosmos DB- Data Explorer - Graphs]: Screen Reader announces both expanded and collapsed information simultaneously for expand/collapse button in bottom notification region under 'Data Explorer' pane. (#2048)

Browse Source 
Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
This commit is contained in:
SATYA SB 2025-02-19 11:25:44 +05:30 committed by GitHub
parent 4ac41031e6
commit 8da078579e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,15 +109,15 @@ export class NotificationConsoleComponent extends React.Component<
<div className="statusBar"> <div className="statusBar">
<span className="dataTypeIcons"> <span className="dataTypeIcons">
<span className="notificationConsoleHeaderIconWithData"> <span className="notificationConsoleHeaderIconWithData">
<img src={LoadingIcon} alt="in progress items" /> <img src={LoadingIcon} alt="In progress items" />
<span className="numInProgress">{numInProgress}</span> <span className="numInProgress">{numInProgress}</span>
</span> </span>
<span className="notificationConsoleHeaderIconWithData"> <span className="notificationConsoleHeaderIconWithData">
<img src={ErrorBlackIcon} alt="error items" /> <img src={ErrorBlackIcon} alt="Error items" />
<span className="numErroredItems">{numErroredItems}</span> <span className="numErroredItems">{numErroredItems}</span>
</span> </span>
<span className="notificationConsoleHeaderIconWithData"> <span className="notificationConsoleHeaderIconWithData">
<img src={infoBubbleIcon} alt="info items" /> <img src={infoBubbleIcon} alt="Info items" />
<span className="numInfoItems">{numInfoItems}</span> <span className="numInfoItems">{numInfoItems}</span>
</span> </span>
</span> </span>
@ -134,12 +134,12 @@ export class NotificationConsoleComponent extends React.Component<
data-test="NotificationConsole/ExpandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton"
role="button" role="button"
tabIndex={0} tabIndex={0}
aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")} aria-label="Console"
aria-expanded={!this.props.isConsoleExpanded} aria-expanded={this.props.isConsoleExpanded}
> >
<img <img
src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon} src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
alt={this.props.isConsoleExpanded ? "ChevronDownIcon" : "ChevronUpIcon"} alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
/> />
</div> </div>
</div> </div>

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

@ -21,7 +21,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
className="notificationConsoleHeaderIconWithData" className="notificationConsoleHeaderIconWithData"
> >
<img <img
alt="in progress items" alt="In progress items"
src={{}} src={{}}
/> />
<span <span
@ -34,7 +34,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
className="notificationConsoleHeaderIconWithData" className="notificationConsoleHeaderIconWithData"
> >
<img <img
alt="error items" alt="Error items"
src={{}} src={{}}
/> />
<span <span
@ -47,7 +47,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
className="notificationConsoleHeaderIconWithData" className="notificationConsoleHeaderIconWithData"
> >
<img <img
alt="info items" alt="Info items"
src={{}} src={{}}
/> />
<span <span
@ -71,15 +71,15 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
</span> </span>
</div> </div>
<div <div
aria-expanded={true} aria-expanded={false}
aria-label="console button collapsed" aria-label="Console"
className="expandCollapseButton" className="expandCollapseButton"
data-test="NotificationConsole/ExpandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton"
role="button" role="button"
tabIndex={0} tabIndex={0}
> >
<img <img
alt="ChevronUpIcon" alt="Expand icon"
src="" src=""
/> />
</div> </div>
@ -192,7 +192,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
className="notificationConsoleHeaderIconWithData" className="notificationConsoleHeaderIconWithData"
> >
<img <img
alt="in progress items" alt="In progress items"
src={{}} src={{}}
/> />
<span <span
@ -205,7 +205,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
className="notificationConsoleHeaderIconWithData" className="notificationConsoleHeaderIconWithData"
> >
<img <img
alt="error items" alt="Error items"
src={{}} src={{}}
/> />
<span <span
@ -218,7 +218,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
className="notificationConsoleHeaderIconWithData" className="notificationConsoleHeaderIconWithData"
> >
<img <img
alt="info items" alt="Info items"
src={{}} src={{}}
/> />
<span <span
@ -244,15 +244,15 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
</span> </span>
</div> </div>
<div <div
aria-expanded={true} aria-expanded={false}
aria-label="console button collapsed" aria-label="Console"
className="expandCollapseButton" className="expandCollapseButton"
data-test="NotificationConsole/ExpandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton"
role="button" role="button"
tabIndex={0} tabIndex={0}
> >
<img <img
alt="ChevronUpIcon" alt="Expand icon"
src="" src=""
/> />
</div> </div>