Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/settings/toggle-button-setting.tsx (TypeScript)

Code before:
import React from 'react';
import ToggleCheck from '../../assets/icons/toggle-check';
import type { ToggleSettingProps } from './toggle-radio-setting';
import '../helpers/toggle-button.css';
import './toggle-setting.css';

export default function ToggleButtonSetting({
  action,
  explain,
  flag,
  flagName,
  toggleFlag,
  offLabel,
  onLabel
}: ToggleSettingProps): JSX.Element {
  return (
    <fieldset
      className='toggle-setting-container'
      {...(explain && {
        'aria-labelledby': `legend${flagName} desc${flagName}`
      })}
    >
      <div className='toggle-description'>
        <legend {...(explain && { id: `legend${flagName}` })}>{action}</legend>
        {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
      </div>
      <div className='toggle-button-group'>
        <button
          aria-pressed={flag}
          {...(!flag && { onClick: toggleFlag })}
          value='1'
          className='toggle-button-right'
        >
          <span>
            {onLabel}
            {flag ? <ToggleCheck className='checkIcon' /> : null}
          </span>
        </button>
        <button
          aria-pressed={!flag}
          {...(flag && { onClick: toggleFlag })}
          value='2'
          className='toggle-button-left'
        >
          <span>
            {offLabel}
            {!flag ? <ToggleCheck className='checkIcon' /> : null}
          </span>
        </button>

Review comment (suggestion):
A `legend` must be the first child in a `fieldset` in order for screen readers to recognize it correctly. If you are going to wrap it in a `div` then you must always assign it an `id` and the `fieldset` must always have `aria-labelledby` set to that `id`.

This is in addition to adding `desc${flagName` to `aria-labelledby` on the `fieldset` when there is additional text describing the setting.

BUT, technically, [the `legend` element is not allowed to be a child of anything other than the `fieldset`](https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element), so really we shouldn't be wrapping it in a `div` to begin with.

Code after:
import React from 'react';
import ToggleCheck from '../../assets/icons/toggle-check';
import type { ToggleSettingProps } from './toggle-radio-setting';
import '../helpers/toggle-button.css';
import './toggle-setting.css';

export default function ToggleButtonSetting({
  action,
  explain,
  flag,
  flagName,
  toggleFlag,
  offLabel,
  onLabel
}: ToggleSettingProps): JSX.Element {
  return (
    <fieldset
      className='toggle-setting-container'
      {...(explain && {
        'aria-labelledby': `legend${flagName} desc${flagName}`
      })}
    >
      <legend className='sr-only' {...(explain && { id: `legend${flagName}` })}>
        {action}
      </legend>
      <div className='toggle-description'>
        <p aria-hidden={true}>{action}</p>
        {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
      </div>
      <div className='toggle-button-group'>
        <button
          aria-pressed={flag}
          {...(!flag && { onClick: toggleFlag })}
          value='1'
          className='toggle-button-right'
        >
          <span>
            {onLabel}
            {flag ? <ToggleCheck className='checkIcon' /> : null}
          </span>
        </button>
        <button
          aria-pressed={!flag}
          {...(flag && { onClick: toggleFlag })}
          value='2'
          className='toggle-button-left'
        >
          <span>
            {offLabel}