The token tree UI is not accessible to keyboard only users

The attached patch changes the JQuery library:
- the expand/collapse controls become links instead of spans, so they can gain focus
- the controls can be triggered by [ENTER] keypress (in addition to click)

This second patch adds the following features:
- when you tab to a tree-control, it displays as Bold
- a title ("Expand" or "Collapse") is applied to the control, and changes as the control is triggered. This title-label is applied via drupal.t() so it meets i18n standards.

the "expand" and "collapse" text is not being read by screen-reader as there is anchor text in the anchor.

Fair point.

Adding these as foreground images will be difficult, because it's a library JS file, which makes getting the path to the images difficult. Instead I've added a hidden with the relevant text.

Based on Everett's last comment "This is why the use of background images should be reserved for background images, and not icons, which by their essence are in the foreground." it seems like we should attack this in a slightly different way.

What do you think, manarth, are you up to rebuild this to put the images in the foreground?

are you up to rebuild this to put the images in the foreground?

Back in September, I didn't think this was possible. I'm pleased to find that I was wrong :-)

The problem is that it's tricky to work out the path to the images. TreeTable is an external project, and if we'd like to contribute the patch back, we can't rely on Drupal APIs. Relative paths work fine in CSS, but I can't find a reliable way for a JavaScript function to work out which JavaScript file provided it (and use that to calculate the path to the image).

The solution I've come up with is to leave the background images in css, and position them outside the element so they're not visible. The TreeTable library then looks for the background images on the element (where the JavaScript API provides the absolute path to the images), and copies them to foreground images.

Patch attached for review.

#9: 922022.accessible_library-ver4.patch queued for re-testing.

#9: 922022.accessible_library-ver4.patch queued for re-testing.

Test failures were client issues. Requed.

Thanks manarth!

#9: 922022.accessible_library-ver4.patch queued for re-testing.

Filed issue upstream with the library at http://plugins.jquery.com/content/ui-not-accessible-keyboard-only-users

can't we at least commit part of the code in number 4 that makes it possible for The links to expand and collapse tree table rows and insert tokens operable with the keyboard? that is until the issue filed against the library is being looked into?

that functionality alone will be very appreciated for keyboard only users.

subscribe

Just curious what the status on this might be? I have not seen any activity onthis in a wile and hope something could be done.

http://plugins.jquery.com/content/ui-not-accessible-keyboard-only-users has had no progress. Until/unless that has progress I guess there is no progress?

The jquery issue tracker is a black hole. Likely the issue needs to be filed in https://github.com/ludo/jquery-treetable/issues now.

It would really be great if we could get someone to help do a clone of the library and provide a pull request with the fixes required. Adding the blocker tag for now.

what about the suggestion to commit number 4 temporarily until the issue is being looked into upstream?

I could not apply the patch. So attached a hand applied patch.

Fixed one global var.

Comparing the token version with the jquery-treeTable version 2.3.0 there are apart from the intended patch two diffs puzzling me.

   function childrenOf(node) {
-    return $("table.treeTable tbody tr." + options.childPrefix + node[0].id);
+    return $(node).siblings("tr." + options.childPrefix + node[0].id);
   };

Part of commit : d3d91ddb (Dave Reid         2011-07-26 14:33:58 -0500 158)     return $(node).siblings("tr." + options.childPrefix + node[0].id);

and

     for(key in classNames) {
       if(classNames[key].match(options.childPrefix)) {
-        return $("#" + classNames[key].substring(9));
+        return $(node).siblings("#" + classNames[key].substring(options.childPrefix.length));
       }
     }

Part of commit : d3d91ddb (Dave Reid         2011-07-26 14:33:58 -0500 235)         return $(node).siblings("#" + classNames[key].substring(options.childPrefix.length));

Still searching ... but this whitespace cleaning is not helping either
http://drupalcode.org/project/token.git/blobdiff/e20da62fe103dde65f7ae80...

Found #1062492: Multiple token trees on same page can both get expanded when clicking one through gitk

I committed patch from #26 to https://github.com/clemens-tolboom/jquery-treetable/tree/branch_2_3_0

[edit: new pull request]
I added a Pull request https://github.com/ludo/jquery-treetable/pull/30

Added issue summary to describe what to do upstream.

Another upstream blocker #848650: Help arrows in wrong state and to far to the left in help

Testing the added functionality did not give me keyboard access to the token tree. So could keyboard only users use these foreground images?

Image shows a mouse clicked token tree item

Checking ie http://www.usability.com.au/resources/tables.cfm did not help.

