ibm-sidenav-item has multiple accessibility issues

[rutasip]

Detailed description

This is related to the <ibm-sidenav-item> element inside the ui-shell.

What currently gets rendered in the DOM:

What needs to get rendered instead:

Problem: <ibm-sidenav-item> element between <ul> and <li> elements.

From the Lighthouse report:

1. List items (<li>) are not contained within <ul> or <ol> parent elements. https://web.dev/listitem/?utm_source=lighthouse&utm_medium=cli

2. Lists do not contain only <li> elements and script supporting elements (<script> and <template>). https://web.dev/list/?utm_source=lighthouse&utm_medium=devtools

Possible fix

Use attribute selector for ibm-sidenav-item. That will very likely be a breaking change.

[Akshat55]

This change will NOT be made in current major version (v4). This will be addressed in carbon-components-angular v5 since major changes to the template are required.

This includes changes being made to Accordion & context menu as well.