Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/classic/lower-jaw.tsx (TypeScript)

Code before:
  const checkButtonText = isDesktop
    ? isMacOS
      ? t('buttons.check-code-3')
      : t('buttons.check-code')
    : t('buttons.check-code-2');

  const showSignInButton = !isSignedIn && challengeIsCompleted;
  return (
    <div className='action-row-container'>
      {showSignInButton && (
        <a
          data-cy='sign-in-button'
          href={`${apiLocation}/signin`}
          className='btn-cta btn btn-block'
          onClick={() => {
            callGA({
              event: 'sign_in'
            });
          }}
        >
          {t('learn.sign-in-save')}
        </a>
      )}
      <Button
        data-playwright-test-label='lowerJaw-submit-button'
        className='btn-block btn'
        data-cy='submit-lowerJaw-button'
        onClick={tryToSubmitChallenge}
        {...(!challengeIsCompleted && { 'aria-hidden': true })}
        ref={submitButtonRef}
      >
        {t('buttons.submit-and-go')}
      </Button>
      <button
        data-playwright-test-label='lowerJaw-check-button'
        className='btn-block btn'
        data-cy='check-lowerJaw-button'
        onClick={tryToExecuteChallenge}
        {...(challengeIsCompleted &&
          !focusManagementCompleted && { tabIndex: -1, className: 'sr-only' })}
        {...(challengeIsCompleted &&
          focusManagementCompleted && { 'aria-hidden': true })}
        ref={checkYourCodeButtonRef}
      >
        {checkButtonText}
      </button>
      {/* Using aria-live=polite instead of assertive works better with ORCA */}
      <div
        style={runningTests ? { height: `${testFeedbackHeight}px` } : {}}
        className={`test-feedback`}
        aria-live='polite'

Review comment (refactor):
We should remove all class names and set the `block` prop instead (we would like to clean up these class names, too, as part of our UI migration). The `block` prop will ensure that the button takes up the entire container's width.

```suggestion
        block
```

Code after:

  const checkButtonText = isDesktop
    ? isMacOS
      ? t('buttons.check-code-3')
      : t('buttons.check-code')
    : t('buttons.check-code-2');

  const showSignInButton = !isSignedIn && challengeIsCompleted;
  return (
    <div className='action-row-container'>
      {showSignInButton && (
        <>
          <a
            data-cy='sign-in-button'
            href={`${apiLocation}/signin`}
            className='btn-cta btn btn-block'
            onClick={() => {
              callGA({
                event: 'sign_in'
              });
            }}
          >
            {t('learn.sign-in-save')}
          </a>
          <Spacer size='xxSmall' />
        </>
      )}
      <Button
        data-playwright-test-label='lowerJaw-submit-button'
        block
        onClick={tryToSubmitChallenge}
        {...(!challengeIsCompleted && { 'aria-hidden': true })}
        ref={submitButtonRef}
      >
        {t('buttons.submit-and-go')}
      </Button>
      <div
        className={
          challengeIsCompleted && !focusManagementCompleted ? 'sr-only' : ''
        }
      >
        <Button
          data-playwright-test-label='lowerJaw-check-button'
          block
          onClick={tryToExecuteChallenge}
          {...(challengeIsCompleted &&
            !focusManagementCompleted && { tabIndex: -1 })}
          {...(challengeIsCompleted &&
            focusManagementCompleted && { 'aria-hidden': true })}
          ref={checkYourCodeButtonRef}
        >