On the Simpletest testing page at "/admin/config/development/testing"

1. The control to expand each group of tests is not focusable, so keyboard users cannot access this control to expand the group of tests.

2. The control to expand each grouping of tests is not reported as actionable by JAWS 10.0.1154, pressing enter on the "expand" graphic does work, but no-one would know this.

3. After the group of tests is expanded the text for the graphic changes to "Collapsed" which should likely be "Collapse".

The functionality for the control to expand each group of tests is provided by jQuery attaching to the <div class="simpletest-image"></div>. Divs are not focusable or actional elements, it would be better if this functionality was provided by an actual anchor element.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Everett Zufelt’s picture

Issue tags: +Accessibility

tagging

mgifford’s picture

Issue tags: +D7UX usability

This problem has been essentially solved in misc/collapse.js

Why aren't we reusing that knowledge in modules/simpletest/simpletest.js

As a sighted user I find it annoying to have to click on the arrow to see the complete list. For someone with mobility challenges this would be extremely difficult to do. If you don't use a mouse it is impossible.

Now, it's an admin side dev issue (like installing Drupal) so it affects a smaller number of people. But certainly we should be able to re-use code we've used before for collapsing fields.

mgifford’s picture

Why isn't simpletest reusing misc/collapse.js code?

This is a critical issue but it's one that's got no attention unfortunately.

Bojhan’s picture

@mgifford Can you write a patch?

moshe weitzman’s picture

How does one open a collapsed fieldset using just the keyboard? I can't seem to get that to work (example Advanced options during installer DB settings). Been wanting it since forever. I have js enabled and am sighted.

mgifford’s picture

@Bojhan, I'll try to write up a patch to review. Thanks for the encouragement. I'm not a css or javascript person really.

@moshe, depending on how your browser is set up to take tab inputs, you can get a good sense of it by browsing to user/1/edit

When you tab to the 'Locale settings' group for instance you can collapse/expand that really easily by hitting enter while on focus. This is with js enabled and being sighted, more info available here:
http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigatio...

It was an early accessibility enhancement for D7.

I'd really like to see a way to expand/collapse all collapsed fields. Mind you with the whole vertical tabs this is a much less useful thing. I still like being able to search through all elements of a page and collapsed or vertical tabs mess that up. Oh well, maybe in D8 we'll see that.

Mike

moshe weitzman’s picture

thanks mgifford. i had to check 'Press Tab to highlight each item on the webpage.' on the advanced tab of safari prefs.

I took a look at simpletest_test_form and its some pretty custom theming that renders that form/table. Its not my forte, unfortunately. I would love to convert this to a #tableselect but I don't know how to preserve the behavior where the 'group' checkbox checks all the members in the group. Also, we'd want the ability to hide/show groups like Aggregator, User, etc in an accessible way.

mgifford’s picture

Issue tags: +JavaScript
FileSize
44.39 KB
31.38 KB

Agreed that there doesn't seem to be an easy way to reuse the work from misc/collapse.js in modules/simpletest/simpletest.js

The functionality is different enough. Strangely collapse.js is a smaller file than simpletest.js...

I've spent some time today messing around with simpletest's tables today. I think the main thing that I'd like to change is to ensure that there is appropriate text and links presented. I'm proposing the most clear thing for everyone would be to have linked text with "Expand" or "Collapse" presented after the title of the test. Along with the arrow, the text would be linked and would perform an identical function:

* Actions (Expand)
* Aggregator (Expand)
* AJAX (Expand)
* Batch API (Expand)
* Block (Collapse)
* Admin theme block admin accessibility
Check whether the block administer page for a disabled theme acccessible if and only if it's the admin theme.
* Block functionality
Add, edit and delete custom block. Configure and move a module-defined block.
* New default theme blocks
Checks that the new default theme gets blocks.

I'm trying to emulate what was done for the images in simpletest.pages.inc by adding another access point to grab ahold of similar to the div tag used by the "simpletest-image":

    // Expand/collapse image and group title.
    $row[] = array(
      'data' =>  '<div class="simpletest-image" id="simpletest-test-group-' . $test_class . '"></div>&nbsp;' .
                 '<label for="' . $test_class . '-select-all" class="simpletest-group-label">' . $key . '</label> <em class="simpletest-expand" id="simpletest-test-group-expand-' . $test_class . '"></em>',
      'style' => 'font-weight: bold;'
    );

