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

Code before:
          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'
        block
        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'
        block
        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'
        ref={testFeedbackRef}
      >
        {runningTests && (
          <span className='sr-only'>{t('aria.running-tests')}</span>
        )}
        {challengeIsCompleted && (
          <>
            <LowerJawStatus
              testText={t('learn.test')}
              showFeedback={isFeedbackHidden}
              text={t('learn.congratulations')}
            >
              {!isCheckYourCodeButtonClicked() && (

Review comment (bug):
Because we are now using the `<Button>` component, it brings a lot of default classNames that I couldn't find a way to overwrite them just like previously so it only has the `sr-only` class when changing, it ends up only appending the class with the rest.

Because of this, when submitting the challenge, an empty button makes it appearance. There are three ways that I think it could be fixed, but correct me if I'm wrong or is too much overhead:

1. Force a class (like `.sr-only`) with an `!important` to make the button disappear, not a fan of it.
2. Add an `overrideClassName` prop to the `Button` component, so the previous behavior can be replicated, and pass the `sr-only` className like it's done now. I think this could be the best option.
3. A third accessible option that I'm not aware of. 

Any other suggestions are welcomed.

https://github.com/freeCodeCamp/freeCodeCamp/assets/47751447/194b4130-db77-46a1-843d-d15786dc8fbd



Code after:
            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}
        >
          {checkButtonText}
        </Button>
      </div>
      {/* Using aria-live=polite instead of assertive works better with ORCA */}
      <div
        style={runningTests ? { height: `${testFeedbackHeight}px` } : {}}
        className={`test-feedback`}
        aria-live='polite'
        ref={testFeedbackRef}
      >
        {runningTests && (
          <span className='sr-only'>{t('aria.running-tests')}</span>
        )}