accessibility changes

Author: StewartMckenzie

client-react/src/pages/container-app/console/ConsoleDataLoader.styles.ts

@@ -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: {
@@ -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' } };
 };

client-react/src/pages/container-app/console/ConsoleDataLoader.tsx

@@ -44,6 +44,7 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
         ...(terminalRef.current.terminal.options || {}),
         cursorStyle: 'underline',
         cursorBlink: true,
+        screenReaderMode: true,
       };
 
       resizeHandler(width, height);
@@ -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);
@@ -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) => {
@@ -215,6 +224,7 @@ const ConsoleDataLoader: React.FC<ConsoleDataLoaderProps> = props => {
           terminalRef.current.terminal.options = {
             ...(terminalRef.current.terminal.options || {}),
             disableStdin: false,
+            screenReaderMode: true,
           };
         }
       }
@@ -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>

client-react/src/pages/container-app/log-stream/LogStream.tsx

@@ -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;
@@ -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);
 
@@ -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]);
 
@@ -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,