Merge pull request #150 from Lemoncode/feature/#149-a11y-add-role-log

Feature/#149 a11y add role log

Author: brauliodiez

front/src/pods/student/student.component.spec.tsx

@@ -17,7 +17,7 @@ describe('StudentComponent tests', () => {
 
     // Assert
     const sessionName = screen.getByRole('heading');
-    const textArea = screen.getByRole('textbox');
+    const textArea = screen.getByRole('log');
 
     expect(sessionName).toHaveTextContent(expectedSessionNameText);
     expect(textArea).toHaveValue(props.log);
@@ -69,7 +69,7 @@ describe('StudentComponent tests', () => {
     render(<StudentComponent {...props} />);
 
     // Assert
-    const textArea = screen.getByRole('textbox');
+    const textArea = screen.getByRole('log');
     expect(textArea).toHaveTextContent('');
   });
 
@@ -84,7 +84,7 @@ describe('StudentComponent tests', () => {
     render(<StudentComponent {...props} />);
 
     // Assert
-    const textArea = screen.getByRole('textbox');
+    const textArea = screen.getByRole('log');
     expect(textArea).toHaveTextContent('');
   });
 });

front/src/pods/student/student.component.tsx

@@ -16,29 +16,39 @@ interface Props {
 export const StudentComponent: React.FC<Props> = props => {
   const { room, log } = props;
 
-  const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll();
+  const {
+    isAutoScrollEnabled,
+    setIsAutoScrollEnabled,
+    textAreaRef,
+    doAutoScroll,
+  } = useAutoScroll();
 
   React.useEffect(() => {
     doAutoScroll();
   }, [log]);
 
   return (
-
     <>
       <main className={innerClasses.root}>
-        <Typography className={innerClasses.sessionName} variant="body1" role="heading">
+        <Typography
+          className={innerClasses.sessionName}
+          variant="body1"
+          role="heading"
+        >
           Session name: {room ?? ''}
         </Typography>
         <label className={innerClasses.label} htmlFor="session">
           Content
         </label>
         <TextareaAutosize
+          role="log"
           ref={textAreaRef}
           id="session"
           rowsMax={30}
           rowsMin={30}
           className={innerClasses.textarea}
           value={log ?? ''}
+          readOnly={true}
         />
         <FormControlLabel
           label="Disable AutoScroll"

front/src/pods/trainer/components/session.component.spec.tsx

@@ -16,7 +16,7 @@ describe('SessionComponent unit tests', () => {
 
     render(<SessionComponent {...props} />);
 
-    const textArea = screen.getByRole('textbox');
+    const textArea = screen.getByRole('log');
     const sendFullContentButton = screen.getAllByRole('button')[1];
 
     userEvent.type(textArea, 'How are you doing?');
@@ -40,7 +40,7 @@ describe('SessionComponent unit tests', () => {
 
     render(<SessionComponent {...props} />);
 
-    const textArea = screen.getByRole('textbox');
+    const textArea = screen.getByRole('log');
     const sendFullContentButton = screen.getAllByRole('button')[1];
 
     userEvent.type(textArea, 'How are you doing?');
@@ -64,7 +64,7 @@ describe('SessionComponent unit tests', () => {
 
     render(<SessionComponent {...props} />);
 
-    const textArea = screen.getByRole('textbox');
+    const textArea = screen.getByRole('log');
     const undoButton = screen.getAllByRole('button')[0];
 
     userEvent.type(textArea, 'How are you doing?');

front/src/pods/trainer/components/session.component.tsx

@@ -48,6 +48,7 @@ export const SessionComponent: React.FC<Props> = props => {
       </label>
 
       <TextareaAutosize
+        role="log"
         ref={textAreaRef}
         id="session"
         rowsMax={20}