← All Exercises

Audit Keyboard Focus Order

intermediatejavascript~25min

Background

Positive tabindex values reorder focus unpredictably across browsers. Sorting by DOM position and removing positives is the reliable fix for keyboard users.

Problem

From element metadata, derive the Tab order and flag positive tabindex values plus controls that are interactive but unreachable.

Input

JSON object: { elements: [{ tag, tabindex?, focusable, role? }] }

Output

JSON object: { focusOrder: number[], violations: string[] }

Sample tests

Sample 1

Input: {"elements":[{"tag":"a","focusable":true},{"tag":"div","tabindex":3,"focusable":true},{"tag":"button","focusable":true}]}
Expected: {"focusOrder":[0,2],"violations":["1:positive-tabindex"]}

Sample 2

Input: {"elements":[{"tag":"a","focusable":true},{"tag":"button","focusable":true}]}
Expected: {"focusOrder":[0,1],"violations":[]}

Your solution

Learning objective

Audit focus order structurally before testing with a keyboard.