interact-focus-201-t

Test Focusable Property on Animated Elements.

Two rectangles and a text element are targets of animateColor elements which begin on focusin and end on focusout.

The top-level SVG has a nav-next attribute referencing the text element.

When loading the file, initial focus will go to the text element, which should be red.

Moving to the next focus will turn the text black while making the blue rectangle green.

Moving to the next focus will return the rectangle to blue and make the red rectangle green.

Moving to the next focus will return the rectangle to red and turn the text red.

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.

User agent dependent behavior is accepted with all focus tests. Focus can be given immediately to first element in the focus ring, or held in the UA until focus is requested - then focus is given to the first element.