remove focus first for screenreaders, style tweaks

Author: jivey

src/components/Card.tsx

@@ -245,8 +245,6 @@ const StepCard = ({
   overlayChildren,
   ...otherProps }: StepCardProps) => {
 
-  // Helps to stop focusing first child when is already focused
-  const [previousFocusedElement, setPreviousFocusedElement] = useState<HTMLElement | null>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
   const [showOverlay, setShowOverlay] = useState<boolean>(false);
 
@@ -260,20 +258,9 @@ const StepCard = ({
     }
   };
 
-  const handleOverlayFocus = useCallback((event: FocusEvent) => {
+  const handleOverlayFocus = useCallback(() => {
     setShowOverlay(true);
-    const firstOverlayFocusableElement = document.getElementById('overlay-element')?.querySelector(
-      'button, [href], input, select, textarea'
-    ) as HTMLElement;
-
-    if (
-      (firstOverlayFocusableElement !== previousFocusedElement) && 
-      (event.target === overlayRef.current)
-    ) {
-      setPreviousFocusedElement(firstOverlayFocusableElement);
-      firstOverlayFocusableElement.focus();
-    }
-  }, [overlayRef, previousFocusedElement]);
+  }, []);
 
   const hideFocusableElements = useCallback(() => {
     const focusableElements = Array.from(document.getElementById("step-card")?.querySelectorAll(

src/components/Exercise/styles.ts

@@ -2,13 +2,12 @@ import { colors } from "../../theme";
 import { css } from "styled-components";
 
 export const exerciseStyles = css`
-
   &.is-selected {
     background-color: ${colors.card.header.background};
-    
-    .step-card-footer-inner, 
-    .step-card-body, 
-    .step-card-header, 
+
+    .step-card-footer-inner,
+    .step-card-body,
+    .step-card-header,
     .answer-letter-wrapper::before {
       background-color: ${colors.card.header.background} !important;
     }
@@ -17,6 +16,10 @@ export const exerciseStyles = css`
   &.preview-card {
     --spacing: 0.8rem;
 
+    [data-task-step-id] {
+      padding: 0;
+    }
+
     .step-card-header,
     .step-card-body {
       background-color: ${colors.palette.white};
@@ -86,6 +89,12 @@ export const exerciseStyles = css`
         }
       }
 
+      &.has-correct-answer .answer-correct:not(.answer-selected) .answer-label .answer-letter-wrapper:before {
+        color: ${colors.palette.white};
+        border-color: ${colors.answer.correct};
+        background: ${colors.answer.correct};
+      }
+
       .question-feedback-content {
         font-size: 1.6rem;
       }
@@ -122,5 +131,7 @@ export const exerciseStyles = css`
       font-weight: bold;
       font-size: 1.6rem;
     }
+
+
   }
 `;

src/components/ExercisePreview.tsx

@@ -4,92 +4,92 @@ import { IncludeRemoveQuestion } from "./IncludeRemoveQuestion";
 import { Exercise } from "./Exercise";
 
 export interface ExercisePreviewProps {
-    exercise: ExerciseData;
-    selected: boolean;
-    onIncludeHandler: () => void;
-    onRemoveHandler: () => void;
-    onClickDetails: () => void;
-    enableOverlay?: boolean;
+  exercise: ExerciseData;
+  selected: boolean;
+  onIncludeHandler: () => void;
+  onRemoveHandler: () => void;
+  onClickDetails: () => void;
+  enableOverlay?: boolean;
 }
 
-/** 
+/**
  * An Exercise version with less interaction with card and grants an Overlay with Include/Remove component
- */ 
+ */
 export const ExercisePreview = (
-    {
-        exercise,
-        selected,
-        onIncludeHandler,
-        onRemoveHandler,
-        onClickDetails,
-        enableOverlay = false,
-    }: ExercisePreviewProps) => {
+  {
+    exercise,
+    selected,
+    onIncludeHandler,
+    onRemoveHandler,
+    onClickDetails,
+    enableOverlay = false,
+  }: ExercisePreviewProps) => {
 
-    const exercisePreviewProps = (exercise: ExerciseData) => {
-        const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => (
-            { id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '') }));
+  const exercisePreviewProps = (exercise: ExerciseData) => {
+    const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => (
+      { id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '') }));
 
-        const questionStateFields = {
-            available_points: '1.0',
-            is_completed: true,
-            answer_id: '1',
-            free_response: '',
-            feedback_html: '',
-            correct_answer_feedback_html: '',
-            attempts_remaining: 0,
-            attempt_number: 1,
-            incorrectAnswerId: 0
-        }
+    const questionStateFields = {
+      available_points: '1.0',
+      is_completed: true,
+      answer_id: '1',
+      free_response: '',
+      feedback_html: '',
+      correct_answer_feedback_html: '',
+      attempts_remaining: 0,
+      attempt_number: 1,
+      incorrectAnswerId: 0
+    }
 
-        const questionStates = formatAnswerData(exercise.questions).reduce((acc, answer) => {
-            const { id, correct_answer_id } = answer;
-            return { ...acc, [id]: { ...questionStateFields, correct_answer_id } };
-        }, {});
+    const questionStates = formatAnswerData(exercise.questions).reduce((acc, answer) => {
+      const { id, correct_answer_id } = answer;
+      return { ...acc, [id]: { ...questionStateFields, correct_answer_id } };
+    }, {});
 
-        const step: StepBase = {
-            id: 1,
-            uid: exercise.uid,
-            available_points: '1.0',
-        };
+    const step: StepBase = {
+      id: 1,
+      uid: exercise.uid,
+      available_points: '1.0',
+    };
 
-        return {
-            canAnswer: true,
-            needsSaved: true,
-            hasMultipleAttempts: false,
-            onAnswerChange: () => undefined,
-            onAnswerSave: () => undefined,
-            onNextStep: () => undefined,
-            apiIsPending: false,
-            canUpdateCurrentStep: false,
-            step: step,
-            questionNumber: exercise.number as number,
-            numberOfQuestions: exercise.questions.length,
-            questionStates: questionStates,
-            show_all_feedback: false, // Hide all feedback
-        };
+    return {
+      canAnswer: true,
+      needsSaved: true,
+      hasMultipleAttempts: false,
+      onAnswerChange: () => undefined,
+      onAnswerSave: () => undefined,
+      onNextStep: () => undefined,
+      apiIsPending: false,
+      canUpdateCurrentStep: false,
+      step: step,
+      questionNumber: exercise.number as number,
+      numberOfQuestions: exercise.questions.length,
+      questionStates: questionStates,
+      show_all_feedback: false, // Hide all feedback
     };
+  };
 
-    const includeRemoveQuestionComponent = React.useMemo(() =>
-        <IncludeRemoveQuestion
-            buttonVariant={selected ? 'remove' : 'include'}
-            onIncludeHandler={onIncludeHandler}
-            onRemoveHandler={onRemoveHandler}
-            onClickDetails={onClickDetails}
-        />
-        , [selected, onIncludeHandler, onRemoveHandler, onClickDetails]);
+  const includeRemoveQuestionComponent = React.useMemo(() =>
+    <IncludeRemoveQuestion
+      buttonVariant={selected ? 'remove' : 'include'}
+      onIncludeHandler={onIncludeHandler}
+      onRemoveHandler={onRemoveHandler}
+      onClickDetails={onClickDetails}
+    />
+    , [selected, onIncludeHandler, onRemoveHandler, onClickDetails]);
 
-    return (
-        <Exercise
-            exercise={exercise}
-            className={selected ? 'preview-card is-selected' : 'preview-card'}
-            {
-            ...(enableOverlay
-                ? {
-                    overlayChildren: includeRemoveQuestionComponent,
-                }
-                : {})
-            }
-            {...exercisePreviewProps(exercise)}
-        />
-    );
-};
+  return (
+    <Exercise
+      exercise={exercise}
+      className={selected ? 'preview-card is-selected' : 'preview-card'}
+      {
+      ...(enableOverlay
+        ? {
+          overlayChildren: includeRemoveQuestionComponent,
+        }
+        : {})
+      }
+      {...exercisePreviewProps(exercise)}
+    />
+  );
+};