Timeline

Accessibility and usability expectations

Currently the timeline is implemented using non-semantic <div> elements. Using a semantic list to convey the structure would be beneficial as screen readers would announce how many items there are, and where the timeline and each item starts and ends.

The vertical lines that connect timeline items lack color contrast, so some users with low vision will not see them. The lines are decorative, as the presence of the time line and visual structure is conveyed through the vertically aligned badge icons and indented text, so there is no WCAG requirement for the vertical lines to have a 3:1 contrast ratio against the background.

An "octicon" can be set as the badge for a particular timeline item. The icon conveys visual information about what type of message is within an item, such as if it is a commit message, a review request, a deployment, an approved review, or a merge. When the icon is the only way to know what type of message is in an item, a text alternative must be provided. Providing a text alternative is likely always useful, even when the information is available from the text in the item, as it enables a screen reader user to get an indication of the type of message without having to listen to the whole message. This can help a screen reader user find relevant messages more efficiently.

The text in a timeline item must meet colour contrast requirement of 4.5:1, and be resizable and zoomable without loss of content and without requiring horizontal scrolling, so that it can be read by users with low vision

Timeline breaks

The Timeline.Break component allows for content in the Timeline to be visually separated. This should be used for decorative purposes only. Since this component is decorative, it is not conveyed to assistive technologies like screen readers and is not required to meet contrast requirements.

The content within Timeline.Item should clearly communicate the status and state of that item, so that if there is a need to separate content, the context of the separation is communicated in Timeline.Item.

Built-in accessibility features

The text meets the colour contrast requirement of 4.5:1, and is resizable and can be zoomed without loss of content or requiring horizontal scrolling.

The accessible name of an icon can be set by passing an aria-label to Octicon.

Implementation requirements

It is not yet possible to use a list for the timeline, only non-semantic <div> elements.

Provide an appropriate text alternative for each icon by applying an aria-label to the Octicon:

<Timeline.Item>
    <Timeline.Badge>
    <Octicon icon={GitCommitIcon} aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>Update with a long format description</Timeline.Body>
</Timeline.Item>

How to test the component

Integration tests

• Icons that are not decorative have an appropriate accessible name
• If content within the timeline is visually separated, using Timeline.Break, the context of the separation is communicated in Timeline.Item

Component tests

• The text meets the colour contrast requirement of 4.5:1
• The text is resizable and can be zoomed without loss of content or requiring horizontal scrolling
• When an aria-label with a value is applied to Octicon, an aria-label with the value is rendered on the icon SVG, and the icon is not hidden from the accessibility tree