On this file, it the tense used for the title/alt text isn't very clear here, nor is it translated.

  // Define the images used to expand/collapse the test groups.
  $js = array(
    'images' => array(
      theme('image', array('path' => 'misc/menu-collapsed.png', 'alt' => 'Expand', 'title' => 'Expand')),
      theme('image', array('path' => 'misc/menu-expanded.png', 'alt' => 'Collapsed', 'title' => 'Collapsed')),
    ),

It should at least be the same form. Either Expand & Collapse or Expanded & Collapsed.

  // Define the images used to expand/collapse the test groups.
  $js = array(
    'images' => array(
      theme('image', array('path' => 'misc/menu-collapsed.png', 'alt' => t('Expand'), 'title' => t('Expand'))),
      theme('image', array('path' => 'misc/menu-expanded.png', 'alt' => t('Collapse'), 'title' => t('Collapse'))),
    ),

I'm hoping that I can modify the simpletest.js Drupal.behaviors.simpleTestMenuCollapse function to add and change the text after the label. I can insert the Expand text using javascript fine using:

    $('em.simpletest-expand').each(function () {
     $(this).html('(<a href="#">Expand</a>)');
    });

But I just can't switch the text or cause it to act appropriately. I can get the link to work properly but the text is inserted before hand by adding the last line below:

      // Toggle the arrow image next to the test group title.
      $(this).html(settings.simpleTest.images[(direction ? 0 : 1)]);
      settings.simpleTest[this.id].imageDirection = !direction;
      $(this).append('<a href="#">Collapse</a>');

I suppose it could be possible to simply wrap the image within a link & providing alternate text could also work, however, I prefer to make it visible to everyone. to list the possible html:

<div id="simpletest-test-group-ajax" class="simpletest-image">
<a hef="#"><img width="7" height="7" title="Collapse" alt="Collapse" src="http://localhost:8888/drupal-cvs/misc/menu-expanded.png"/> <span class="element-invisible" aria-live="polite">Collapse</span></a>
</div>

or

<div id="simpletest-test-group-ajax" class="simpletest-image">
<a hef="#"><img width="7" height="7" title="Expand" alt="Expand" src="http://localhost:8888/drupal-cvs/misc/menu-collapsed.png"/> <span class="element-invisible" aria-live="polite">Expand</span></a>
</div>

I'm not sure who would automatically assume that if you click on those funny arrows that there will be a great many other rows and checkboxes underneath it. Because the page is changing dynamically we'll also want to insert some WAI-ARIA elements to inform screen readers of the change (aria-live="polite" will probably be best)

A visible solution would be best as it would allow sighted keyboard only users to more easily access the simpletest table.

]avascript advice would be appreciated.

Mike

moshe weitzman’s picture

Seems to me that the Modules page has roughly the same requirements as the simpletest page. Namely, a bunch of groups than can be collapsed and checkboxes beside each row. Just a thought.

mgifford’s picture

This is true, but you can't just click the Development group and have all of the modules within it enabled. Its the parent/child relationship of checkboxes that is unique.

Good to know how many instances of this type of code there are to see if perhaps in D8 there might be a better way to re-use code and generalize these functions.

boombatower’s picture

Subscribe.

mgifford’s picture

Issue tags: +aria

Adding aria tag. aria-live tags should be added.

Everett Zufelt’s picture

@mgifford

Can you expand your comment on ARIA here please? I'm pretty sure that ARIA is not necessary to make this UI accessible.

Caution must be taken when using ARIA that it is either 1. absolutely necessary for accessibility, or 2. that it is used for progressive enhancement to a UI component that is accessible without ARIA.

mgifford’s picture

Status: Active » Needs review
Issue tags: -aria
FileSize
1.78 KB
29.65 KB
22.13 KB

This isn't a perfect solution, but it will make simpletests accessible to both individuals using keyboard navigation or a screen-reader.

I don't think we'll be needing to worry about ARIA in this case. I had thought that it might be useful to alert users of the change. I think it will be fine though.

I do think that there are usability issues around this piece of the interface. How does a non-keyboard/screen-reader user know to click on the triangle to expand the text?

On the plus side, this is something probably only developers are going to see. Still will be useful to expand the tools available to developers.

Edit: The (Collapse) or (Expand) is visible on focus. It should be always visible to screen-readers now, but is as confusing as always to those who are using a mouse.

mgifford’s picture

ack, didn't do the diff from root, sorry.

Everett Zufelt’s picture

@mgifford

Tested a patched site with patch in #15. Worked with JAWS 10 / FF 3.6.

pratikp1’s picture

Status: Needs review » Reviewed & tested by the community

Other than making some inherent changes in how items are expanded and collapsed, this is the only reasonable step toward making this interface accessible/usable. The links with alt tags will allow both screen reader users and sighted users wishing to use the keyboard the opporutnity to expand and collapse items. The patch work well. There is a need to rethink this type of interface for everyone though.

pratikp1’s picture

My apologies. The patch was tested with JAWS 11, NVDA, System Access and Window-Eyes.

mgifford’s picture

Great to see that this has been marked RTBC.. I was informed about it by @Bojhan on IRC which was quite funny.

Anyways, looks like this does what is needed for now and that we should think about approaches for D8! How do we want to have long lists of checkboxes work? Is there a better way to do this in the future?

Thanks again everyone!

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Awesome, yay for more accessible testing tools! (and tests even!)

Committed to HEAD.

chx’s picture

Status: Fixed » Reviewed & tested by the community

Please roll this back.

  1. We do not add HTML elements that work with only JS to the module code. We use jQuery for this.
  2. Title display invisible is used which is defined in #558928: Form element labeling is inconsistent, inflexible and bad for accessibility.
webchick’s picture

Status: Reviewed & tested by the community » Needs work

I'm definitely not rolling this back. Blind users not being able to run tests is a far more critical bug than a sub-optimal fix, which we can address in a follow-up patch.

However, Berdir informed me that this broke tests. He's working on a fix.

Berdir’s picture

Status: Needs work » Needs review
FileSize
2.05 KB

Yeah, the patch contained parts that actually belong to #558928: Form element labeling is inconsistent, inflexible and bad for accessibility. What means we're testing something that hasn't been added yet ;)

The patch removes these tests.

webchick’s picture

Priority: Critical » Normal
Status: Needs review » Needs work

Oops. :) Committed to HEAD.

