[EuiTimeline][COGNITION]: Could we refine the HTML to make this an ordered list with list items?

[1Copenut]

Description

@miukimiu is / will be releasing an EuiTimeline component as part of PR #5730. I would like to consider a feature request to adjust the HTML to make this component an ordered list (OL) with list items and an optional accessible label. This should allow us to retain the current styling and improve the semantic meaning for screen readers.

By making this a list with an accessible name, the timeline will appear in screen readers' "Lists" menu and be available in the List shortcut key. I'm proposing HTML something like the following:

<ol class="euiTimeline" aria-label="Project Beta Timeline">
  <li class="css-88d0w-euiTimelineItem">...</li>
  <li class="css-88d0w-euiTimelineItem">...</li>
  <li class="css-88d0w-euiTimelineItem">...</li>
</ol>

Guidance

• https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

---

[miukimiu]

Thanks, @1Copenut. I'll prioritize this issue before going back to #5692.

[1Copenut]

Thank you @miukimiu!

[chandlerprall]

Talked through this with @miukimiu a bit and we'll try out ol+li by default but exposing an as prop to allow overriding for other scenarios (ul, and non-wrapped timeline items should be a div - or at least not an li)

[1Copenut]

Thank you both for the quick turnaround and collaborative approach to enhancement.