Show focused element
- Tracks current element in focus and draws an additional focus indicator over the top
- The focus indicator is absolutely positioned with a high z-index and should appear above other page elements that are fixed/absolutely positioned
- The intention here is to provide a visualisation of elements that have focus obscured by things like sticky headers/footers
- Useful to run this before taking a screenshot of 2.4.11 issues (otherwise you have a screenshot of something that cannot be seen!)
Add the following link to your bookmarks/favourites toolbar:
👉 Show focused element 👈
Explanatory video
Note that the video below has no audio.
The video shows focused elements getting a focus indicator (red and white) which is absolutely positioned over the element, as well as a very minimal information panel that just shows the item's text content and its role (if it is exposed).
A classic focus obscured issue is demonstrated, whereby a sticky footer element is hiding an element underneath it that is in focus. With the new, additional, focus indicator, it sits above the sticky footer. When providing a screenshot of such faults, this will help to visualise where the problem is.