Use-case Current spec

Current spec with some shared attribute values

@action and @destination are separate but some of the values are shared.

Merging action and destination

@action and @destination are merged and called @action-destination (a placeholder name)

@purpose is used for input controls, and static content.

Merging action, destination and purpose

Instead of @action, @destination and @purpose, there is a single @purpose attribute.

Copy to clipboard button

A traditional button that would trigger a copy of the selected content to be placed on the clipboard. 

<button action="copy">Copy</button>
 
<button action="copy">Copy</button>
 
<button action-destination="copy">Copy</button>
 
<button purpose="copy">Copy</button>

Help link

A traditional hyperlink to a separate HTML document that provides help information. 

<a href="..." destination="help">Help</a>
 
<a href="..." destination="help">Help</a>
 
<a href="..." action-destination="help">Help</a>
 
<a href="..." purpose="help">Help</a>

Telephone number input

A traditional input element that requests the user’s home phone number. HTML autocomplete values are used to convey the meaning. 

<input purpose="home tel">
 
<input purpose="home tel">
 
<input purpose="home tel">
 
<input purpose="home tel">

Button to submit log-in form

The button on the actual log in form (whether this is on a separate page, or in a dialog) to submit the log in form to the server. 

<button type="submit" action="submit">Submit</button>
 
<button type="submit" action="submit">Submit</button>
 
<button type="submit" action-destination="submit">Submit</button>
 
<button type="submit" purpose="submit">Submit</button>

Link to log in page

Another example of a traditional hyperlink to a separate HTML document, specifically one that provides a form that allows the user to log in. 

<a href="..." destination="signin">Log in</a>
 
<a href="..." destination="signin">Log in</a>
 
<a href="..." action-destination="signin">Log in</a>
 
<a href="..." purpose="signin">Log in</a>

Link to start the checkout process on a new page

A traditional HTML link that initiates the checkout process by taking the user to a simplified full-page experience (common with online shopping sites, to improve success rates).

Note: “checkout” is specified as an action so is not valid to attach to links in the current spe

(out of scope) 
<a href="..." destination="checkout">Check out</a>
 
<a href="..." action-destination="checkout">Check out</a>
 
<a href="..." purpose="checkout">Check out</a>

Help button

A traditional button that triggers a dialog to open; the contents of the dialog provide help information. 

<button action="opens-in-page-dialog" destination="help">Help</button>
 
<button action="help">Help</button>
 
<button action-destination="help">Help</button>
 
<button purpose="help">Help</button>

Contact telephone number (content)

Static content in the document that has some meaning.

(out of scope) (out of scope) 
<p purpose="work tel">
 
<p purpose="work tel">

Button to open a log in form

A traditional button that opens a dialog on the current page that contains a log in form.

(out of scope) 
<button action="signin">Log in</button>
 
<button action-destination="signin">Log in</button>
 
<button purpose="signin">Log in</button>