Focus Management
Run locally for transcripts
π¨βπΌ 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.