18. Tabbing through the Answer component fields (Section 5)

Questionnaire

	<aura:iteration items="{!v.selectedQuestionnaireObj.questionAnswerList}" var="q" indexVar="index">
		<c:Questionnaire_Answer questionnaireID="{!v.selectedQuestionnaireObj.questionnaireId}"
					questionObj="{!q}"
					returnId="{!v.selectedQuestionnaireObj.questionnaireReturnedId}"
					status="{! v.questionnaireReturnedFields.Submitted__c}"
					rowIndex="{!index}" />
	</aura:iteration>

Questionnaire_Answer

	<aura:attribute name="rowIndex" 
	              type="Integer" 
	              default="0"
	              description="Passing in the row index from the parent table to help with tab indexing fields" />  
	<aura:attribute name="numberOfTabs" 
	              type="Integer" 
	              default="9"
	              description="Passing in the row index from the parent table to help with tab indexing fields" />  

    <!-- 6. Layout -->   
    <div class="slds-box slds-theme_shade slds-m-around_large">
      <div class="slds-form slds-form_stacked">
        <fieldset class="slds-form-element">
            <div class="slds-form-element__control">
                <aura:if isTrue="{! v.status }">
				    <lightning:radioGroup aura:id="mygroup"
				        name="{!v.questionFields.Name}"
				        label="{!v.questionFields.Name}"
				        type="radio"
				        options="{! v.options }"
                                        tabindex="{! (v.rowIndex*v.numberOfTabs) + 1}"
				        value="{! v.answerFields.Agree_with_Question__c }"
				        onblur="{! c.handleAnswerChange }"
                        disabled="true" />
                    <aura:set attribute="else">
                        <lightning:radioGroup aura:id="mygroup"
                            name="{!v.questionFields.Name}"
                            label="{!v.questionFields.Name}"
                            type="radio"
                            options="{! v.options }"
                            tabindex="{! (v.rowIndex*v.numberOfTabs) + 1}"
                            value="{! v.answerFields.Agree_with_Question__c }"
                            onblur="{! c.handleAnswerChange }" />
                    </aura:set>
                </aura:if>

            </div>
        </fieldset>
        <div class="slds-form-element">
              <label class="{! v.status ? 'slds-form-element__label' : 'slds-form-element__label slds-assistive-text'}" for="comments">Please add any further comments</label>
              <div class="slds-form-element__control">
                <aura:if isTrue="{! v.status }">
                    {!v.answerFields.Comments__c}
                    <aura:set attribute="else">
                        <lightning:input name="comments" value="{!v.answerFields.Comments__c}"
                                        placeholder="Please add any further comments"
                                        onblur="{!c.handleAnswerChange}"
                                        tabindex="{! (v.rowIndex*v.numberOfTabs) + 2}" />
                    </aura:set>
                </aura:if>
            </div>
        </div>
      </div>
    </div>