ICEfaces
  1. ICEfaces
  2. ICE-5538

Sparkle: Add ARIA support to tabset component

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.0-Beta2, 2.0.0
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      ARIA
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration

      Description

      Add ARIA support to tabset component or make sure if YUI ARIA plugin works with parkle tabset component.

        Issue Links

          Activity

          Hide
          Adnan Durrani added a comment -

          To support facet based label, we had introduced custom markup. YUI ARIA plugin is written on specific markup hierarchy that is why it doesn't work our markup.

          As we support facet based label so we renders 'div' for tab label container which obviously are not focusable. To add the ARIA support first we have to make these divs focusable.

          Show
          Adnan Durrani added a comment - To support facet based label, we had introduced custom markup. YUI ARIA plugin is written on specific markup hierarchy that is why it doesn't work our markup. As we support facet based label so we renders 'div' for tab label container which obviously are not focusable. To add the ARIA support first we have to make these divs focusable.
          Hide
          Adnan Durrani added a comment - - edited

          To make it sure if the ARIA role are being render on proper markup, I gathered the following markup which is using YUI tabset and Sparkle tabset with and without label facet. It shows that roles are being applied properly.

          YUI Tabset:
          <div class="yui-navset yui-navset-top" id="demo">
          <ul class="yui-nav" role="tablist">
          <li role="presentation" title="active" class="selected">
          <a tabindex="-1" id="yui-gen0" role="tab">
          <em>Tab One Label</em>
          </a>
          </li>
          <li role="presentation" title="">
          <a tabindex="-1" id="yui-gen1" role="tab">
          <em>Tab Two Label</em>
          </a>
          </li>
          </ul>
          <div class="yui-content">
          <div id="tab1" role="tabpanel" labelledby="yui-gen0"><p>Tab One Content</p></div>
          <div id="tab2" role="tabpanel" labelledby="yui-gen1" class="yui-hidden"><p>Tab Two Content</p></div>
          <div id="tab3" role="tabpanel" labelledby="yui-gen2" class="yui-hidden"><p>Tab Three Content</p></div>
          </div>
          ------------------------------

          Sparkle Tabset without label facet:
          <div class="yui-navset yui-navset-top">
          <ul class="yui-nav" role="tablist">
          <li class="selected" title="active" role="presentation">
          <div class="yui-navdiv" tabindex="0" id="yui-gen0" role="tab">
          <em>
          Tab contents
          <a style="visibility: hidden;"></a>
          </em>
          </div>
          </li>
          <li role="presentation">
          <div class="yui-navdiv" tabindex="-1" id="yui-gen1" role="tab">
          <em>
          Disabled tab
          <a style="visibility: hidden;"></a>
          </em>
          </div>
          </li>
          </ul>
          <div id="j_idt8:j_idt10cnt" class="yui-content">
          <div id="j_idt8:j_idt11" class="" role="tabpanel" labelledby="yui-gen0">
          YUI generally
          </div>
          <div id="j_idt8:j_idt13" class="yui-hidden" role="tabpanel" labelledby="yui-gen1">
          The TabView control
          </div>
          </div>
          <div>
          ------------------------

          Sparkle Tabset with label facet:
          <div class="myTab yui-navset yui-navset-top">
          <ul class="yui-nav" role="tablist">
          <li class="selected" title="active" role="presentation">
          <div class="yui-navdiv" tabindex="0" id="yui-gen3" role="tab">
          <em>
          Tab is using
          <a style="visibility: hidden;"></a>
          </em>
          </div>
          </li>
          <li role="presentation">
          <div class="yui-navdiv" tabindex="-1" id="yui-gen4" role="tab">
          <em>
          Disabled tab
          <a style="visibility: hidden;"></a>
          </em>
          </div>
          </li>
          </ul>
          <div class="yui-content">
          <div id="j_idt8:j_idt20" class="" role="tabpanel" labelledby="yui-gen3">
          test contents
          </div>
          <div id="j_idt8:j_idt23" class="yui-hidden iceOutConStatActv" role="tabpanel" labelledby="yui-gen4">
           
          </div>
          </div>
          </div>

          Show
          Adnan Durrani added a comment - - edited To make it sure if the ARIA role are being render on proper markup, I gathered the following markup which is using YUI tabset and Sparkle tabset with and without label facet. It shows that roles are being applied properly. YUI Tabset: <div class="yui-navset yui-navset-top" id="demo"> <ul class="yui-nav" role="tablist"> <li role="presentation" title="active" class="selected"> <a tabindex="-1" id="yui-gen0" role="tab"> <em>Tab One Label</em> </a> </li> <li role="presentation" title=""> <a tabindex="-1" id="yui-gen1" role="tab"> <em>Tab Two Label</em> </a> </li> </ul> <div class="yui-content"> <div id="tab1" role="tabpanel" labelledby="yui-gen0"><p>Tab One Content</p></div> <div id="tab2" role="tabpanel" labelledby="yui-gen1" class="yui-hidden"><p>Tab Two Content</p></div> <div id="tab3" role="tabpanel" labelledby="yui-gen2" class="yui-hidden"><p>Tab Three Content</p></div> </div> ------------------------------ Sparkle Tabset without label facet: <div class="yui-navset yui-navset-top"> <ul class="yui-nav" role="tablist"> <li class="selected" title="active" role="presentation"> <div class="yui-navdiv" tabindex="0" id="yui-gen0" role="tab"> <em> Tab contents <a style="visibility: hidden;"></a> </em> </div> </li> <li role="presentation"> <div class="yui-navdiv" tabindex="-1" id="yui-gen1" role="tab"> <em> Disabled tab <a style="visibility: hidden;"></a> </em> </div> </li> </ul> <div id="j_idt8:j_idt10cnt" class="yui-content"> <div id="j_idt8:j_idt11" class="" role="tabpanel" labelledby="yui-gen0"> YUI generally </div> <div id="j_idt8:j_idt13" class="yui-hidden" role="tabpanel" labelledby="yui-gen1"> The TabView control </div> </div> <div> ------------------------ Sparkle Tabset with label facet: <div class="myTab yui-navset yui-navset-top"> <ul class="yui-nav" role="tablist"> <li class="selected" title="active" role="presentation"> <div class="yui-navdiv" tabindex="0" id="yui-gen3" role="tab"> <em> Tab is using <a style="visibility: hidden;"></a> </em> </div> </li> <li role="presentation"> <div class="yui-navdiv" tabindex="-1" id="yui-gen4" role="tab"> <em> Disabled tab <a style="visibility: hidden;"></a> </em> </div> </li> </ul> <div class="yui-content"> <div id="j_idt8:j_idt20" class="" role="tabpanel" labelledby="yui-gen3"> test contents </div> <div id="j_idt8:j_idt23" class="yui-hidden iceOutConStatActv" role="tabpanel" labelledby="yui-gen4">   </div> </div> </div>
          Hide
          Adnan Durrani added a comment -

          Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\resources\org.icefaces.component.util\util.js
          Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\tab\TabMeta.java
          Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\tab\TabSetRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\tab\TabSetRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\tab\TabMeta.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\resources\org.icefaces.component.util\util.js
          Completed: At revision: 21056

          Show
          Adnan Durrani added a comment - Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\resources\org.icefaces.component.util\util.js Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\tab\TabMeta.java Modified: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\tab\TabSetRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\tab\TabSetRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\src\org\icefaces\component\tab\TabMeta.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\scratchpads\sparkle\component\resources\org.icefaces.component.util\util.js Completed: At revision: 21056

            People

            • Assignee:
              Unassigned
              Reporter:
              Adnan Durrani
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: