interact-focus-202-t

Test Focusable Property

Testing the focusable property : its default value and animatability on text and anchor elements.

The 1st text is the target of animateColor which starts on focusin, and also has the focusable attribute set to false.

The 2nd text does not have a focusable attribute and is not the target of animations which start by focus events.

The 3rd text is the target of animateColor which starts on focusin.

The 4th text is the target of animateColor which starts on activate.

The 5th text is the child of an a element.

The 6th text is the child of an a element and also has the focusable attribute set to false.

The 7th text has the editable attribute set to simple.

The 8th text is the observer DOMFocusIn and DOMFocusOut handlers.

The 9th and 10th text elements are used to modify the focusable attribute of the 11th element.

The 11th text is the target of animateColor which starts on focusin, and also has the focusable attribute set to false. The focusable attribute is modified by activate events on the 9th and 10th elements.

The 12th and 13th text elements are used to modify the focusable attribute of the 14th element.

The 14th text is the child of an a element - the a element also has the focusable attribute set to false. The focusable attribute is modified by activate events on the 12th and 13th elements.

The focus ring will look like the following: 3, 4, 5, 7, 8, 9, 10, 12 and 13.

Activating the 9th text element will make the 11th element focusable.

Activating the 12th text element will make the 14th element focusable.

Focus navigation is user agent dependant but typically is navigated with the keyboard keys.

TAB or arrow keys move the focus while the ENTER key activates the focused element.