Description

Hi! I created a custom block and noticed that the data-wp-on--keydown & data-wp-on--keyup directives do not work in Safari, but they do work in Firefox and Chrome.

The context of this issue is that I am creating a dropdown filter with a button that opens a list of links. The user should be able to press escape to close the filter & I wanted them to be able to press escape and close the filter wherever they are in the block.

After a bit more digging I realised the reason for this is that the data-wp-on--keydown & data-wp-on--keyup directives no not work in any browser unless you are focused on an element inside the interactive area. So this code works:

<div
	data-wp-interactive="interactivity/key-test"
	data-wp-on--keydown="actions.handleKeyDown"
	data-wp-on--keyup="actions.handleKeyUp"
	<?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>
>
	<button>
	Drop down Button
	</button>
</div>

however this code does not work:

<div
	data-wp-interactive="interactivity/key-test"
	data-wp-on--keydown="actions.handleKeyDown"
	data-wp-on--keyup="actions.handleKeyUp"
	<?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>
>
	Drop down Button
</div>

because there is nothing for the browser to focus on inside the data-wp-interactive area.

The reason it was not working in Safari is that you have to enable the tab navigation in the settings to be able to focus into an area, so the key-down and key-up events are never triggered. I think this setting is turned off by default, (I didn't turn it off!) but can't confirm.

Step-by-step reproduction instructions

1. Make a gutenberg block with the interactivity api enabled and add the data-wp-on--keydown or data-wp-on--keyup directives to the parent element and add a button or link inside the element.
2. add the code to key down or key up click event.
3. Verify this block works in Firefox and Chrome
4. Open Safari. Go to Safari > Settings... > Advanced (tab)
5. Make sure the setting Press Tab to highlight each item on a web page is unchecked.
6. Notice the block does not work in Safari
7. Go back to Go to Safari > Settings... > Advanced (tab) and check the Press Tab to highlight each item on a web page setting
8. Verify the block is now working.

Screenshots, screen recording, code snippet

Code is available in this gist:
https://gist.github.com/verytwisty/7a50a075fad9f1d6b9efec36512d3942

Environment info

• Safari 17.4.1 (with Press Tab to highlight each item on a web page turned off)
• Mac OS Sonoma 14.4.1
• WP 6.6.2
• Gutenberg 19.3.0
• Also tested without Gutenberg installed

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes