Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AB#30600576 Adding screen reader capability for ACA console and log stream #7939

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

AB#30600576 Adding screen reader capability for ACA console and log stream #7939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions client-react/src/pages/container-app/console/ConsoleDataLoader.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { IDialogContentStyleProps, IDialogContentStyles, IDialogFooterStyleProps, IDialogFooterStyles } from '@fluentui/react/lib/Dialog';
import { mergeStyleSets } from '@fluentui/react/lib/Styling';
import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
import { CSSProperties } from 'react';

export const consoleStyles = mergeStyleSets({
customTextField: {
Expand All @@ -13,6 +14,14 @@ export const consoleStyles = mergeStyleSets({
},
});

export const liveRegionStyle: CSSProperties = {
position: 'absolute',
left: '-9999px',
width: '1px',
height: '1px',
overflow: 'hidden',
};

export const dialogFooterStyles = (): IStyleFunctionOrObject<IDialogFooterStyleProps, IDialogFooterStyles> => {
return { actions: { marginTop: '34px' }, actionsRight: { textAlign: 'left' } };
};
Expand Down
21 changes: 21 additions & 0 deletions client-react/src/pages/container-app/console/ConsoleDataLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
...(terminalRef.current.terminal.options || {}),
cursorStyle: 'underline',
cursorBlink: true,
screenReaderMode: true,
};

resizeHandler(width, height);
Expand All @@ -67,6 +68,7 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
terminalRef.current.terminal.options = {
...(terminalRef.current.terminal.options || {}),
disableStdin: true,
screenReaderMode: true,
};

resizeHandler(width, height);
Expand Down Expand Up @@ -126,6 +128,13 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {

const updateConsoleText = (text: string) => {
terminalRef.current?.terminal.write(text);
const liveRegion = document.getElementById('live-region');
if (liveRegion) {
liveRegion.textContent = `${liveRegion.textContent || ''}${text}`;
setTimeout(() => {
liveRegion.textContent = '';
}, 1000); // Clear after 1 second
}
};

const onData = (data: string) => {
Expand Down Expand Up @@ -215,6 +224,7 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
terminalRef.current.terminal.options = {
...(terminalRef.current.terminal.options || {}),
disableStdin: false,
screenReaderMode: true,
};
}
}
Expand Down Expand Up @@ -268,6 +278,17 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
return (
<div className={containerAppStyles.divContainer}>
<XTerm ref={terminalRef} onData={onData} onKey={onKey} />
<div
id="live-region"
aria-live="polite"
style={{
position: 'absolute',
left: '-9999px',
width: '1px',
height: '1px',
overflow: 'hidden',
}}
/>
<Dialog hidden={hideDialog} dialogContentProps={dialogContentProps} modalProps={modalProps} forceFocusInsideTrap={false}>
{isDebug ? (
<Text>{t('containerApp_console_debugConsoleDescription')}</Text>
Expand Down
13 changes: 13 additions & 0 deletions client-react/src/pages/container-app/log-stream/LogStream.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { getTerminalDimensions } from '../xtermHelper';
import { PortalContext } from '../../../PortalContext';
import { containerAppStyles } from '../ContainerApp.styles';
import { TextUtilitiesService } from '../../../utils/textUtilities';
import { liveRegionStyle } from '../console/ConsoleDataLoader.styles';

export interface LogStreamProps {
resourceId: string;
Expand All @@ -18,6 +19,7 @@ const LogStream: React.FC<LogStreamProps> = props => {

const { width, height } = useWindowSize();
const terminalRef = useRef<XTerm>(null);
const liveRegionRef = useRef<HTMLDivElement>(null);
const timeoutRef = useRef<NodeJS.Timeout>();
const xtermReady = useRef(false);

Expand Down Expand Up @@ -63,6 +65,16 @@ const LogStream: React.FC<LogStreamProps> = props => {
useEffect(() => {
if (terminalRef.current?.terminal && props.line) {
terminalRef.current?.terminal.writeln(props.line);

if (liveRegionRef.current) {
liveRegionRef.current.textContent = props.line;

setTimeout(() => {
if (liveRegionRef.current) {
liveRegionRef.current.textContent = '';
}
}, 1000); // Clear after 1 second
}
}
}, [props.line]);

Expand All @@ -86,6 +98,7 @@ const LogStream: React.FC<LogStreamProps> = props => {

return (
<div className={containerAppStyles.divContainer}>
<div ref={liveRegionRef} aria-live="polite" style={liveRegionStyle} />
<XTerm
options={{
disableStdin: true,
Expand Down
Loading