Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/settings/about.tsx (TypeScript)

Code before:
                  type='url'
                  value={picture}
                />
                {!this.state.isPictureUrlValid && (
                  <ShowImageValidationWarning
                    alertContent={t('validation.url-not-image')}
                  />
                )}
              </FormGroup>
              <FormGroup controlId='about-about'>
                <ControlLabel>
                  <strong>{t('settings.labels.about')}</strong>
                </ControlLabel>
                <FormControl
                  componentClass='textarea'
                  onChange={this.handleAboutChange}
                  value={about}
                />
              </FormGroup>
            </div>
            <BlockSaveButton
              disabled={this.isFormPristine()}
              bgSize='large'
              {...(this.isFormPristine() && { tabIndex: -1 })}
            >
              {t('buttons.save')}{' '}
              <span className='sr-only'>
                {t('settings.headings.personal-info')}
              </span>
            </BlockSaveButton>
          </form>
        </FullWidthRow>
        <Spacer size='medium' />
        <FullWidthRow>
          <ThemeSettings
            currentTheme={currentTheme}
            toggleNightMode={toggleNightMode}
          />
          <SoundSettings sound={sound} toggleSoundMode={toggleSoundMode} />
          <KeyboardShortcutsSettings
            keyboardShortcuts={keyboardShortcuts}
            toggleKeyboardShortcuts={toggleKeyboardShortcuts}
          />
          <ScrollbarWidthSettings />
        </FullWidthRow>
      </>
    );
  }
}

AboutSettings.displayName = 'AboutSettings';

Review comment (suggestion):
Under the hood, the Button component passes the `disabled` prop to the `aria-disabled` attribute of a native `<button>`.

We don't need to have that distinction here on the consumer side as it increases the overhead.

Code after:
                <FormControl
                  onChange={this.handlePictureChange}
                  type='url'
                  value={picture}
                  id='about-picture-input'
                />
                {!this.state.isPictureUrlValid && (
                  <ShowImageValidationWarning
                    alertContent={t('validation.url-not-image')}
                  />
                )}
              </FormGroup>
              <FormGroup controlId='about-about'>
                <ControlLabel htmlFor='about-about-input'>
                  <strong>{t('settings.labels.about')}</strong>
                </ControlLabel>
                <FormControl
                  componentClass='textarea'
                  onChange={this.handleAboutChange}
                  value={about}
                  id='about-about-input'
                />
              </FormGroup>
            </div>
            <BlockSaveButton
              disabled={this.isFormPristine()}
              bgSize='large'
              {...(this.isFormPristine() && { tabIndex: -1 })}
            >
              {t('buttons.save')}{' '}
              <span className='sr-only'>
                {t('settings.headings.personal-info')}
              </span>
            </BlockSaveButton>
          </form>
        </FullWidthRow>
        <Spacer size='medium' />
        <FullWidthRow>
          <ThemeSettings
            currentTheme={currentTheme}
            toggleNightMode={toggleNightMode}
          />
          <SoundSettings sound={sound} toggleSoundMode={toggleSoundMode} />
          <KeyboardShortcutsSettings
            keyboardShortcuts={keyboardShortcuts}
            toggleKeyboardShortcuts={toggleKeyboardShortcuts}
          />
          <ScrollbarWidthSettings />
        </FullWidthRow>
      </>
    );