x-trap is highlighting field contents on tab

[binaryfire]

x-trap is selecting/highlighting the field's content on focus. This breaks accessibility because after tabbing to a field, users have to then press an arrow key to deselect the content before they can edit it. Otherwise the existing content is overwritten.

Please see the modal example on this page: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/. If you fill out some fields and tab through them, only the focus changes. The field contents are never selected.

Now try the same thing using the x-trap example on the Alpine page: https://alpinejs.dev/plugins/focus#x-trap. The field contents are selected on the initial focus and on all subsequent focus changes when using tab.

[SimoTod]

This is also the default behaviour of the browser when tabbing between input fields, see https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_test, try to put some text in both field and tab between the 2.

The example you posted from w3.org works that way as well (Tested on Chrome on MacOS, other browser may behave in a different way).

[binaryfire]

You're right. Seems to be browser-specific. Ok no worries, thanks.