[Deque Analysis] Admin/Action Sidebar's "serious" accessibility issues

[tdonohue]

Serious: This issue results in serious barriers for people with disabilities, and will partially prevent them from accessing fundamental features or content. People relying on assistive technologies will experience significant frustration as a result. Issues falling under this category are major problems, and remediation should be a priority.

Deque Analysis Summary

Our Admin/Action Sidebar as a total of 20 serious accessibility issues (not including color contrast which are handled in other tickets).

1. (IDs 469240, 469241, 469242, 469243, 469244, 469245, 469246, 469247, 469248, 469249, 469250, 469251, 469252) "<ul> and <ol> must only directly contain <li>, <script> or <template> elements" and "<li> elements must be contained in a <ul> or <ol>" (Occurs on entire Admin sidebar menu, as it's made up of <ul> and <li> elements)
   • It appears our <ul> elements tend to contain a custom Angular template (e.g. ds-expandable-admin-sidebar-section) which then contains the <li>. We may need to find a way to stop Angular from printing out the template tag, if that's possible. Some possible hints https://stackoverflow.com/q/38716105/3750035
   • NOTE: This same issue occurs in the menus of the Header, see [Deque Analysis] Header's "serious" accessibility issues #1174, so we'd want to share a similar solution between the Header and the Admin Sidebar.
2. (ID 470071) "Expand/Collapse state of the elements is missing or incorrect." on every section header in Admin menu (e.g. "New", "Edit", "Impot", "Export", etc.)
   • Currently these are all links (<a>), but Deque recommends using the aria-expanded attribute (set to true/false) on a toggle element (like a <button>). See https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
3. (ID 470075, 470079, 470095, 470098, 470099) "Link disabled state is not conveyed." on all disabled menu options in sidebar.
   • NOTE: Nothing to do here...this will be fixed in Remove menu options for disabled features #1145 (by removing these disabled menu options)
4. (ID 470106) "Hidden or empty element receives focus." on all collapsed menu options. When a section is collapsed, it's entries still get keyboard focus (when using the tab key).
   • HOW TO FIX: Fix this issue by using ONE of the following techniques:
     • If the element should not be visible or focusable, remove the element from the DOM or hide it from all users with CSS such as display:none.
     • If the element is meant to be visible but not interactive, make it visible and remove the focus state.
     • If the element is meant to be visible and interactive, then ensure that it is both focusable and visible to all users.

Full list of issues is viewable at (requires login): https://axeauditor.dequecloud.com/test-run/0856438a-a19a-11eb-bc31-b7d5be387c86/issues?activeTab=dt-issue&page=0&pageSize=50&sortField=ordinal&sortDir=asc&filter%5Bseverity%5D=3&filter%5Btype%5D=issue&filter%5Bpage_number%5D=9&row=9

[artlowel]

1. (IDs 469240, 469241, 469242, 469243, 469244, 469245, 469246, 469247, 469248, 469249, 469250, 469251, 469252) "<ul> and <ol> must only directly contain <li>, <script> or <template> elements" and "<li> elements must be contained in a <ul> or <ol>" (Occurs on entire Admin sidebar menu, as it's made up of <ul> and <li> elements)

This is trickier than the stackoverflow post because in our case the elements are dynamically loaded. We can't just change their tag to <li> in the parent component. Nonetheless I think I have a workaround. However the css is currently written for the exact structure the menu had, so will need some serious tweaking afterwards.

The solution will also affect the public menu as they share the same components, so I'd remove this section from #1174 to prevent conflicts.

2. (ID 470071) "Expand/Collapse state of the elements is missing or incorrect." on every section header in Admin menu (e.g. "New", "Edit", "Impot", "Export", etc.)

We'll turn the expandable menu sections in to buttons and give them an aria-expanded attribute

3. (ID 470075, 470079, 470095, 470098, 470099) "Link disabled state is not conveyed." on all disabled menu options in sidebar

While we no longer show have disabled menu options currently, the component still exists. It's easy enough to add aria-disabled="true" to it, so we'll do so.

4. (ID 470106) "Hidden or empty element receives focus." on all collapsed menu options. When a section is collapsed, it's entries still get keyboard focus (when using the tab key).

We'll either not render invisible parts of the menu or hide them with display none. This will require us to know whether or not the they are visible inside the menu option component rather than only in the parent as is currently the case.

Fixing these issues will take an estimated 12 hours

[tdonohue]

Thanks @artlowel . Those details & estimates sound reasonable to me. I've also removed the menu section from #1174, noting that it'll be fixed by this ticket instead. I'll add the estimate & assign back to you for your team to work on when you are ready.

[tdonohue]

@artlowel : Just an FYI, just realized the <ul> and <li> issue also exists in the submission form. See #1187. I'm not sure if that should also be added to this ticket? Or perhaps it should just use the same solution that you develop in this ticket?

[artlowel]

@tdonohue That seems to be a more straightforward case where there's simply a <div> inside an <ul> in the HTML of a single component. No dynamic component loading involved.