search

modxcms / a11y

MODX Accessibility for the Manager
13 stars 10 forks source link

ARIA Roles for Tree #7

Closed rtripault closed 8 years ago

rtripault commented 9 years ago

Since i learn "faster" with examples/practical use cases, i'll try to share some resources here (hopefully helpful for others)

rthrash commented 9 years ago

I believe you got the plugin or modification working that @TheBoxer had asked about in the earlier exploration. John can you confirm or refresh my memory?

theboxer commented 9 years ago

Here is the code for ARIA tags for tree: http://dev.sencha.com/deploy/ext-3.4.0/examples/tree/ARIA.js

Should work instantly after: creating Ext.a11y namespace & copy and past the code from link

dubrod commented 9 years ago

The Adobe Mega Menu is what I have installed on www.secondsight.com http://adobe-accessibility.github.io/Accessible-Mega-Menu/

W3C definition - http://www.w3.org/TR/2011/CR-wai-aria-20110118/roles#tree

rthrash commented 9 years ago

What other areas need Aria Roles defined? Uberbar/Search? Main Content? Top Navigation? User Menu?

rtripault commented 9 years ago

I initially opened that issue to share some content about ARIA roles, but since it seems it turned out to become an issue about ARIA tree role, i guess the mentioned commit fixes it (feel free to close, if so) :smile:

dubrod commented 9 years ago

@goldsky Basically the left side tree doesnt have proper ARIA tree roles, see my "W3C definition" above, and the installed sencha js, see above also, doesnt work. This would considered a REVO core contribution, and is a major deal breaker.

goldsky commented 8 years ago

On ARIA.js, the treepanel is overridden automatically when rendered. https://github.com/modxcms/a11y/blob/master/manager/templates/a11y/js/tree/ARIA.js#L85

goldsky commented 8 years ago

If the library doesn't have enough properties, then we need to add custom properties. The MODx's class file extends Ext.a11y, so this can be applied: MODx.a11y.ARIA.setProperty(this.getEl().id, 'tabindex', 0);

kensgists commented 8 years ago

Though we can see aria roles and states on the trees in the current version of the A11y Manager demo, they are not being reported at all to screen readers. In general, to make a tree work, the screen reader must be put into a pass-through mode. It will do this when a tab press or other action focuses a an element with role="tree." After that, it is up to the developer to implement proper keyboard interactions. That is: tab to the tree widget, arrow through all of the elements, as specified in the aria-practices listed below and working in the two examples below that.

W3C Aria best practices and excellent implementations in the wild:

dubrod commented 8 years ago

If reviewed this tree again and I've found 12 items of change. I will post the relevant code here with the 12 points but i will upload then entire html section to basecamp b/c I am unsure of the proper attributes (if any) that are required for the <li> above each of the 3 main sections.

@kensgists @paulbohman 

