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

[harshdeepgill]

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.

[harshdeepgill]

Link for Popover API Documentation ​https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

[jonsurrell]

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.

[adamsilverstein]

@harshdeepgill - is this something that could be implemented as part of the Popover component?

​https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/popover/README.md

[harshdeepgill]

Replying to adamsilverstein:

@harshdeepgill - is this something that could be implemented as part of the Popover component?

​https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/popover/README.md

No, its not. It is related to the issue that wp_kses_attr_check seems to reject attributes used in native Popover API.
​https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

[joedolson]

While the popover attributes don't create an inherently accessible interface, they do allow some guardrails that are very useful for building a more accessible popover. Given that, I think that we should allow that support.

To go along with that, we might want to also add a make/accessibility article talking about how to implement an accessible popover, to cover those extra bases, but making these attributes possible is a good first step.

See: ​Hidde deVries "Popover Accessibility"