Focus Management

πŸ‘¨β€πŸ’Ό A lot of what we do for accessibility in the web is manage the user's keyboard focus. It can be really annoying if I click a "submit" button, and then I have to find the field that caused the error I'm seeing. Wouldn't it be nice if the focus moved to the field that has an error?
And what if there are two fields with an error? I think it would be best to focus on the first one.
And what if the entire form has an error? Well, we should probably focus on the form itself and the screen reader will announce the user the issue with the form.
So that's what I'd like you to do next. This is the perfect use case for useEffect, but don't worry, the dependency list here is going to be quite simple.
The emoji will guide you through this one.
While we're at it, let's add autoFocus to the title field, so folks can start typing right away.

Please set the playground first

Loading "Focus Management"
Loading "Focus Management"