Make WordPress Core

Opened 9 days ago

Last modified 5 days ago

#61959 new enhancement

Enhance Support for `popovertarget` and `popover` Attributes in Native Browser Popover API

Reported by: harshdeepgill's profile harshdeepgill Owned by:
Milestone: Awaiting Review Priority: normal
Severity: blocker Version: 6.6.1
Component: General Keywords: needs-patch
Focuses: ui, javascript, css Cc:

Description

The latest version of WordPress lacks full support for the native browser Popover API, specifically for attributes like popovertarget and popover.

popovertarget Attribute:
The popovertarget attribute should be supported on <button> and <input type="button"> elements in HTML to fully utilize the new Popover API introduced in recent browser updates.

popover Attribute:
Additionally, the popover attribute should be supported on all relevant HTML elements, including common text wrappers like <div>, <span>, <p>, etc., to allow for broader and more flexible use of the Popover API.

Expected Behavior:
The popovertarget attribute should work correctly with <button> and <input type="button"> elements.
The popover attribute should be compatible with text-wrapping elements like <div>, <span>, <p>, and others.

Steps to Reproduce:

  1. Create an HTML button or input element with the popovertarget attribute.
  2. Create a <div>, <span>, or <p> element with the popover attribute.
  3. Attempt to trigger a popover using the new Popover API.
  4. Observe that the expected behavior does not occur because these attributes are not rendered in the browser.

Environment:
WordPress Version: 6.6.1
Browser: Chrome
OS: macos

Additional Notes: Supporting these attributes will align WordPress with modern web standards, enabling developers to create more dynamic and interactive user experiences.

Change History (2)

#2 @jonsurrell
5 days ago

  • Component changed from HTML API to General

This is a valid ticket, but the issue is not with the HTML API. These attributes are not allowed by kses, specifically wp_kses_attr_check seems to reject them.

I'll move this to the General component for now.

Note: See TracTickets for help on using tickets.