0
237
Viewshow can google.com put a tab focus on an element that is not focusable
Please go to google.com and search for 'dictionary', navigate through tab key and select "skip to main content":
After hitting enter, the dictionary element gets focused:
When I inspect it, it's a div with a aria-level attribute with no tabindex.
So my question is how can a non-focusable element gets focused like that?
EDIT: When I tried to save that exact div element into a global var and call focus, it never gets focused.
1 answers
Answer question0
When you press Enter on that message, JavaScript code adds tabindex="-1" to the element and focuses it. Before Enter:
After:
When focus leaves the element (presumably a blur event handler), JavaScript code removes the tabindex from the element.
You can see this if you right-click the element and reveal it in the Elements panel, then watch the element as you tab until you see that element again. For instance, if you click anywhere near the top of the body of the page after opening the Elements panel and Shift+Tab, eventually you get that same "Show main content" box again, and when you press Enter you can see the tabindex get added (and then see it get removed when you move away).