Indicators
The focus indicator displays on the user interface (UI) element that currently has focus (i.e., when the test taker has clicked, tapped, or navigated to the element using keyboard controls).
The indicator is rendered as a hairline dotted outline for most student-facing UI elements. To ensure visibility, the indicator’s color typically matches that of the element’s content (e.g., a button with white text will also have a white focus indicator).
The following example presents the inset and outset focus indicators for two respective buttons.
To view alternative presentations and styling, use the Change Theme 
and Read Aloud 
buttons in the upper-right of the screen.
Focus for Interactive Points & Sizing Handles
Because Points, Lines, Polygons, and single-direction sizing handles (see Transformable Objects) typically appear in denser contexts, they receive a more assertive focus indicator, which consists of a gray #949494 circular border. Focus indicators for single-direction sizing handles also have a 50% opaque white #FFFFFF fill. (This focus ring also serves as a hover state.)
The following presents an interactive point and a single-direction sizing handle.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Additional examples of focus indicators can be viewed by selecting interactive elements in demos throughout the style guide.
Scroll Indicator
The scroll indicator appears at the lower right of the screen, adjacent to the scrollbar, when assessment content other than reading stimulus passages requires vertical scrolling. The indicator receives the pointer icon in all states.
The scroll indicator initially appears in the More state, which includes a chevron-down-thin icon at the bottom. When pressed, the scroll indicator takes the test taker to the bottom of the content area and then changes to the Top state, which includes a chevron-up-thin icon at the top. The state change will also occur if the test taker scrolls to the bottom of the content area manually.
Pressing the scroll indicator in the Top state returns the test taker to the top of the content area, and the indicator then disappears. The state change will also occur if the test taker scrolls to the top of the content area manually. Once it has disappeared from a screen, the scroll indicator will not return on that screen during the current session.
The following demo presents an interactive scroll indicator on the right-hand side of the container.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Loading Indicator
When the system is processing data or loading content and so cannot be interacted with, the loading indicator displays in the center of the screen on top of a semi-transparent gray background. The indicator is green #1B891B with rounded corners, and a rotating spinner icon appears at its left side.
The following demo presents the behavior of the loading indicator.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Focus Indicator