telekom
Modal first focusable element is always close button
Hi,
when modal opens focus will always be on close button.
Issue in code is that when creating list of focusableElements close button is always first on the list so getFirstFocusableElement in open method will always return close button and it will be focused.
Hi @nikolab-pn, thanks for opening this.
This is intended and it's the expected behaviour to fulfil the accessibility requirements.
What is your use case?
Hi @acstll ,
it wasn't clear from the code, sorry for the confusion.
we are using modal with form inputs, from user perspective it would be better to focus on first input field, also we are using modal as confirm dialog so focus on OK button would be better in this use case. We managed to switch focus when modal opens so this is not big problem.
Maybe some property that would accept what element will be focused on open could be added.
Thanks for the clarification!
We managed to switch focus when modal opens so this is not big problem.
I'm glad to hear 👍
Maybe some property that would accept what element will be focused on open could be added.
this is an interesting idea, and that property would take a query selector string? passing an object like a DOM node does not work well with custom elements.
Query selector strings sounds good.
Previously we worked with focus-trap library (https://github.com/focus-trap/focus-trap). It supports various options for initial focus: {HTMLElement | SVGElement | string | false | (() => HTMLElement | SVGElement | false)}. Maybe you can take some inspiration from there.
Perfect, we will consider adding it.
Thank you very much for the focus-trap lib recommendation. Adding this focus trap to the modal was very hard indeed because of the shadow DOM. I don't remember considering that library, but we did borrow some code from https://github.com/andreasbm/focus-trap
Hi @acstll ,
it wasn't clear from the code, sorry for the confusion.
we are using modal with form inputs, from user perspective it would be better to focus on first input field, also we are using modal as confirm dialog so focus on OK button would be better in this use case. We managed to switch focus when modal opens so this is not big problem.
Maybe some property that would accept what element will be focused on open could be added.
Hi @nikolab-pn Could you please share example how you change the focus? Did you also hide (X) close button when you use that modal as a confirmation dialog? We are facing similar issue.
Hi @lstraka-telekom,
This is how it can be done in React, maybe you could reuse some code even if you are not using React.
https://codesandbox.io/s/serene-cache-rvwqdp?file=/src/App.js
@nikolab-pn thank you ..I try to inspire me (we are developing on Angular), we had one solution, but there were an issue with focus, that tab-key set focus outside the dialog somewhere, but here I see you also had the same issue :D ...probably it should be reported ? I do not know what is the issue there that with tab it goes out of the dialog ...