Skip to content

Main content

Random Focus Order Fixture Generator

Shuffle supplied controls and derive a positive-tabindex-first, DOM-tied order excluding hidden/negative controls under an explicit convention, retaining attribute-only core flags.

Loading tool…

Description

Shuffle supplied controls and derive a positive-tabindex-first, DOM-tied order excluding hidden/negative controls under an explicit convention, retaining attribute-only core flags.

An interface fixture makes content and state explicit so a consumer can test a rendering or interaction. Literal labels, modeled states, and calculated geometry remain separate from what a browser or assistive technology actually displays or announces.

Shuffle supplied controls and derive a positive-tabindex-first, DOM-tied order excluding hidden/negative controls under an explicit convention, retaining attribute-only core flags.

When to use this tool

Use this generator to create reproducible focus order fixture cases from the supplied model or bank. Inspect the returned evidence before using cases in a test or exercise.

How to use the tool and how it works

  1. Supply controls in the field shapes below. Set seed when you need an explicit replay.
  2. Run the tool and correct any input error. For generated controls, distinguish a successful fixture containing an invalid case from failure to generate the fixture.
  3. Read controls, expectedOrder. Use the conventions below. Keep answer-bearing fields separate when presenting an exercise.

Shuffle controls into a synthetic DOM order, delegate positive-tabindex checks, and exclude hidden controls and negative tabindex values from the modeled sequential order. Sort positive tabindex values first, then zero, preserving DOM order within equal values.1

Delegated operations used for this result: tabindex positive antipattern checker. Their calculation or parsing conventions apply to the corresponding result fields.2

Input fieldMeaning and unitsAccepted input
controlsControlsRequired. Array of Object; no unknown keys.; minimum items 1; maximum items 32.
controls[].idLiteral identifier used independently of display labels.Required. Text; minimum UTF-16 length 1; maximum UTF-16 length 32.
controls[].labelSupplied display label.Required. Text; minimum UTF-16 length 1; maximum UTF-16 length 128.
controls[].tabindexTabindexRequired. Safe integer; minimum -9007199254740991; maximum 9007199254740991.
controls[].hiddenHiddenRequired. Boolean.
seedOptional numeric seed; takes precedence over context randomness. Without either, use the fixed tool.io default seed.Optional. Safe integer.
Output fieldInterpretationReturned shape
controlsControlsRequired. Array of Object; no unknown keys.; minimum items 1; maximum items 32.
controls[].idLiteral identifier used independently of display labels.Required. Text; minimum UTF-16 length 1; maximum UTF-16 length 32.
controls[].labelSupplied display label.Required. Text; minimum UTF-16 length 1; maximum UTF-16 length 128.
controls[].tabindexTabindexRequired. Safe integer; minimum -9007199254740991; maximum 9007199254740991.
controls[].hiddenHiddenRequired. Boolean.
controls[].domIndexDom IndexRequired. Safe integer; minimum 0; maximum 31.
controls[].htmlHtmlRequired. Text; maximum UTF-16 length 131072.
controls[].checkCheckRequired. Object; no unknown keys.
controls[].check.positiveOrderingPositive OrderingRequired. Boolean.
controls[].check.requestsSequentialFocusRequests Sequential FocusRequired. Boolean.
controls[].check.requestsProgrammaticFocusRequests Programmatic FocusRequired. Boolean.
expectedOrderExpected OrderRequired. Array of Text; minimum UTF-16 length 1; maximum UTF-16 length 32.; minimum items 0; maximum items 32.
randomnessReplay source and normalized 32-bit seed, or null seed for an advancing context source.Required. Object; no unknown keys.
randomness.seedOptional safe-integer replay seed; normalization and precedence are explained below.Required. Safe integer. or Null.
randomness.sourceSourceRequired. Text; one of "context", "seed".

An explicit safe-integer seed takes precedence over injected context randomness and is normalized to an unsigned 32-bit integer. With no seed and no context source, replay uses the fixed tool.io default seed. A context source must return finite values from zero inclusive to one exclusive; its advancing state must be retained separately. randomness records the source and normalized seed, or null for context. These generators are not cryptographic random sources.

json
{
  "input": {
    "controls": [
      {
        "id": "a",
        "label": "Alpha",
        "tabindex": 0,
        "hidden": false
      },
      {
        "id": "b",
        "label": "Beta",
        "tabindex": 2,
        "hidden": false
      },
      {
        "id": "c",
        "label": "Gamma",
        "tabindex": -1,
        "hidden": true
      }
    ],
    "seed": 42
  },
  "output": {
    "controls": [
      {
        "id": "b",
        "label": "Beta",
        "tabindex": 2,
        "hidden": false,
        "domIndex": 0,
        "html": "<button id=\"b\" tabindex=\"2\">Beta</button>",
        "check": {
          "positiveOrdering": true,
          "requestsSequentialFocus": true,
          "requestsProgrammaticFocus": true
        }
      },
      {
        "id": "a",
        "label": "Alpha",
        "tabindex": 0,
        "hidden": false,
        "domIndex": 1,
        "html": "<button id=\"a\" tabindex=\"0\">Alpha</button>",
        "check": {
          "positiveOrdering": false,
          "requestsSequentialFocus": true,
          "requestsProgrammaticFocus": true
        }
      },
      {
        "id": "c",
        "label": "Gamma",
        "tabindex": -1,
        "hidden": true,
        "domIndex": 2,
        "html": "<button id=\"c\" tabindex=\"-1\" hidden>Gamma</button>",
        "check": {
          "positiveOrdering": false,
          "requestsSequentialFocus": false,
          "requestsProgrammaticFocus": true
        }
      }
    ],
    "expectedOrder": [
      "b",
      "a"
    ],
    "randomness": {
      "seed": 42,
      "source": "seed"
    }
  }
}

Limitations and assumptions

  • The model covers the returned buttons only. It does not model shadow DOM, disabled states outside this contract, browser focus quirks, or assistive technology. A positive tabindex flag is distinct from the computed order.
  • A replay requires the same complete input and implementation. The stated sampling convention applies within its eligible space. A finite draw does not exhaust all possible outputs; repeats remain possible unless a distinct-selection rule is explicit.
  • The field tables state structural bounds; cross-field constraints and bounded search or output budgets also apply. Unknown keys are rejected where the object contract disallows them. Input errors are distinct from null fields and deliberate invalid controls in a successful output.

Alternative or Complementary methods

For a supplied example, inspect the returned construction or delegated check directly. To evaluate a consumer, also test cases chosen for its own boundaries; a generated finite corpus does not establish exhaustive coverage.

References

  1. Tool behavior and example: Random Focus Order Fixture Generator — tool.io

  2. Calculation or validation: html/tabindex-positive-antipattern-checker — tool.io

Similar or alternative tools