JSF tabbing/focus functionality not working in any version of IE - jsf

Question

I have a modal housed by a main login page using ui:include. I was able to confirm that the ui:include portion was not causing the issue I am having.
On the modal, I have three JSF elements; two inputSecrets (myFaces) and one CommandLink (myFaces) for a submit button. Here is the code snippet:
<div style="padding: 0px 20px 5px 140px; width: 300px; text-align: left; font-size: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: 600;">
New Password:<br/>
<t:inputSecret forceId="true" id="pwOne" title="New Password" size="27" maxlength="20"
value="#{accountSettingsBean.newPassword}"
tabindex="72" />
<br/><br/>
Confirm Password:<br/>
<t:inputSecret forceId="true" id="pwTwo" title="Confirm Password" size="27" maxlength="20"
value="#{accountSettingsBean.confirmNewPassword}"
tabindex="73"/>
</div>
<div id="submitButton" style="width: 420px; align: left;">
<t:commandLink value="SUBMIT"
style="color:white; text-decoration:none; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); background: #4775AD; background: -moz-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b93d8), color-stop(100%, #4775AD)); background: -webkit-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -o-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -ms-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: linear-gradient(to bottom, #5b93d8 0%, #4775AD 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b93d8', endColorstr='#4775AD', GradientType=0 ); border: 1px solid #848484; padding: 0px 5px;white-space: nowrap;font-size: 14px !important;text-align: center; line-height: 40px;font-weight: bold;-webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;-webkit-border-bottom-right-radius: 10px; border-radius: 10px 10px 10px 10px; width: 150px; height: 40px; margin-left: -20px; margin-top: 15px; margin-bottom: 10px; display: block;"
action="#{accountSettingsBean.updateExpiredPassword}"
id="lnkUpdateExpiredPw"
binding="#{accountSettingsBean.lnkUpdateExpiredPw}"
tabindex="74" />
In every version of IE available through the dev tools, the tabbing is not working properly. In IE9, the first tab press seems to give focus back to the main page when the modal is seen, and the second tab press gives it to the second inputSecret. In IE8, the tabs work for the "password" and "confirm password" fields, but I can never tab over to the submit button. I cannot tab over to the submit button in any version of IE. Also, hitting "Return" hits the submit button on the main page that houses my modal, instead of having focus on whatever field that IE says it is focusing on.
One thing I have tried is putting in a "onkeydown" event linking to a javascript function to manually give focus to the fields I want. I haven't been able to get this to work yet, but I would like to get to the actual root of the problem as to why its not working in IE.

Answer 1

This is a hack, but I was able to fix this issue in IE by nesting inputtext fields inside the three different elements, like so:
<t:inputSecret forceId="true" id="newPasswordOne" title="New Password" size="27" maxlength="20"
value="#{accountSettingsBean.newPassword}">
<t:inputText tabindex="25" size="1" disabled="true" style="display: none" />
</t:inputSecret>
It didnt break firefox or chrome. I'm not sure why this would work but it does.