Accessibility - Dataverse - Nested Interactive Controls

[tander08]

Issue: "Ensure interactive controls are not nested"

(Sample Page): Data for: Qualitative Data Sharing: Participant Understanding, Motivation, and Consent: https://data.qdr.syr.edu/dataset.xhtml?persistentId=doi:10.5064/F6YYA3O3

• Files
• Metadata
• Terms
• Versions

(Sample Page): Data for: Qualitative Data Sharing: Participant Understanding, Motivation and Consent, Data - VandeVusee-Mueller_CognitiveInternviewConsentForm.pdf: https://data.qdr.syr.edu/file.xhtml?persistentId=doi:10.5064/F6YYA3O3/ID8HVJ&version=1.0

• Preview
• Metadata
• Version

Add a New Data Project: https://data.qdr.syr.edu/dataset.xhtml?ownerId=1

• Files Tab
• Select Files to Add Button

[qqmyers]

I'm not sure what to do about this one. The problematic code is generated by the primefaces tabview/tab combination (They create a UL for the tab list and LI (tabindex="0") elements that then contain a link () and the warning appears to relate to both the li and enclosed a having a tabindex. Their showcase page for tabviews has about 50 of these warnings : http://www.primefaces.org:8080/showcase/ui/panel/tabView.xhtml?jfwid=25a2b. I'll check with IQSS but this may be one that just has to get reported to PrimeFaces. (It does look like replacing the 'tabindex="-1"' with 'disabled' on the a element gets rid of the warning without affecting basic functionality, but I don't know if that can be set going through primefaces and haven't yet checked to see if I can still get the tab highlighting to work with it.)

[qqmyers]

I suspect that the PrimeFaces Java has to change for this but one additional note: I read more on the internet and found a suggestion to mark the li element as role="presentation" and make the a element have role="tab". As in:

`<ul class="ui-tabs-nav ui-helper-reset ui-widget-header ui-corner-all" role="tablist">
  <li class="ui-tabs-header ui-state-default ui-tabs-selected ui-state-active ui-corner-top" role="presentation">
    <a href="#datasetForm:tabView:metadataMapTab" role="tab" aria-expanded="true" aria-selected="true" data-index="0" tabindex="0">
      Metadata
    </a>
  </li>
</ul>`

Still would need to check that this works with multiple tabs, but it might be a solution to try/propose to PrimeFaces.

[adam3smith]

Also no use to just work around getting a warning -- let's figure out what exactly this is meant to address in terms of accessibility and think about if it is a problem here and if so, what to do about it. Leaving open for now.