Почему программа чтения с экрана читает одно RadioButton, но пропускает остальные?

Question

Я пытаюсь понять, как работает программа чтения с экрана, чтобы я могла сделать все программы чтения с экрана реагирующих компонентов доступными.

Итак, у меня есть компонент, который принимает платежи по кредитным картам, он читает выбранную радиокнопку ивесь его контент, но когда вы переходите на радиокнопку подарочной карты или пытаетесь сделать это, она пропускает все остальные радиокнопки и переходит прямо к радиокнопке для доставки.

Почему это происходит?

Вот код:

return (
      <div className="payment-type summary">
        {isCCAllowed &&
        <div className="payment-choice">
           <RadioButton
              type="radio"
              name="type"
              value={PaymentTypeEnum.CREDIT_CARD}
              checked={this.state.type === PaymentTypeEnum.CREDIT_CARD}
              onChange={this.handleInputChange}>
            <h4 className="inline description payment-option h5">{PaymentHelper.getCreditCardChoiceTitle(this.state.paymentCardTypes)}</h4>
          </RadioButton>
          {PaymentHelper.getPaymentIconsStripe(this.state.paymentCardTypes)}
        </div>
        }
        {displayCC &&
          <div className="cc-accordion-container">
            <PaymentMethodsFromWallet
              paymentCardTypes={this.state.paymentCardTypes}
              onFormCompleted={this.handlePaymentCompleted}
              onFormInvalid={this.handlePaymentInvalid}
              exteralErrors={this.props.paymentTypeErrors}
              onExternalErrorsResolved={this.props.handlePaymentTypeExternalErrorsResolved}
              revalidate={this.props.revalidate}
              onRevalidateComplete={this.props.onRevalidateComplete}
            />
          </div>
        }
        {isGCAllowed &&
        <div className="payment-choice">
          <RadioButton
            type="radio"
            name="type"
            value={PaymentTypeEnum.GIFT_CARD}
            checked={this.state.type === PaymentTypeEnum.GIFT_CARD}
            onChange={this.handleInputChange}>
            <h4 className="description payment-option h5">Disney Gift Card</h4>
          </RadioButton>
          {PaymentHelper.getPaymentIcon(PaymentTypeEnum.GIFT_CARD)}
        </div>
        }

Приведенный выше код предназначен для одного компонента PaymentType.js

Я использую ChromeVox и Mac VoiceOver и получаю одинаковое поведение.Я не вижу никакой разницы в самом коде.Так почему же он пропускает остальные радиокнопки и как мне это решить?

Answer 1

Даже не реагируя, вкладка для переключателей основана на кнопке группа , а не на каждой отдельной кнопке.

Вы переходите на группу кнопок, а затем нажимаете клавиши со стрелками для перемещения между ними.кнопки в группе.

Проверьте поведение этого простого примера - вы перейдете на каждый из флажков, но только на первый или выбранный в данный момент переключатель.Попробуйте использовать как вкладки, так и стрелки, как это, с вашей собственной существующей разметкой, и посмотрите, как ведет себя программа чтения с экрана.

div { margin: 1em; }
ul { list-style-type: none; }

<div id="checks" style="background-color:lightyellow;border:1px solid black;">
    <ul>
        <li><label><input type="checkbox" name="one"> something one </label></li>
        <li><label><input type="checkbox" name="two"> something two </label></li>
        <li><label><input type="checkbox" name="three"> something three </label></li>
        <li><label><input type="checkbox" name="four" checked> something four </label></li>
    </ul>
</div>


<div id="radios1" style="background-color:lightgreen;border:1px solid black;">
    <ul>
        <li><label><input type="radio" name="set-one" value="A"> One A </label></li>
        <li><label><input type="radio" name="set-one" value="B"> One B </label></li>
        <li><label><input type="radio" name="set-one" value="C"> One C </label></li>
        <li><label><input type="radio" name="set-one" value="D"> One D </label></li>
    </ul>
</div>


<div id="radios2" style="background-color:lightgreen;border:1px solid black;">
    <ul>
        <li><label><input type="radio" name="set-two" value="W"> Two W </label></li>
        <li><label><input type="radio" name="set-two" value="X"> Two X </label></li>
        <li><label><input type="radio" name="set-two" value="Y"> Two Y </label></li>
        <li><label><input type="radio" name="set-two" value="Z"> Two Z </label></li>
    </ul>
</div>