TIL: Keyboard navigation should tab between components, but not within them

It's fashionable for input boxes to contain a clickable element, e.g. a search icon or a button to clear the input. I've worked on a couple of projects where it was expected that those elements were part of the tab sequence when using a keyboard to navigate the page. E.g. a tab takes you into the input box, where you can type, then onto the search icon thats nested inside the box, then out of the input box and onto the next element.

Turns out that's wrong. ARIA says that only 1 part of a "composite UI component" should receive tab focus:

As described in section Fundamental Keyboard Navigation Conventions, the tab sequence should include only one focusable element of a composite UI component. Once a composite contains focus, keys other than Tab and Shift + Tab enable the user to move focus among its focusable elements.

- Developing a Keyboard Interface: Keyboard Navigation Inside Components

So the other elements (e.g. the search button nested inside a search box) should be navigable via keyboard, but using other keys.

Now that I've read the guide, the behaviour makes a lot of sense. And it seems standard in more traditional elements -- if you open a dropdown select element, the items are navigated using the up and down arrow keys, not the tab key. A group of radio buttons works similarly.

I also learned that the awkwardly named ARIA Authoring Practices Guide has a great Patterns section summarising the recommended keyboard behaviour and attributes for different elements (alerts, comboboxs, tab groups and so on). It focuses on the implementation details needed by devs and has gone into my bookmarks.