Accessibility: Failed Listview Accessibility Tests

[clepore]

Original Issue: http://jira.infor.com/browse/SOHO-7938

---

Axe is reporting the following WCAG2AA errors as critical errors on a handful of Listview component test pages:

• http://localhost:4000/components/listview/example-index:

Description: Ensures ARIA attributes are allowed for an element's role

Fix any of the following: ARIA attribute is not allowed: aria-selected="true"...

<li class="selected" aria-selected="true" tabindex="0">
 <a href="#" aria-disabled="true"><span class="audible">You are currently on page  </span>1</a>
</li>

Breaks axe rule: aria-allowed-attr

• http://localhost:4000/components/listview/example-mixed-selection
• http://localhost:4000/components/listview/remove-clear

Description: Ensures every form element has a label

Help: Form elements must have labels for about 12 nodes...

Fix any of the following:

• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible
• Form element does not have an implicit (wrapped) <label>
• Form element does not have an explicit <label>
• Element has no title attribute or the title attribute is empty

  <input tabindex="-1" type="checkbox" class="checkbox hide-focus">

  Breaks axe rules:

  • aria-label
  • aria-labelledby
  • implicit-label
  • explicit-label
  • non-empty-title

• http://localhost:4000/components/listview/example-mixed-selection:

Description: Ensures ARIA attributes are allowed for an element's role

Help: Elements must only use allowed ARIA attributes

Fix any of the following:

• ARIA attribute is not allowed: aria-selected="true"

  <li class="selected" aria-selected="true" tabindex="0">
  <a href="#" aria-disabled="true"><span class="audible">You are currently on page  </span>1</a>
  </li>

  Breaks axe rules:

• aria-allowed-attr

Follow debugging instructions on docs/TESTING.md to investigate the issue in the devTools console, and run test in high-contrast which has disables zero rules. These errors can also be double checked with Chrome Audit in devTools, or use the Chrome or Firefox extension, https://www.axe-core.org/

[tmcconechy]

Also as per #1721 - the listbox incorrectly has a role="presentation" not sure if thats flagged but noting it here

[EdwardCoyle]

Unassigned myself for now, just in case we don't get to it this sprint. If anyone wants to pick this up and needs some details, feel free to ping me.

[EdwardCoyle]

Leaving this on hold for the moment. After looking at the elements that were being reported, I realized that many of them are "implicit" label/inputs (read: the label wraps the input field, so there's no need for other aria labels or matching for/id attributes). See my video of dev tools against Axe's reporting below:

I'm going to look through their issue tracker to see there are any reported issues related to this, or maybe open one.

[EdwardCoyle]

Pushed a branch 403-listview-accesibility that has my terminal output tool, and enables the broken listview e2e tests so someone else can pick this up and test while I'm out, if we need to.

[janahintal]

QA Passed. Will move to done. Thanks Tested in: http://master-enterprise.demo.design.infor.com/components/listview/example-index http://master-enterprise.demo.design.infor.com/components/listview/example-mixed-selection http://master-enterprise.demo.design.infor.com/components/listview/remove-clear