How To: Modifing the tab order in Azure B2C login Screen

Azure B2C is a very cool tool to integrate external users into your organization. But it comes up sometimes with small bugs. One of them is the reordering of the Tab-flow.

This article will introduce you to the problem and how I solved this.

The Problem

The Problem is the tab-flow. Look here

0:00
/0:05
1×

Now our mission is to fix this on our own :)

Identify the Components to reorder

The very first step is to identify which fields to reorder. For this, I open up the F12 Developer toolbar and search for the id's the controls

So in my case I got the following controls

• email
• password
• forgotPassword
• next

Write the Javascript to do the magic

Any magic will be done via JavaScript in the web world. So here the Javascript that I generated to achieve my goal:

<script>
        document.getElementById("email").tabIndex = "1";
        document.getElementById("password").tabIndex="2";
        document.getElementById("forgotPassword").tabIndex="3";
        document.getElementById("next").tabIndex="4"; 
</script>

Integrate JavaScript

In your custom Page HTML you can add the script to the bottom of the HTML, before the