Changes Version 3.9.0

Released on August 28, 2024 with 88 commits

This release brings many fixes and quality-of-life improvements that were requested by the community.

The vast majority of these changes are backward compatible. One breaking change can be found with making links followable. Existing usage is polyfilled by unpoly-migrate.js.

Emitting events on buttons

• You can now use [up-emit] to emit an event when any element is clicked. In particular this works with a <button> or any faux-interactive element (issue #416).

Improvements to faux-interactive elements

Sometimes you need to add a click listener to non-interactive elements (like <span>). Unpoly helps you prevent accessibility issues with such "faux-interactive" elements, by offering the [up-clickable] attribute and up.link.config.clickableSelectors configuration. Unpoly also leverages this for its own faux-interactive elements, such as [up-emit] or [up-dismiss]. This release improves the handling of faux-interactive elements:

• A new documentation guide Clicking non-interactive elements details all the methods to emulate interactivity on non-interactive elements like <span> or <div>.
• You can now define exceptions to up.link.config.clickableSelectors, by setting an [up-clickable=false] attribute or configuring up.link.config.noClickableSelectors.
• Adjusted the handling of keyboard input to better match the behavior of real buttons and links. In particular, faux-interactive elements with a button role (default) can be activated with both Space and Enter keys. Faux-interactive elements with a [role=link] can only be activated with the Enter key.
• Faux-interactive elements that also have the [up-follow] attribute now default to [role=link] (instead of the default [role=button]).
• Faux-interactive elements with a button role no longer have the "hand" (or "pointer") cursor.
• Fix a bug where faux-interactive elements inside popups could not be activated with the keyboard (#653).

Making links followable

• Links with only an [up-href] attribute are no longer followable by default. They also require an [up-follow] attribute or a match in up.link.config.followSelectors. This change was made to remove confusion with other features that use [up-href], such as [up-defer] and (since this release) [up-poll].
• Links with only an [up-instant] attribute are no longer followable by default. They also require an [up-follow] attribute or a match in up.link.config.followSelectors. This change was made to remove confusion with other features that use [up-instant], in particular up:click on faux-interactive elements.

Polling

• Listeners to the up:fragment:poll event can now inspect or mutate event.renderOptions. This allows more control over the polling request and sub-sequent render passes.
• [up-poll] elements can now use the [up-href] attribute to poll from a different URL. By default Unpoly will poll the URL from which the element was originally loaded. The old method over overriding [up-source] is still supported, but [up-href] is the preferred way of doing this going forward.
• [up-poll] elements can now use the [up-method] attribute to choose a different HTTP method for polling requests.
• [up-poll] elements can now use the [up-params] attribute to add custom params to polling requests.
• [up-poll] elements can now use the [up-headers] attribute to add custom headers to polling requests.

Forms

• Focus is now preserved when submitting a form by pressing Enter from a focused field (discussion #658).
• The up.submit() now includes the [name] and [value] of the default submit button in the submitted params. By default the form's first submit button will be assumed. You can prevent this with { submitButton: false }, or pass a different button element as { submitButton }.
• Fix an interop issue with the Shoelace web component library, where a failed response could not be processed when the form was submitted with an <sl-button> (discussion #643).

Smooth scrolling

• Support smooth scrolling when swapping a fragment.
• Fix smooth scrolling when prepending or appending content.

Various

• Fix: up-alias not matching URL query string with asterix after shash (#542)
• Fix a bug where an overlay with viewport would not correctly shift multiple right-fixed elements
• [up-defer] elements no longer have a hand cursor
• Events like up:link:follow can now open a layer with a given mode using the shorthand notation event.renderOptions.layer = "new drawer".
• Avoid logging Uncaught AbortError when the user presses the back button, but a script prevents the up:location:restore event.
• Aboid logging Uncaught AbortError when the user closes the overlay, but a script prevents the up:layer:dismiss or up:layer:accept event.
• Reduce the number of layer lookups during a render pass.

Upgrading

If you're upgrading from an older Unpoly version you should load unpoly-migrate.js to polyfill deprecated APIs. Changes handled by unpoly-migrate.js are not considered breaking changes.

See our upgrading guide for details.