[ic-divider]: Accessibility failure when used inside a list

[GCHQ-Developer-718]

Summary of the bug

Currently, the ic-side-navigation primary-navigation slot consists of an unordered list, containing ic-navigation-item elements with the listitem role. However, our examples also recommend using ic-dividers in this slot, which is not correct HTML as unordered lists must only contain list item elements, and the ic-divider is a <hr>.

This leads to automated accessibility tests failing.

🧐 Expected behaviour

When an ic-divider is used in the primary-navigation slot of an ic-side-navigation:

1. The unordered list should only contain list item elements
2. The divider should not contribute to the total number of list items announced by a screen reader (e.g. 6 ic-navigation-items and 1 ic-divider should result in a screen reader announcing that the list contains 6 items, not 7)
3. Ideally, the divider should be announced as a separator

Ensure the solution is tested manually with assistive tech for usability as well as running automated tests to ensure there are no failures.

Suggested fix

I believe using a list item with a separator role should achieve all of the above criteria but it would need to be tested:

<ic-divider slot="primary-navigation">
    <li role="separator"></li>
</ic-divider>

instead of the current:

<ic-divider slot="primary-navigation">
    <hr></hr>
</ic-divider>

I'm not entirely sure how it should be implemented. Possibly a new variant of the divider is needed for when it is used in a list?

There will need to be an additional ticket to implement the changes on the guidance site (to the ic-divider guidance and updating component examples which use it).

🚨 Urgency (low, medium or high)

If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.