Proposed ARIA heuristics

[tabatkins]

Aaron and I have been working on the ARIA auto-detection heuristics, and I think I've got them accurately distilled down to this if/then chain:

• If 'toggle-root' is on a container element |container|, 'toggle-trigger' is on a descendant |summary|, and 'toggle-visibility' is on a different descendent |panel|, |container| is disclosure-ish:

  • If |container| does not have any [=disclosure-ish=] siblings (or possibly if it does, but most siblings aren't):

    • If there is a 'toggle-group' in action for |container|'s toggle, this is NOTHING. (It's something without a detectable ARIA pattern.)
    • If |panel| is absolutely positioned or popup'd, this is the POPUP PATTERN.
    • Otherwise, this is the DISCLOSURE PATTERN.

  • If all (or most?) of |container|'s siblings are [=disclosure-ish=], |container|'s parent is accordion-ish:

    • If |panel| is also [=accordion-ish=], and there is no 'toggle-group' in action for |container|'s toggle, this is the TREE PATTERN.

    • If |panel| isn't [=accordion-ish=]:

      • If there's a 'toggle-group' in action for |container|'s toggle: this is the ACCORDION PATTERN.
      • Otherwise, this is probably also accordion, but non-exclusive; Aaron's not sure how it should be classified.

• If 'toggle-group' is on a container element |container|, and all (most?) of |container|'s children are either 'toggle-root'+'toggle-trigger' or 'toggle-visibility' for one of the other sibling's toggles, this is the TABS PATTERN.

• If 'toggle-root'+'toggle-trigger' on a single element, and no 'toggle-visibility' for that toggle:

  • If there's a 'toggle-group' for the toggle, this is the RADIO GROUP PATTERN.

  • Otherwise, this is the CHECKBOX PATTERN. (or SWITCH PATTERN; maybe we auto-decide based on device, or make it controllable)

    Aaron wants to also recognize when there are multiple checkbox siblings, with no (or few?) non-checkbox siblings, as a CHECKBOX GROUP, but this isn't a recognized ARIA pattern yet. (This is also what the multi-select listbox, aka <select multiple>, looks like. Unsure if worth distinguishing.)

    If you have a CHECKBOX GROUP, and its container is itself the |panel| of a POPUP, this is instead part of the COMBOBOX pattern (aka <select> normally).

• If 'toggle-trigger' on an element, and no 'toggle-visibility' is tied to that toggle, this is the BUTTON PATTERN.

• Otherwise, no pattern detected.

---

For clarity I've omitted the details of exactly what element is what in each pattern (like, Tree has several components), this should hopefully all be relatively obvious.

How do these sound? Do we think these will over-detect? Under-detect? If under, do we need to offer some syntax to opt a toggle into one of the above patterns?

/cc @dbaron @aleventhal