Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/components/fill-in-the-blanks.tsx (TypeScript)

Code before:
  return (
    <>
      <ChallengeHeading heading={t('learn.fill-in-the-blank.heading')} />
      <Spacer size='xs' />
      <div className='fill-in-the-blank-wrap'>
        {paragraphs.map((p, i) => {
          return (
            // both keys, i and j, are stable between renders, since
            // the paragraphs are static.
            <p key={i}>
              {p.map((node, j) => {
                const { type, value } = node;
                if (type === 'text') return value;
                if (type === 'blank')
                  return (
                    <input
                      key={j}
                      type='text'
                      maxLength={blankAnswers[value].length + 3}
                      className={`fill-in-the-blank-input ${addInputClass(
                        value
                      )}`}
                      onChange={handleInputChange}
                      data-index={node.value}
                      size={blankAnswers[value].length}
                      aria-label={getInputLabel(value)}
                    />
                  );
              })}
            </p>
          );
        })}
      </div>
      <Spacer size='m' />
      <div aria-live='polite'>
        {showWrong && (
          <div className='text-center'>
            <span>{t('learn.wrong-answer')}</span>
            <Spacer size='m' />
          </div>
        )}
        {showFeedback && feedback && <PrismFormatted text={feedback} />}
      </div>
    </>
  );
}

FillInTheBlanks.displayName = 'FillInTheBlanks';

export default FillInTheBlanks;


Review comment (bug):
```suggestion
                      aria-label={t('learn.fill-in-the-blank.blank')}
                      autoComplete='off'
                      {...(answersCorrect[value] === false ? { 'aria-invalid': 'true' } : {})}
```

The accessible name on the input should not change, it should remain "blank". If the answer is wrong then you can add `aria-invalid="true"`. Also, highly recommend we turn the `autocomplete` attribute off because we don't want the browser to attempt to fill these in and it will reduce the verbosity for screen reader users.

For correct answers, I highly recommend you remove the input element and just make the correct answer a part of the sentence. I did this by adding the following `if` block before this one:

```
                if (type === 'blank' && answersCorrect[value] === true)
                  return (
                    <span>{blankAnswers[value]}</span>
                  );
```
You could also format this to make it stand out as correct, such as making it bold and green. But don't underline it so it isn't confused with an active input.

Code after:
        {paragraphs.map((p, i) => {
          return (
            // both keys, i and j, are stable between renders, since
            // the paragraphs are static.
            <p key={i}>
              {p.map((node, j) => {
                const { type, value } = node;
                if (type === 'text') {
                  return value;
                }

                // If a blank is answered correctly, render the answer as part of the sentence.
                if (type === 'blank' && answersCorrect[value] === true) {
                  return (
                    <span key={j} className='correct-blank-answer'>
                      {blankAnswers[value]}
                    </span>
                  );
                }

                return (
                  <input
                    key={j}
                    type='text'
                    maxLength={blankAnswers[value].length + 3}
                    className={getInputClass(value)}
                    onChange={handleInputChange}
                    data-index={node.value}
                    size={blankAnswers[value].length}
                    autoComplete='off'
                    aria-label={t('learn.fill-in-the-blank.blank')}
                    {...(answersCorrect[value] === false
                      ? { 'aria-invalid': 'true' }
                      : {})}
                  />
                );
              })}
            </p>
          );
        })}
      </div>
      <Spacer size='m' />
      <div aria-live='polite'>
        {showWrong && (
          <div className='text-center'>
            <span>{t('learn.wrong-answer')}</span>
            <Spacer size='m' />
          </div>
        )}
        {showFeedback && feedback && <PrismFormatted text={feedback} />}
      </div>