<div id="modx-leftbar" class=" x-plain" style="width: 310px; left: 0px; top: 55px;">
    <div class="x-plain-bwrap" id="ext-gen14">
        <ul id="ext-gen15" class=" x-plain-body-noheader" style="overflow: auto; width: 310px; height: 858px;">
            <li id="ext-comp-1007" class="x-panel menu-section" style="width: 310px;">
                <a href="javascript:;" tabindex="1" title="" id="ext-gen21" class=" x-panel-header x-unselectable" style="cursor: pointer;">
                    <!--
                    1. change to H2
                    2. make note of ID
                    3. add aria-expanded
                    -->
                    <h2 class="x-panel-header-text" id="ext-gen24" aria-expanded="true">
                        <i class="icon icon-sitemap"></i>
                        <span class="title">Resources</span>
                    </h2>

                </a>
                <div class="x-panel-bwrap" id="ext-gen22" style="position: static; visibility: visible; display: block; left: 0px; top: 0px; z-index: auto;">
                    <div class="x-panel-body" id="ext-gen23" style="width: 310px;">
                        <div id="modx-resource-tree" class="x-panel modx-tree x-panel-noborder x-tree">
                            <div class="x-panel-bwrap" id="ext-gen26">
                                <div id="modx-resource-tree-tbar" class=" x-panel-tbar-noheader x-panel-tbar-noborder" style="width: 310px;">
                                    <!--removed content for brevity -->
                                </div>
                                <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder" id="ext-gen27" style="overflow: auto; height: auto;">
                                    <!--
                                    4. add aria-labelledby
                                    5. add role="tree"
                                    -->
                                    <ul class="x-tree-root-ct x-tree-arrows" id="ext-gen29" role="tree" aria-labelledby="ext-gen24">
                                        <div class="x-tree-root-node">
                                            <!--
                                            6. add tabindex="0"
                                            7. the aria-expanded attribute is not functional here
                                            -->
                                            <li class="x-tree-node" tabindex="0" role="treeitem" aria-labelledby="extdd-3" aria-expanded="false" aria-selected="false" aria-level="1">
                                                <div ext:tree-node-id="web_0" class="x-tree-node-el x-unselectable tree-pseudoroot-node pedit pnew pdelete pnewdoc pnew_modDocument pnewdoc pnew_modSymLink pnewdoc pnew_modWebLink pnewdoc pnew_modStaticResource pqcreate x-tree-node-expanded"
                                                unselectable="on" id="extdd-1">
                                                    <span class="x-tree-node-indent"></span><i class="x-tree-ec-icon x-tree-elbow-end-minus"></i><i class="icon tree-context" unselectable="on" id="extdd-2"></i>
                                                    <a hidefocus="on" class="x-tree-node-anchor" href="#" tabindex="1">
                                                        <span unselectable="on" qtip="The default front-end context for your web site." id="extdd-3">Website</span>
                                                    </a>
                                                    <div id="extdd-1_tools" class="modx-tree-node-tool-ct undefined undefined">
                                                        <span id="ext-comp-1029" class="x-btn icon x-btn-small x-btn-icon-small-left icon-plus-circle x-btn-noicon" unselectable="on"> <i class=" x-btn-text" id="ext-gen297">&nbsp;</i></span>
                                                        <span id="ext-comp-1031" class="x-btn icon x-btn-small x-btn-icon-small-left icon-refresh x-btn-noicon" unselectable="on"> <i class=" x-btn-text" id="ext-gen298">&nbsp;</i></span>
                                                    </div>
                                                </div>
                                                <ul class="x-tree-node-ct" role="group">
                                                    <!--
                                                    8. add tabindex="-1"
                                                    9. the aria-expanded attribute is here but should not be
                                                    -->
                                                    <li class="x-tree-node" tabindex="-1" role="treeitem" aria-labelledby="extdd-6" aria-expanded="true" aria-selected="false" aria-level="2">
                                                        <div ext:tree-node-id="web_1" class="x-tree-node-el x-tree-node-leaf x-unselectable x-tree-node-leaf hidemenu psave pview pedit pduplicate pnew pnew_modDocument pnew pnew_modSymLink pnew pnew_modWebLink pnew pnew_modStaticResource pqcreate pqupdate pdelete pundelete ppublish punpublish x-tree-selected"
                                                        unselectable="on" id="extdd-4">
                                                            <span class="x-tree-node-indent"></span><i class="x-tree-ec-icon x-tree-elbow"></i><i class="icon tree-resource icon-web-1 icon-parent-web-0" unselectable="on" id="extdd-5"></i><a hidefocus="on" class="x-tree-node-anchor" href="#"
                                                            tabindex="1"><span unselectable="on" qtip="<i>Home Descs</i>" id="extdd-6">Home <span dir="ltr">(1)</span></span></a></div>
                                                        <ul class="x-tree-node-ct" role="group"></ul>
                                                    </li>
                                                    <!--
                                                    10. add tabindex="-1"
                                                    11. the aria-expanded attribute is not functional here
                                                    -->
                                                    <li class="x-tree-node" tabindex="-1" role="treeitem" aria-labelledby="extdd-12" aria-expanded="false" aria-selected="false" aria-level="2">
                                                        <div ext:tree-node-id="web_4" class="x-tree-node-el x-unselectable hidemenu psave pview pedit pduplicate pnew pnew_modDocument pnew pnew_modSymLink pnew pnew_modWebLink pnew pnew_modStaticResource pqcreate pqupdate pdelete pundelete ppublish punpublish x-tree-node-expanded"
                                                        unselectable="on" id="extdd-10">
                                                            <span class="x-tree-node-indent"></span><i class="x-tree-ec-icon x-tree-elbow-minus"></i><i class="icon tree-resource icon-web-4 icon-parent-web-0 tree-folder parent-resource" unselectable="on" id="extdd-11"></i><a hidefocus="on"
                                                            class="x-tree-node-anchor" href="#" tabindex="1"><span unselectable="on" qtip="<i>2</i>" id="extdd-12">Folders <span dir="ltr">(4)</span></span></a></div>
                                                        <ul class="x-tree-node-ct" role="group">
                                                            <!--
                                                            12. add tabindex="-1"
                                                            -->
                                                            <li class="x-tree-node" tabindex="-1" role="treeitem" aria-labelledby="extdd-18" aria-expanded="true" aria-selected="false" aria-level="3">
                                                                <div ext:tree-node-id="web_5" class="x-tree-node-el x-tree-node-leaf x-unselectable x-tree-node-leaf psave pview pedit pduplicate pnew pnew_modDocument pnew pnew_modSymLink pnew pnew_modWebLink pnew pnew_modStaticResource pqcreate pqupdate pdelete pundelete ppublish punpublish"
                                                                unselectable="on" id="extdd-16">
                                                                    <span class="x-tree-node-indent">
                                                                        <img alt="" src="/manager/assets/ext3/resources/images/default/s.gif" class="x-tree-elbow-line">
                                                                    </span><i class="x-tree-ec-icon x-tree-elbow"></i><i class="icon tree-resource icon-web-5 icon-parent-web-4" unselectable="on" id="extdd-17"></i>
                                                                    <a hidefocus="on" class="x-tree-node-anchor"
                                                                    href="#" tabindex="1">
                                                                        <span unselectable="on" id="extdd-18">Child #1
                                                                            <span dir="ltr">(5)</span>
                                                                        </span>
                                                                    </a>
                                                                </div>
                                                                <ul class="x-tree-node-ct" role="group"></ul>
                                                            </li>
dubrod commented 8 years ago

closing this b/c its out of date now