Layer focus trap - Githubissues

halocline commented 4 weeks ago

Link to problem

https://design-system.hpe.design/components/layer

Current problem

When a layer of type modal is opened, the focus should be trapped within that layer. Currently, when tabbing through the layer the focus within the Grommet app is trapped, but continued tabbing allows focus to go to other browser tabs, global header, etc.

Expected behavior or solution

[ ] Please review WCAG guidelines to verify whether focus can 'leak' to elements outside of application or should be trapped and only allowed to focus on elements within the layer.
[ ] Check if an existing issue exists in Grommet
[ ] Add "trap focus" guidance for modals within Layer's accessibility section.

Screenshot or recording of problem

No response

Steps to reproduce

No response

MarinaCastejonHPE commented 4 weeks ago

Thanks @halocline. Among all the WCAG documentation in their site, I found this direct reference regarding the focus behaviour in modals (see third example).

jcfilben commented 3 weeks ago

The trapFocus prop can be passed to Layer but we don't have that documented on Grommet site

grommet / hpe-design-system

Layer focus trap #3841

Link to problem

Current problem

Expected behavior or solution

Screenshot or recording of problem

Steps to reproduce