Downgrading to normal, and marking "needs work" per chx's comments in #22.

mgifford’s picture

Apologize. Looks like I introduced some code from another patch. Sorry about that.

chx’s picture

Priority: Normal » Critical
Status: Needs work » Reviewed & tested by the community
FileSize
1.52 KB

I was too tired yesterday to realize but blind users can run tests -- by group just not 1-by-1. It's unacceptable to have such ugly code in core, blind or not. If and when someone writes proper JS code this can be fixed but this is not core worthy.

Everett Zufelt’s picture

Good morning,

I agree completely that accessibility patches must meet coding and other standards set forth by the community before being committed. I also understand that for any type of issue a patch may get committed that unintentionally fails to comply to these standards and a remedy is necessary.

I do believe that this issue is still critical and needs to be resolved for d7. To the best of my knowledge no keyboard only user (blind or not) is able to run individual tests, which is unacceptable.

mgifford’s picture

Wanted to add in that this piece of code doesn't meet common usability standards for the rest of Drupal 7 either. I do think that this whole code will need to get re-written for D8 as it is quite unique. Heck, I can't think of that many places where there are collapsible lists of checkboxes all with a master checkbox for the collapsed group. It's useful, but pretty unique functionality.

The reason it's not going deep usability reviews at this stage is that only dev's are going to see it. It's important that we encourage more drupal developers to become involved in the community and not limit those who cannot see or cannot use a mouse.

Running individual tests can be important when debugging issues with the code.

chx’s picture

Of course, the functionality here is wanted but such code even in simpletest is ouch.

Dries’s picture

It looks like chx's patch is the right thing to do to me. If not, please speak up and explain why not.

Everett Zufelt’s picture

@Dries

I think that chx's patch is the right thing to do. The next thing to do is to fix the issue in a standards compliant way so that users who cannot use the mouse can run individual tests.

webchick’s picture

Status: Reviewed & tested by the community » Needs work

chx's patch rolls back the entire solution, so is not a 'fix' at all, unless I am missing a cluestick?

I don't quite understand why the code to add these expand links can't be added to the same JS that puts the funky and inaccessible expandable tables around it? That's what I thought that chx was suggesting in #22.

chx’s picture

Status: Needs work » Reviewed & tested by the community

Should someone at some point come up with a patch then we can commit that. Until such, this has no place in core.

mgifford’s picture

I don't have the jQuery chops to integrate a solution to this in any other way. I'm assuming that a jQuery solution that adds proper proper, click-able image references would be preferred. I can't find a hook to append this to.

I'm also still not clear on why the patch that is now in core is indeed as horrid as chx describes. Right now it adds text which is visible right now only to screen-readers and keyboard only users.

Anyways, I'm needing some specifics to know where to begin or who to to engage to find a solution that makes folks happy.

grendzy’s picture

#27: remove_ugly.patch queued for re-testing.

Status: Reviewed & tested by the community » Needs work
Issue tags: +JavaScript, +Accessibility, +D7UX usability

The last submitted patch, remove_ugly.patch, failed testing.

webchick’s picture

Priority: Critical » Normal
Issue tags: +markup

This is not critical, and does not need to be reverted; it needs an implementation clean-up by a JS person, as per #33.

bowersox’s picture

sub

Everett Zufelt’s picture

Title: Expanding simpletest groups not accessible via keyboard » Clean up Javascript implementation of Expanding simpletest groups
Version: 7.x-dev » 8.x-dev

Bumping to D8 and changing title.

larowlan’s picture

subscribe

nod_’s picture

bowersox’s picture

Issue tags: -Accessibility, -D7UX usability

At this point, the accessibility and UX aspects of the original issue are solved and committed. Removing those tags. All that remains here is the JS clean-up.

nod_’s picture

Status: Needs work » Closed (duplicate)

we'll take that as part of the broader: #1751418: Rewrite simpletest.js.

mgifford’s picture

Excellent!