I expected the patch should help navigate between ie admin/config/people/accounts body text field and the token tree. But a tab jumps strait to the 'Save configuration'

The text above the token table

Click a token to insert it into the field you've last clicked.

needs an update too. What about: 'Select a token to insert it into the field you've last selected'

I just jumped on the issue to create a github clone of the proposed patch ... now I'm wondering whether the patches worked as designed?

Am I missing something? Is Firefox in err?

This item has a click and keydown handler

<a class="expander" style="margin-left: -19px; padding-left: 19px;" title="Expand" href="#"><img title="Collapse" alt="Collapse" src="http://drupal.d7/sites/default/modules/token/arrow-down.png">Current date</a>

I expected a tab stop still. There is no way for me to select a token without a mouse.

manarth@irc ask about my os which is snow leopard. And about my settings. It came down to using setting

So @Everett Zufelt and @manarth forget #32

I will add another comment on https://github.com/ludo/jquery-treetable/pull/30 which had a short review already.

About the other patches done on jquery-treetable. If we revert those we need to make it a library I guess.
- #848650: Help arrows in wrong state and to far to the left in help is an easy patch by allowing settings for the icon/image path
- #1062492: Multiple token trees on same page can both get expanded when clicking one is already committed on github

But it is risky to wait for a new release for jquery-treetable right?

Response from jquery-treetable maintainer Ludo van den Boom https://github.com/ludo/jquery-treetable/pull/30#issuecomment-2808093

...
The real img made it more difficult to adhere to the styling used in the documentation (see doc/index.html) so I have chosen to keep using the CSS background-images as they were before. Is there a reason why a real img-element would be preferred?
...

His merge https://github.com/ludo/jquery-treetable/compare/master...feature-access... adds the <a> but not the foreground image

#5 and #6 say screen-readers do not read the title of an empty anchor so we add a foreground image.

@Everett Zufelt

I'm confused now. As our anchor has a foreground image. Is that content? And do we need it?

What I tried to say in #37 is that the current test branch of jquery-treetable only has an anchor and no foreground image.

And what is the best way to test this functionality?
- Do we have tests for this on d.o?
- Do we have accessibility gates defined already :p
- jquery-treetable maintainer Ludo van den Boom needs to test all browser. How can we help him?
- I only know qunit testing through on of mine dreditor issues.

What is holding this issue up? It is a release blocker right :p
[Edit] #27 but #26
Patch from #26 still needs a review.

I had to cut my losses and roll a 7.x-1.0 release without this issue. It is still considered a big priority to fix, hopefully in a 7.x-1.1 or 7.x-1.2 release.

#26: token-accessiblitity-tree-922022-26.patch queued for re-testing.

I just ran into this again (this morning).

@Dave, totally understand your decision of a year ago (exactly) to cut your losses.

What do we need to do to get this into 7.x-1.6?

@clemens.tolboom other than a review of #26, what else would you need.

@mgifford re-reading from #26 we probably need to

- select a version from https://github.com/ludo/jquery-treetable
- check whether parts of my PR https://github.com/ludo/jquery-treetable/pull/30 has landed? Rereading that PR I see some features are added through other bugs and PRs.
- add the usual external js support like hook_requirements + hook_library?

Prepare 3.0.1 release seems to have addressed it. Tested it here http://ludo.cubicphuse.nl/jquery-treetable/#examples

Looks like we can (only just now) address this from a JS perspective. So right now we're using jQuery treeTable Plugin 2.3.0 I think in Token.

Any reason not to just embed it in the module like it is now?

@mgifford embedding is not cool :p ... the license is compatible to embed it.

Maybe you're right to embed it. But then the same thing will probably happen and that is patch it without an upstream request.

I personally think it's polite to the upstream maintainer to let people download it by hand or scripts like drush.

I'm fine with it either way.. Just commenting on how it is in the latest release.

It's such a popular module though, would add a lot more work for folks to now have to download it separately, but it's all getting easier with Drush.

wondering if this will ever be accessible?

Updated issue summary.

Hi, I need access to the tokens with in drupal using the trigger module, they are not yet accessible with drupal 7.41. Is there another module I can install to make them readable for those needing to use screen readers such as window-eyes, jaws and nvda? This has been a problem for a long time and I have not stayed up to date so maybe there is something hopefully by now working. If not is there a way I can just get all the tokens I can use in a text file for reference?

Thank you

Hello, I am still using drupal 7 and it looks like there is no resolution to view the token tree with a screen reader such as Jaws or Nvda?