Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/challenges.tsx (TypeScript)

Code before:
            <li
              className={`map-challenge-title map-challenge-title-grid ${
                isProjectBlock
                  ? 'map-project-wrap'
                  : challenge.challengeType === challengeTypes.dialogue
                    ? 'map-dialogue-wrap'
                    : 'map-challenge-wrap'
              }`}
              id={challenge.dashedName}
              key={`map-challenge ${challenge.fields.slug}`}
            >
              {!isProjectBlock &&
              challenge.challengeType !== challengeTypes.dialogue ? (
                // Step or Task challenge
                <Link
                  to={challenge.fields.slug}
                  className={`map-grid-item ${
                    +challenge.isCompleted ? 'challenge-completed' : ''
                  }`}
                >
                  <span className='sr-only'>
                    {challenge.superBlock === SuperBlocks.A2English
                      ? t('aria.task')
                      : t('aria.step')}
                  </span>
                  <span>{challenge.dashedName.slice(5)}</span>
                  <span className='sr-only'>
                    {challenge.isCompleted
                      ? t('icons.passed')
                      : t('icons.not-passed')}
                  </span>
                </Link>
              ) : challenge.challengeType === challengeTypes.dialogue ? (
                <Challenge challenge={challenge} />
              ) : (
                <Project challenge={challenge} />
              )}
            </li>
          ))}
        </ul>
      </nav>
    </>
  ) : (
    <ul className={`map-challenges-ul`}>
      {challengesWithCompleted.map(challenge => (
        <li
          className={`map-challenge-title ${
            isProjectBlock ? 'map-project-wrap' : 'map-challenge-wrap'
          }`}
          id={challenge.dashedName}
          key={'map-challenge' + challenge.fields.slug}

Review comment (suggestion):
```suggestion
                  <span>{getStepNumber(challenge.dashedName)}</span>
```

Code after:
              : t('aria.steps-for', { blockTitle })
            : t('aria.steps')
        }
      >
        <ul className={`map-challenges-ul map-challenges-grid `}>
          {challengesWithCompleted.map(challenge => (
            <li
              className={`map-challenge-title map-challenge-title-grid ${
                isProjectBlock
                  ? 'map-project-wrap'
                  : challenge.challengeType === challengeTypes.dialogue
                    ? 'map-dialogue-wrap'
                    : 'map-challenge-wrap'
              }`}
              id={challenge.dashedName}
              key={`map-challenge ${challenge.fields.slug}`}
            >
              {!isProjectBlock &&
              challenge.challengeType !== challengeTypes.dialogue ? (
                // Step or Task challenge
                <Link
                  to={challenge.fields.slug}
                  className={`map-grid-item ${
                    +challenge.isCompleted ? 'challenge-completed' : ''
                  }`}
                >
                  <span className='sr-only'>
                    {challenge.superBlock === SuperBlocks.A2English
                      ? t('aria.task')
                      : t('aria.step')}
                  </span>
                  <span>{getStepNumber(challenge.dashedName)}</span>
                  <span className='sr-only'>
                    {challenge.isCompleted
                      ? t('icons.passed')
                      : t('icons.not-passed')}
                  </span>
                </Link>
              ) : challenge.challengeType === challengeTypes.dialogue ? (
                <Challenge challenge={challenge} />
              ) : (
                <Project challenge={challenge} />
              )}
            </li>
          ))}
        </ul>
      </nav>
    </>
  ) : (
    <ul className={`map-challenges-ul`}>
      {challengesWithCompleted.map(challenge => (