During my recent work on a form in 𝗥𝗲𝗮𝗰𝘁, I encountered an interesting challenge related to keyboard navigation. As many developers know, ensuring a seamless user experience - especially for those who rely on keyboard navigation - is crucial.
While implementing a form, I realized that when users pressed the Tab key to navigate, both the input fields and the icons associated with them were receiving focus. This wasn't ideal as it interrupted the flow of navigation.

To solve this problem, I discovered the powerful 𝘁𝗮𝗯𝗜𝗻𝗱𝗲𝘅 attribute! By setting 𝘁𝗮𝗯𝗜𝗻𝗱𝗲𝘅={-𝟭} on the icon buttons, I effectively excluded them from the tab order. This way, when users pressed Tab, they would seamlessly navigate between the input fields only, enhancing the overall user experience.
This adjustment not only improves accessibility but also provides a cleaner, more focused navigation experience for users.
If you're working on forms, consider using 𝘁𝗮𝗯𝗜𝗻𝗱𝗲𝘅={-𝟭} to streamline keyboard navigation. It makes a significant difference! 💡

🔗 Portfolio: https://Joodi.me
🔗 Github: https://github.com/MiladJoodi
🔗 Linkedin: https://www.linkedin.com/in/MiladJoodi
🔗 Medium: https://github.com/MiladJoodi
🔗 Dev.to: https://dev.to/joodi

tabIndex #reactjs #nextjs #tailwindcss #inputs