how do i set the focus method on a button after a page is closed
i got into one issue which becomes difficult to solve for me. i was working on the create new note page to make it accessible by moving the focus to the create new note button after the user closes the create new note page by clicking either go back or cancel button. no matter i tried i couldn't make the button focussable.
The steps which i followed was. i created a focus context and declare a ref variable for the create new note button and i created setFocus method which focuses the button and i pass those ref variable to the createnewnotepagebuttoncontext (a component where i pass the ref to the create new note button), (second i pass the setFocus method to all notes page to call it inside the useEffect.
i also pass the state using navigate method from the create new note page using a state object to all notes page so we can check the value inside that state object to call the setFocus method inside allnotes page but all of these things doesn't work for me. could you see it guys?
Open it in mobile view (375Px)
link:https://note-taking-app-two-rust.vercel.app/all-notes
git-url: https://github.com/aemrobe/note-taking-app.git
GitHub
GitHub - aemrobe/note-taking-app
Contribute to aemrobe/note-taking-app development by creating an account on GitHub.
11 Replies
why would you want something focused from a page that you just closed?
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus <-- add this to the link that looks like a button (should be a button instead)
there is a button called create new note button that has a plus icon on it and i use it to trigger a new page navigation and when that new page is closed i want the focus to remain on the button that triggered the navigation which is the create new button itself. sorry for the language mistake
that's a link, not a button
as in,
<a> and not <button>yes you are right
that is an important distinction
but try the autofocus
ok is it accessible to the screen readers? that is the reason why i want to implement this functionality on the first place
did you read the link?
yes i read it and it says that it has accessibility concerns but i will try it
test it with a screen reader
ok