x-tab-strip a11y features

[dubrod]

Need to be able to use up/down or left/right arrows to switch headings. Pressing "tab" key will trigger the panel to be active.

• [x] each Panel should also have a <h2 class="sr-only">Document</h2> at the beginning of the content panel

@kensgists @paulbohman

I have adjusted the ARIA markup for the extjs output below:

<!--
    1. make note of ID
-->
<div class="x-tab-strip-wrap" id="ext-gen60" style="width: 1214px;">
    <!--
        2. add role="tablist"
    -->
    <ul class="x-tab-strip x-tab-strip-top" id="ext-gen62" role="tablist">
        <!--
            3. add aria-selected="true/false"
            4. tabindex gets changed to 0 on active tab
        -->
        <li class="x-tab-strip-active" id="modx-resource-tabs__modx-resource-settings" aria-selected="true" role="tab" tabindex="0">
            <a class="x-tab-strip-close" id="ext-gen65"></a>
            <span class="x-tab-strip-text ">Document</span>
        </li>
        <li class="" id="modx-resource-tabs__modx-page-settings" role="tab" aria-selected="false" tabindex="-1">
            <a class="x-tab-strip-close" id="ext-gen66"></a>
            <span class="x-tab-strip-text ">Settings</span>
        </li>
        <li class="" id="modx-resource-tabs__modx-panel-resource-tv" role="tab" aria-selected="false" tabindex="-1">
            <a class="x-tab-strip-close" id="ext-gen67"></a>
            <span class="x-tab-strip-text ">Template Variables</span>
        </li>
        <li class="" id="modx-resource-tabs__modx-resource-access-permissions" role="tab" aria-selected="false" tabindex="-1">
            <a class="x-tab-strip-close" id="ext-gen68"></a>
            <span class="x-tab-strip-text ">Resource Groups</span>
        </li>
        <li class="x-tab-edge" id="ext-gen63">
            <span class="x-tab-strip-text">&nbsp;</span>
        </li>
        <div class="x-clear" id="ext-gen64"></div>
    </ul>
</div>

<div class="x-tab-panel-bwrap">
    <!--
        5. add aria-labelledby
        6. add role="tabpanel"
        7. add aria-hidden="true/false"
        8. <h2 class="sr-only">.....</h2>
    -->
    <div id="modx-resource-settings" aria-labelledby="modx-resource-tabs__modx-resource-settings" role="tabpanel" aria-hidden="true"><h2 class="sr-only">Document</h2></div>
    <div id="modx-page-settings" aria-labelledby="modx-resource-tabs__modx-page-settings" role="tabpanel" aria-hidden="false"><h2 class="sr-only">Settings</h2></div>
    <div id="modx-resource-tvs-div" aria-labelledby="modx-resource-tabs__modx-panel-resource-tv" role="tabpanel" aria-hidden="false"><h2 class="sr-only">Template Variables</h2></div>
    <div id="modx-resource-access-permissions" aria-labelledby="modx-resource-tabs__modx-resource-access-permissions" role="tabpanel" aria-hidden="false"><h2 class="sr-only">Resource Groups</h2></div>
</div>

---

Static Example:

https://dequeuniversity.com/assets/js/aria/saveform/form2.html

[theboxer]

Few, this one was... harder :) Please review

[dubrod]

everything is there. only problem was you can tab into it until i added tabindex to the wrapper

<div tabindex="0" class="x-tab-strip-wrap" id="ext-gen69">

Also, you think you can add the keyboard arrow navigation to it?