Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 0 additions & 63 deletions site/src/pages/components/future-invokers.explainer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,12 @@ interactivity, and how the button may need to respond to such actions.

| Invokee Element | `command` hint | Behaviour |
| :-------------------- | :--------------------- | :------------------------------------------------------------------------------------------------------------- |
| `<dialog>` | `'request-close'` | If the `<dialog>` is `open`, request to close and use the button `value` for returnValue. Similar to `.requestClose(value) |
| `<* openable>` | `'toggle-openable'` | Opens the `openable` if closed, otherwise closes. Similar to `.toggleOpenable()` |
| `<* openable>` | `'close-openable'` | Closes the `openable` if open, otherwise does nothing. Similar to `.closeOpenable()` |
| `<* openable>` | `'open-openable'` | Opens the `openable` if closed, otherwise does nothing. Similar to `.openOpenable()` |
| `<details>` | `'toggle'` | If the `<details>` is `open`, then close it, otherwise open it |
| `<details>` | `'open'` | If the `<details>` is not `open`, then open it |
| `<details>` | `'close'` | If the `<details>` is `open`, then close it |
| `<dialog>` | `'toggle'` | If the `<dialog>` is `open`, then close it and use the button `value` for returnValue, otherwise open as modal |
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're not proposing this anymore so makes sense to remove it?

| `<select>` | `'show-picker'` | Shows the native picker. Similar to `.showPicker()` on the invokee |
| `<input>` | `'show-picker'` | Shows the native picker. Similar to `.showPicker()` on the invokee |
| `<video>` | `'play-pause'` | If the video is not playing, plays the video. Otherwise pauses it. Similar to `el.playing = !el.playing` |
Expand Down Expand Up @@ -71,67 +69,6 @@ while (for simplicity) this section refers to various `aria-` attributes,
buttons will not sprout these attributes in the DOM, but the effective
equivalent will be exposed to Assistive Technologies.

#### Buttons with `command=request-close`

Buttons with this dialog command will implicitly receive `aria-details=IDREF`,
where `IDREF` matches that of the `commandfor` attribute, while the dialog is
in the showing state, and the button is not a descendant of the dialog.

<details>
<summary>Why?</summary>

A button that cancels a dialog is very typically found inside of the dialog, but
in some cases it may be found outside, perhaps as a "toggle" style button which
opens and closes a dialog as non-modal. This button may be used to close an open
dialog that is shown as non-modal. It may be useful for a user to traverse into
the dialog before closing it, for example to check if they have unsaved changes
within the dialog.

</details>

<br/><br/>

Buttons will also implicitly receive an `aria-expanded` value, if they are not a
descendant of the `commandfor=` referenced element. The state of the
`aria-expanded` value will map to the state of the dialog's openness. When the
dialog is open the button will have `aria-expanded="true"`, when closed,
`aria-expanded="false"`. This will be recomputed whenever the dialog changes
state, such that the button always reflects the state of openness.

<details>
<summary>Why?</summary>

A button that cancels a dialog is very typically found inside of the dialog, but
in some cases it may be found outside, perhaps as a "toggle" style button which
opens and closes a dialog as non-modal.

Buttons outside of the dialog may be used to close an open dialog that is shown
as non-modal. It may be useful for a user to traverse into the dialog before
closing it, for example to check if they have unsaved changes within the dialog.
It may also be useful to know if the dialog is already closed (as in its
`aria-expanded` state is false), as this may help the user make a decision to
whether or not they action the close button.

</details>

<br/><br/>

<details>
<summary>Other considerations not explicitly proposed.</summary>

##### aria-pressed

Given elements will have `aria-expanded`, adding `aria-pressed` would be
confusing or redundant, and as such won't be proposed for these buttons.

##### aria-controls

While `aria-controls` attempts to establish a similar style of relationship to
`aria-details`, `aria-details` sees broader support among various assistive
technologies, and it would be redundant to add both.

</details>

<br/><br/>

#### Other built-in `command=` types
Expand Down
1 change: 1 addition & 0 deletions site/src/pages/components/invokers.explainer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ When the `command` attribute is missing it will default to an invalid state.
| `<* popover>` | `'show-popover'` | Shows the `popover` if closed, otherwise does nothing. Similar to `.showPopover()` |
| `<dialog>` | `'show-modal'` | If the `<dialog>` is not `open`, shows it as modal. Similar to `.showModal()` |
| `<dialog>` | `'close'` | If the `<dialog>` is `open`, close and use the button `value` for returnValue. Similar to `.close(value) |
| `<dialog>` | `'request-close'` | If the `<dialog>` is `open`, request to close and use the button `value` for returnValue. Similar to `.requestClose(value) |

### Accessibility

Expand Down