title: Why does screen reader read one RadioButton but skips over the rest?
body: <p>I am trying to understand how screen reader works so I can make all my react components screen reader accessible.</p>
  
  <p>So I have a component that takes credit card payments, it reads the credit card radio button selected and all its content, but when you tab to the gift card radio button, or try to, it skips all the other radio buttons and goes straight to the radio button for shipping.</p>
  
  <p>Why does it do this?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>return (
        &lt;div className="payment-type summary"&gt;
          {isCCAllowed &amp;&amp;
          &lt;div className="payment-choice"&gt;
             &lt;RadioButton
                type="radio"
                name="type"
                value={PaymentTypeEnum.CREDIT_CARD}
                checked={this.state.type === PaymentTypeEnum.CREDIT_CARD}
                onChange={this.handleInputChange}&gt;
              &lt;h4 className="inline description payment-option h5"&gt;{PaymentHelper.getCreditCardChoiceTitle(this.state.paymentCardTypes)}&lt;/h4&gt;
            &lt;/RadioButton&gt;
            {PaymentHelper.getPaymentIconsStripe(this.state.paymentCardTypes)}
          &lt;/div&gt;
          }
          {displayCC &amp;&amp;
            &lt;div className="cc-accordion-container"&gt;
              &lt;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}
              /&gt;
            &lt;/div&gt;
          }
          {isGCAllowed &amp;&amp;
          &lt;div className="payment-choice"&gt;
            &lt;RadioButton
              type="radio"
              name="type"
              value={PaymentTypeEnum.GIFT_CARD}
              checked={this.state.type === PaymentTypeEnum.GIFT_CARD}
              onChange={this.handleInputChange}&gt;
              &lt;h4 className="description payment-option h5"&gt;Disney Gift Card&lt;/h4&gt;
            &lt;/RadioButton&gt;
            {PaymentHelper.getPaymentIcon(PaymentTypeEnum.GIFT_CARD)}
          &lt;/div&gt;
          }
  </code></pre>
  
  <p>The above code is for one component of PaymentType.js</p>
  
  <p>I am using both ChromeVox and Mac VoiceOver and get the same behavior. I do not see any difference in the code itself. So why does it skip over the rest of the radio buttons and how do I solve this?</p>