How tabindex=-1 and aria-activedescendant Actually Control Keyboard Focus in Browsers

Web developers building custom widgets like dropdowns and combo boxes often struggle with keyboard focus behaving unexpectedly for keyboard and screen reader users. The attribute tabindex='-1' makes an element programmatically focusable but removes it from the natural tab order, which is useful for widgets that manage navigation internally. The ARIA attribute aria-activedescendant allows a focused container to signal which child item is currently active, letting screen readers announce the selection without shifting real DOM focus. A common pitfall is that aria-activedescendant only works correctly when its container element is itself focused; otherwise, assistive technologies have no anchor to follow. Understanding this distinction — between true browser focus and virtual screen reader focus — is essential for building accessible, keyboard-navigable UI components.