Invental/Review lessons/Accessibility and UI behaviour

Accessibility and UI behaviour

The menu and the command must share one rule

If a UI shows a command as available, check it against the same rules the command will run with. Otherwise the menu offers actions that throw.

01 · Before and afterThe pattern

TypeScript
// one predicate feeds both isActive() and apply()
function canConvert(state, pos, targetType) {
  const $pos = state.doc.resolve(pos);
  return $pos.parent.canReplaceWith($pos.index(), $pos.index() + 1, targetType);
}
const targets = blocksInSelection(state).filter((b) => canConvert(state, b.pos, targetType));

02 · Run it on your appThe check

For each toggle in your editor or UI, does “is it on?” use the same code path as “turn it on”, and is there a test that toggles twice?

If the honest answer is no or not sure, this is worth a look before it reaches production.

Want this checked on your code?

Tell us what you are building and what worries you. We match a senior reviewer to your code and confirm scope before anything starts.

— Get in touch
hi@invental.co ↗
— Or
— What to include

A link or short description of the code or system, what you want checked, your stack, and when you need the answer. No repository access is needed until scope is agreed.

— Or leave a note
We reply within one business day.