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

Code before:
                className='cert-tag'
                to={t('links:help-translate-link-url')}
              >
                {t('misc.translation-pending')}{' '}
                <span className='sr-only'>
                  {blockTitle} {t('misc.certification-project')}
                </span>
              </Link>
            )}
          </div>
          <div className='title-wrapper map-title'>
            {blockType && <BlockLabel blockType={blockType} />}
            <h3 className='block-grid-title'>
              <Link
                className='block-header'
                onClick={() => {
                  this.handleBlockClick();
                }}
                to={extendedChallenges[0].fields.slug}
              >
                <CheckMark isCompleted={isBlockCompleted} />
                {blockTitle}{' '}
                <span className='sr-only'>
                  {t('misc.certification-project')}
                </span>
              </Link>
            </h3>
          </div>
          <BlockIntros intros={blockIntroArr} />
        </div>
      </ScrollableAnchor>
    );

    /**
     * ChallengeListBlock displays challenges in a list.
     * Created for the new Full Stack Developer Certification,
     * so we can play with it without affecting the existing block layouts.
     */
    const ChallengeListBlock = (
      <ScrollableAnchor id={block}>
        <div
          className={`block block-grid challenge-list-block ${isExpanded ? 'open' : ''}`}
        >
          <BlockHeader
            blockDashed={block}
            blockTitle={blockTitle}
            blockType={blockType}
            completedCount={completedCount}
            courseCompletionStatus={courseCompletionStatus()}
            handleClick={this.handleBlockClick}
            isCompleted={isBlockCompleted}

Review comment (suggestion):
Instead of adding alternative text, we could allow `CheckMark` to show the accessible text.

I'm not doing that, however, because `CheckMark` conditionally renders `GreenPass` and `GreenNotCompleted`, and their label text are "Passed" and "Not passed", which I think are more appropriate in the context of challenge tests than the completion state.


Code after:
                className='cert-tag'
                to={t('links:help-translate-link-url')}
              >
                {t('misc.translation-pending')}{' '}
                <span className='sr-only'>
                  {blockTitle} {t('misc.certification-project')}
                </span>
              </Link>
            )}
          </div>
          <div className='title-wrapper map-title'>
            {blockType && <BlockLabel blockType={blockType} />}
            <h3 className='block-grid-title'>
              <Link
                className='block-header'
                onClick={() => {
                  this.handleBlockClick();
                }}
                to={extendedChallenges[0].fields.slug}
              >
                <CheckMark isCompleted={isBlockCompleted} />
                {blockTitle}{' '}
                <span className='sr-only'>
                  {isBlockCompleted
                    ? `${t('misc.certification-project')}, ${t('learn.completed')}`
                    : `${t('misc.certification-project')}, ${t('learn.not-completed')}`}
                </span>
              </Link>
            </h3>
          </div>
          <BlockIntros intros={blockIntroArr} />
        </div>
      </ScrollableAnchor>
    );

    /**
     * ChallengeListBlock displays challenges in a list.
     * Created for the new Full Stack Developer Certification,
     * so we can play with it without affecting the existing block layouts.
     */
    const ChallengeListBlock = (
      <ScrollableAnchor id={block}>
        <div
          className={`block block-grid challenge-list-block ${isExpanded ? 'open' : ''}`}
        >
          <BlockHeader
            blockDashed={block}
            blockTitle={blockTitle}
            blockType={blockType}
            completedCount={completedCount}
            courseCompletionStatus={courseCompletionStatus()}