Interaction

Some components may be interactive, for example they may be focused, clicked, selected, expanded, searched or edited.

Element interaction can be completely disabled using the inert attribute. Among other things, inert prevents click and focus events. This can be useful for focus trapping, e.g. in modals, and for other (accessibility) concerns. [MDN, MDN, webkit.org, chrome-dev, WICG/inert]

Target

A target is the thing that can be interacted with. Targets are also called touch, tip, click, or hover targets depending on the user's device.

• ishadeed.com/article/target-size
• mayank.co/blog/hover-triangles

Focus

Use the tabindex attribute to make an element focusable, change tab order, or disable focus [MDN].

An element can be focused programmatically with the focus() method. The optional options parameter allows to control aspects of the focussing process [spec]. preventScroll indicates whether the browser should scroll to the focused element into view. And focusVisible indicates whether the focused element should apply its (default) :focus styling. [MDN]

Focus behaviour on macOS/Safari is configurable and inconsistent with other platforms/browsers [mayank.co].

The focus, blur, focusin, and focusout events use the FocusEvent interface [MDN]. The relatedTarget property of FocusEvent references the element losing or receiving focus (if any) [MDN].

Find in Page

Most browsers offer a search functionality to find text on the current page [spec]. Setting the attribute hidden="until-found" hides an element, but makes its content searchable by the browser and the element will appear if it contains the search text [MDN, spec]. Browsers may also expand closed details if they match the search text [spec]. Currently, only Chromium-based browsers support that. Hidden-until-found elements receive the beforematch event before they are about to be revealed [MDN].