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 table (app) element, it is described as having three columns, but I’m not sure exactly what columns exist in the current structure.

I feel that it was designed with a flawed structure from the start, providing an inaccurate description.
(For reference, the current columns are "model name", "add link" and "change or view list".
On the admin index page, this description is somewhat accurate, but in the sidebar, the change or view list link does not exist, so I believe it is definitely an incorrect description.)

• 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>.