PointerBox

Accessibility and usability expectations

PointerBox is a layout component that wraps content in a visually distinct box, with an arrow/caret pointing to another element on the page.

Text content inside the box must have a colour contrast ratio against the pointer box background of at least 4.5:1.

Important icons or graphical elements inside the box must have a colour contrast ratio of at least 3:1.

Built-in accessibility features

The component is rendered as a semantically neutral <div> container.

The text is resizable and the text spacing adjustable.

If the content of the component is longer/wider than the available viewport space, it reflows over multiple lines and does not cause overflowing content or horizontal scrollbars.

Implementation requirements

Authors can define custom background and border styles. The component allows for any colours to be used. Authors are responsible for choosing an appropriate background color that ensures sufficient text and non-text contrast for the pointer box content.

As the arrow/caret of the component is only visual, the meaning and context of the pointer box content must be clear, even without relying on the caret. If the PointerBox is used to provide an additional description or explanation for an element, make sure to reference the box from the element in question: add an explicit id attribute to the PointerBox, and reference it from the other element using aria-describedby.

How to test the component

Integration tests

• The meaning and purpose of the PointerBox is clear, even without the presence of the arrow/caret
• If the component is used to provide an additional description or explanation for another element on the page, give the PointerBox an id and reference it from the other element using aria-describedby
• If a custom background color is used, text meets the minimum contrast requirement of 4.5:1
• If a custom background color is used, important/meaningful non-text content (such as icons) meets the minimum contrast requirement of 3:1

Component tests

• The component is rendered as a semantically neutral <div>
• Content inside the component reflows to the available viewport space, and does not cause horizontal scrollbars.