A page you cannot tab through

1. The search box that goes first

Someone wanted search "near the start" and wrote tabindex="1". Tab now begins here, before the skip link, before the nav, before anything.

2. The dialog that is hidden from screen readers only

aria-hidden="true" hides it from assistive technology and does nothing whatsoever to the tab order, so the keyboard still lands on a button a screen reader has been told is not there.

3. The drawer that is only closed visually

One of these is display: none and genuinely gone. The other is opacity: 0, still in the tab order, and will swallow two tab presses into a menu nobody can see.

4. The backdrop that did it properly

inert takes the whole subtree out of the tab order and the accessibility tree together. This is the fix for section 2.

5. Two ways to hide a skip link

The first is width: 0; height: 0 and cannot be focused, so the skip link never works. The second uses the clip-rect pattern, is invisible, and still takes focus.

6. The toolbar that reads backwards

flex-direction: row-reverse moved the boxes. It did not move the tab order, so focus runs right to left across this row.

7. The ones that are fine

A tabindex="-1" heading target and a disabled button. Both are skipped on purpose, and neither is a bug.

A heading focused by script after routing