<button type="action"> for performing a specified action on a specified element

[oscarrdy]

What problem are you trying to solve?

Methods on HTML elements like the dialog element's show() and showModal() methods cannot currently be invoked without using JavaScript. Additionally, assistive technology have no way of understanding what action a button with type "button" and underlying JavaScript will perform.

What solutions exist today?

Using inline JavaScript with the onclick attribute like: onclick="myElement.myMethod()" close to achieves the same. However if inline JavaScript is disabled, it would not work. Additionally, assistive technology would not be able to understand what method is about to be called and on what element.

How would you solve it?

This can be solved by creating a new button type called "action". This type would also take an "action" attribute and a "for" attribute to specify what the action is and what element it is for. This would for example look like this:

<dialog id="myDialog">
    Hello World
</dialog>

<button type="action" action="showModal" for="myDialog">
    Open Dialog
</button>

Other use cases could be:

• Calling the submit or reset methods on forms.
• Calling the play method or other video/audio related methods on video and audio elements.
• Calling the focus method on focusable elements.
• Calling the requestFullscreen method on elements.
• If elements like details or other current or future openable/closeable elements gained show() and close() methods like the dialog.

Anything else?

No response

[YummyBacon5]

This is almost exactly the same as invoker buttons by the Open UI CG

Where your action attribute is invokeaction
And the for attribute works the same as invoketarget

[oscarrdy]

@YummyBacon5 You are right, thanks for pointing that out.