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.

The text element is the first focusable element in the focus ring and should be red once receiving focus.

Moving to the previous focus will turn the text black while making the red rectangle green.

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

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.