Cascader

Контракт

The kit draws the columns, the application fills them. What stands in the column after this one is the children of the chosen node, that is data. No selector computes it, and a kit that pretended to would be holding a copy of somebody else's tree.

Above four levels the component stops working, and that is a property of it rather than a matter of taste: four columns of 11rem is 44rem of horizontal room, which a narrow screen does not have. There the case is a search over the leaves rather than a walk down the levels.

Accessibility

Устройство

The seam between columns is a hairline, the same one the shell puts between its regions. That is not the dividing line the kit refuses inside a menu: that one separates items of one list, this one separates lists — and without it three columns read as one list that has wrapped.

The scrollbar gutter is reserved rather than left to appear: a column that gains one on the fortieth item shifts the two beside it at the moment of a click.

Состояния

<div class="inst-cascader" style="max-block-size:none">
  <div class="inst-cascader-col" role="listbox" aria-label="States">
    <button class="inst-menu-item inst-cascader-item" type="button" role="option"
            aria-selected="true" aria-expanded="true" tabindex="0">On the path</button>
    <button class="inst-menu-item inst-cascader-item" type="button" role="option"
            aria-selected="false" aria-expanded="false" tabindex="-1">A branch</button>
    <button class="inst-menu-item inst-cascader-item" type="button" role="option"
            aria-selected="false" tabindex="-1">A leaf</button>
    <button class="inst-menu-item inst-cascader-item" type="button" role="option"
            aria-selected="false" aria-disabled="true" tabindex="-1">Unavailable</button>
  </div>
</div>

JS

The module is included once per page — there is no need to initialise the components one by one.

What instrument.js does

A column is an ordinary listbox, and everything a listbox promises it gets for free: one Tab stop, ↑ ↓ along it, Home and End, selection following focus.

What a listbox has no notion of is the column beside it, and there the cross-axis arrows are free: in a vertical group ← and → mean nothing at all. So ← and → move between the columns — onto whatever the next column already has selected, or onto its first item.

That behaviour is scoped by class rather than by role, and the distinction is the point. Teaching every listbox in the kit to walk sideways would be changing a role's promise for the sake of one component. A listbox that happens to stand inside .inst-cascader gains a behaviour of the cascader instead, and a listbox anywhere else answers the arrows exactly as it did.

What the application does

cascader.addEventListener('inst:select', (e) => {
  const col = e.target.closest('.inst-cascader-col');
  const level = [...cascader.children].indexOf(col);
  render(level + 1, childrenOf(e.detail.value));   // the column after it
});

One handler. The kit sets aria-selected, moves the roving tabindex and sends the event; what the next column contains is known to the application alone.

What instrument.js does not do

It does not open the popover — that is the platform's popovertarget — and it does not write the path into the trigger. The path is the value of the field, and the value belongs to the application.

API

Связанное

СелектМенюПоповерДеревоТекстовое полеФорма