random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 17:01:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance accessibility and focus styles for Notification Console component (#2066)

Browse Source 
Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
This commit is contained in:
SATYA SB
2025-03-11 12:28:44 +05:30
committed by GitHub
parent b5d7423849
commit ced2725476
4 changed files with 18 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,10 +81,6 @@ export class NotificationConsoleComponent extends React.Component<
}
}
public setElememntRef = (element: HTMLElement): void => {
this.consoleHeaderElement = element;
};
public render(): JSX.Element {
const numInProgress = this.state.allConsoleData.filter(
(data: ConsoleData) => data.type === ConsoleDataType.InProgress,
@@ -101,7 +97,9 @@ export class NotificationConsoleComponent extends React.Component<
<div
className="notificationConsoleHeader"
id="notificationConsoleHeader"
ref={this.setElememntRef}
role="button"
aria-label="Console"
aria-expanded={this.props.isConsoleExpanded}
onClick={() => this.expandCollapseConsole()}
onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
tabIndex={0}
@@ -129,14 +127,7 @@ export class NotificationConsoleComponent extends React.Component<
</span>
</span>
</div>
<div
className="expandCollapseButton"
data-test="NotificationConsole/ExpandCollapseButton"
role="button"
tabIndex={0}
aria-label="Console"
aria-expanded={this.props.isConsoleExpanded}
>
<div className="expandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton">
<img
src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
@@ -259,9 +250,6 @@ export class NotificationConsoleComponent extends React.Component<
}
private onConsoleWasExpanded = (): void => {
if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
this.consoleHeaderElement.focus();
}
useNotificationConsole.getState().setConsoleAnimationFinished(true);
};