Semantic structure and accessibility improvements for the admin navigation sidebar.

[Antoliny]

Currently, the admin navigation sidebar is built using <table> tags.
I don’t think this structure is appropriate from an accessibility perspective.
It has the following issues:

• When accessing the sidebar, it is described as a table, but I’m not sure if the structure that users imagine when they hear “table” matches the actual structure of the sidebar.

• When accessing a row element, the table structure provides a description of which column each item is in. However, since the sidebar does not have the last column, users expect three items in a row, but in reality, only two items are accessible.

• When navigating elements with a screen reader, they are traversed in the wrong order.

Currently, when using the standard element navigation of a screen reader, it moves to the end of the table without accessing the internal elements.
I suspect this issue might be caused by the <a> tag being placed directly under the table.

• Incorrect navigation order during tab navigation.

When using tab navigation, we would expect to navigate from the app to the models under it, but in reality, the models are navigated first, and the apps for those models are navigated last.

To resolve this issue, I believe the structure of app_list(sidebar, index, app index), should be changed to <h>, <ul>, <li>.

[Sarah Boyce]

I saw an agreement that this should be improved within #accessibility in the Discord channel. It may make sense to agree the semantic structure/design before this is picked up