Merge pull request #4110 from anup2307/Fix-Wv-547-TabKeyNavigation

[WV-547] Fixed Tab Key navigation for the sign-in page [Team Review]
wevote · Oct 16, 2024 · 84466d8 · 84466d8
2 parents f172d26 + e292918
commit 84466d8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/src/js/common/components/SignIn/SignInOptionsPanel.jsx b/src/js/common/components/SignIn/SignInOptionsPanel.jsx
@@ -552,6 +552,7 @@ export default class SignInOptionsPanel extends Component {
               // hideSignInWithPhoneForm={isCordova()}
               showAllSignInOptions={this.showAllSignInOptions}
               showPhoneOnlySignIn={this.showPhoneOnlySignIn}
+              showEmailOnlySignIn={this.showEmailOnlySignIn}
             />
             {/* {isCordova() && ( */}
             {/*  <VoterPhoneEmailCordovaEntryModal */}

diff --git a/src/js/components/Settings/VoterEmailAddressEntry.jsx b/src/js/components/Settings/VoterEmailAddressEntry.jsx
@@ -242,8 +242,12 @@ class VoterEmailAddressEntry extends Component {
       this.setState({
         displayEmailVerificationButton: false,
       });
+      const TermsOfServiceLink = document.getElementById("openTermsOfService");
+      if (TermsOfServiceLink) {
+        TermsOfServiceLink.focus(); 
+      }
       blurTextFieldAndroid();
-    }
+    } 
   };
 
   onCancel = () => {
@@ -267,6 +271,10 @@ class VoterEmailAddressEntry extends Component {
         this.props.showAllSignInOptions();
       }
     }
+    const TermsOfServiceLink = document.getElementById("openTermsOfService");
+    if (TermsOfServiceLink) {
+      TermsOfServiceLink.focus(); 
+    }
   };
 
   onFocus = () => {

diff --git a/src/js/components/Settings/VoterPhoneVerificationEntry.jsx b/src/js/components/Settings/VoterPhoneVerificationEntry.jsx
@@ -280,6 +280,10 @@ class VoterPhoneVerificationEntry extends Component {
       this.setState({
         displayPhoneVerificationButton: false,
       });
+      const nextField = document.getElementById("enterVoterEmailAddress") || document.getElementById("openTermsOfService");    
+      if (nextField) {
+        nextField.focus();
+      }
     }
     blurTextFieldAndroid();
   };
@@ -306,12 +310,18 @@ class VoterPhoneVerificationEntry extends Component {
       // WV-316: seperated Cordovoa and Mobile screen cancel logic, Mobile only shows all sign in options on cancel.
       // if (this.props.showAllSignInOptions) {
       //   this.props.showAllSignInOptions();
-      // }
+      // }  
     } else if (isMobileScreenSize()) {
-      if (this.props.showAllSignInOptions) {
-        this.props.showAllSignInOptions();
+      if (this.props.showEmailOnlySignIn) {
+        this.props.showEmailOnlySignIn();
+      }
+    } else {
+      const nextField = document.getElementById("enterVoterEmailAddress") || document.getElementById("openTermsOfService");    
+      if (nextField) {
+        nextField.focus();
       }
     }
+
   };
 
   onFocus = () => {
@@ -738,6 +748,7 @@ VoterPhoneVerificationEntry.propTypes = {
   lockOpenPhoneVerificationButton: PropTypes.bool,
   showAllSignInOptions: PropTypes.func,
   showPhoneOnlySignIn: PropTypes.func,
+  showEmailOnlySignIn: PropTypes.func
 };
 
 const styles = {