PointerBox

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

Accessibility and usability expectations

Presentation

Vision

• Text content inside the box must have a color contrast ratio against the PointerBox background of at least 4.5:1
• Important icons or graphical elements inside the box must have a color contrast ratio of at least 3:1

Mobility

• The PointerBox itself does not have specific mobility considerations as it is a non-interactive component. However, any interactive elements contained within should adhere to mobility best practices, such as ensuring sufficient touch target sizes and spacing

Adaptability

• Text within the PointerBox is resizable, and spacing is adjustable to accommodate user preferences and needs
• If the content exceeds the available viewport space, the PointerBox reflows over multiple lines, preventing content overflow or the appearance of horizontal scrollbars

Interaction

Keyboard

• The PointerBox is a non-interactive layout component and does not have inherent keyboard interactions. Any interactive elements within the PointerBox should manage their own keyboard accessibility

Engineering for AT Compatibility

Screen reader

• Rendered as a semantically neutral <div> container, the PointerBox does not convey any specific role to assistive technologies by default
• If the PointerBox provides supplementary information for another element, it should be associated with that element using aria-describedby. This involves assigning an id to the PointerBox and referencing it from the related element
• The visual arrow or caret is purely decorative; therefore, the content within the PointerBox must be understandable without relying on this visual cue

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 colors 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