(Bug) - StructuredList with Divider has an a11y issue

[evgenitsn]

Describe the bug

The StructuredList component when rendered with divider prop has an accessibility issue.
It renders <hr/> elements as direct children of <ul> next to <li>s which is not correct.

https://dequeuniversity.com/rules/axe/4.4/list

This gets triggered by the axe plugin only if we pass role="list" prop to the <StructuredList> and that's why is doesn't show as an issue on the newskit storybook. If you pass a role to any example with dividers it should start complaining.

To Reproduce

Steps to reproduce the behavior:

1. Render a StructuredList with divider and pass a role="list" to it.
2. Open and scan the whole page with axe DevTools extension
3. See "Certain ARIA roles must contain particular children" error

To solve this problem, you need to fix at least (1) of the following:
Element has children which are not allowed (see related nodes)
Element has no aria-busy="true" attribute

Here is a code snippet of how we use the StructuredList

          <StructuredList
            divider={showDivider}
            ariaLabel={ariaLabel || introductionProps?.title}
            {...{ role: 'list' }}
          >
            {children as any}
          </StructuredList>

Link to the source: https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/shared-components/src/ContentListView/ContentListView.tsx#L63-L69

Expected behaviour

An a11y error should not show. The ul can't have direct <hr> children.
A proposal to fix this could be to wrap the <hr> elements in <li> elements, hide them and move the aria-hidden from the hr to the wrapping li elements.

Screenshots / Video / Test Environment

Desktop (please complete the following information):

• OS: macOS Ventura
• Browser Chrome
• Version 110.0.5481.177

Additional context

Add any other context about the problem here.