I just reopened one of my old projects. I abandoned it at the auth stage (I don't remember why).

It's an app to manage an open water competition tour. It needs to collect some data about each user when signing up like name, surname, phone number, and the classic email/password.

I got it to work with Clerk. But at some point I started refactoring the phone input component to improve accessibility and robustness. I'm using Radix primitives mixed with some code straight out of shadcn/ui.

Now the question is how should the input be structured in order to be accessible and still look as I designed it? It needs to have two inputs, one for the country code and one for the actual tel input. So to be accessible it needs two labels, but in the design I wanted to show just one.

Should I redesign it? Or should I hack it in a way that the visible label is actually hidden from screen readers and the two "real" labels are visually hidden but still accessible?

Take a look at the screenshot to see how it looks like. It's really similar to the one Stripe uses, and to others commonly found in websites.

Note: I'm using libphonenumber-js to format the input as its being typed and to validate it before submission.

Other tools used: Zod, react-hook-form, Zustand.

Any comment would be much appreciated ✨️
(as long as it's relevant)