Fix: Fix focus shift on opening of modal popup in templates #69711
Conversation
Fix focus shift on modal popup to first interactive element in modal
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR!
The approach itself looks good, but I think using setTimeout and clearTimeout is a bit hacky approach. Additionally, the ref is applied to the Modal component itself, the first focusable element would always be the modal close button. Ideally, the first form element should have focus.
Taking a custom template as an example, we should be able to approach it like this:
function AddCustomGenericTemplateModalContent() {
// ...
const titleInputRef = useRef( null );
useEffect( () => {
if ( titleInputRef.current ) {
titleInputRef.current.focus();
}
}, [] );
return (
<form>
<VStack spacing={ 6 }>
<TextControl
ref={ titleInputRef }
label={ __( 'Name' ) }
/>
{/* ... */}
</VStack>
</form>
);
}This approach arhicvies the following points:
- No need to use
setTImeoutandclearTimeout - No need to try to find focusable element
What?
Closes #69708
This PR ensures that when a modal is opened, the focus shifts to the first interactive element inside the modal, such as the close button or an input field.
Why?
Currently, the focus behavior in some modals is inconsistent. In some cases, the parent container is not focusable due to tabindex=-1, preventing proper keyboard navigation. This fix ensures that focus lands on the first interactive element when the modal opens, improving accessibility and user experience.
How?
Testing Instructions
Screenshots or screencast
modal-focus-shift-issue.mp4