Problem/Motivation

The Views listing page (admin/structure/views offers a text input to filter Views by name or description. When entering text, the list of views changes dynamically. The change is easily noted visually, but is not conveyed to users with screen readers.

Proposed resolution

Use Drupal.announce() to convey a short message about the number of views now present in the filtered list.

We already do this with the module filter on the admin/modules page - see system.modules.js.

A difference with the Views listing is that there are actually TWO listings on the page: enabled and disabled views. So it may be worth announcing the count for each listing.

Remaining tasks

  • Devise the announcement string(s); e.g. "1 enabled view and 2 disabled views are available in the modified list." It should handle singular/plural result counts correctly (with Drupal.formatPlural())
  • Write a patch.
  • Tests - confirm the updated content of div#drupal-live-announce with JavascriptTestBase.

User interface changes

  • No visible changes intended.
  • Add a screen reader announcement to convey updates which are currently only apparent visually.
  • Introduces a new translatable string for Drupal.announce().

API changes

None expected.

Data model changes

None expected.

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

Issue tags: +Dublin2016, +Novice

This would be a good novice task for a mentored sprint at Dublin DrupalCon 2016.

It basically involves a copy/paste, adding a JS behaviour to views module.

We have an accessibility table in the general sprints room but I can come to the mentored room if you need me.

Details of the Drupal.announce() are here:
New accessibility feature: Drupal.announce() (change record)
Accessibility tools for JavaScript in Drupal 8 (handbook page)

criscom’s picture

I will take this task over at Drupalcon 2016.

criscom’s picture

This will take me longer as expected. I need to catch my flight. If anyone would want to take this over, you are welcome. Thanks.

Ehud’s picture

Assigned: Unassigned » Ehud

Matthew Lambert (xiwar) and me (Ehud) are taking over. Thanks. On Dublin2016

Ehud’s picture

Assigned: Ehud » Unassigned
Status: Active » Needs review
FileSize
688 bytes

Patch by Matthew Lambert (xiwar) and Ehud Ovadia (Ehud).

Status: Needs review » Needs work

The last submitted patch, 6: 2805499-6-views_list_filter_accessibility_feedback.patch, failed testing.

mgifford’s picture

kiwimind’s picture

Re-rolling patch to fix indentation issues.

emcoward’s picture

Testing the patch in #10 with VoiceOver on OSX works in the same way as the module filter and outputs the number of views in the filtered list. As stated in the summary, the announcement also needs to highlight whether the list of views are 'enabled' or 'disabled' which isn't included in the #10 patch.

DuaelFr’s picture

As in #2805197-9: Provide screen-reader feedback when Views UI filterable options are updated I think we should keep that function DOM-agnostic so the front can change without breaking these features.
This feature should be tested too but it could be done in a follow-up to avoid locking an accessibility improvement in the pipeline.

Status: Needs review » Needs work

The last submitted patch, 12: 2805499-11-views_list_filter_accessibility_feedback.patch, failed testing.

andrewmacpherson’s picture

Thanks for working on this everyone.

If you type in the search field quickly enough, it's possible to get a repeated message in the div#drupal-live-annouce. For example, after typing "rec" the div contains the string "1 views are available in the modified list. 4 views are available in the modified list. 3 views are available in the modified list." We noticed the same problem in #2805205: Provide screen-reader feedback when filtering by block name. (comment 14 there). It can be solved by adding some debounce behaviour to limit how often Drupal.announce() is called. This screenshot shows what happens.

Screenshot of drupal.annouce DIV with repeated messages.

As #11 says, the patch doesn't treat the enabled/disabled counts separately. I think that would be a good thing to do; it ties in with the heading structure of the page and provides an extra clue about where to go next.

This can be tested with the new functional JavascriptTestBase class. We already have similar tests being developed for Drupal.announce() which can serve as a starting point. See:

Neither of these have been committed yet, so the test approach isn't set in stone ;-) Any suggestions for improvement would be welcome.

Instructions for running JavascriptTestBase are at Javascript Testing Comes to Drupal 8.

andrewmacpherson’s picture

Issue summary: View changes

Another quirk: If there's only one result, the announcement is "1 views are available in the modified list".

Using Drupal.formatPlural() instead of Drupal.t() will fix this.

emcoward’s picture

Updated patch from #10 to include separate counts for enabled and disabled views. Also add debounce behaviour as Andrew suggested to prevent repeated messages being output.

emcoward’s picture

Status: Needs work » Needs review
Issue tags: +Needs tests

The last submitted patch, 10: 2805499-10-views_list_filter_accessibility_feedback.patch, failed testing.

Status: Needs review » Needs work

The last submitted patch, 16: 2805499-16-views_list_filter_accessibility_feedback.patch, failed testing.

mgifford’s picture

emcoward’s picture

Updated patch to include drupal.announce as a dependency.

mgifford’s picture

Status: Needs work » Needs review

Go bot go.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

ok_lyndsey’s picture

Tested this patch in 8.4.x dev used Chrome Vox and NVDA to test screen reader function.

On inputting text to filter a view screen reader it reads: "x enabled views and y disabled views are available in the modified list"

Which is the expected behaviour of patch I believe (compared against vanilla 8.3 and it doesn't say this).

BarisW’s picture

Status: Needs review » Needs work
+++ b/core/modules/views_ui/js/views_ui.listing.js
@@ -38,6 +38,15 @@
+            Drupal.t(
+              $enabledViews + ' and ' + $disabledViews + ' are available in the modified list.'
+            )

This should use placeholders, like '@enabledviews and @disabledviews are available are available in the modified list'

BarisW’s picture

Status: Needs work » Needs review
FileSize
2.04 KB

This patch uses placeholders in the Drupal.t().

left’s picture

I can confirm patch #26 works as expected with 8.4x using ChromeVox.
The latest additions to the code by @BarisW result in the same behaviour as reported by @ok_lyndsey in comment #24.

mgifford’s picture

Ok, so we have the patch tested (essentially) in ChromeVox and NVDA. @BarisW cleaned up @emcoward code.

We then waiting for someone to RTBC it when it goes green?

John Cook’s picture

I've tested #26 with VoiceOver on Mac.

The announcement returned is correct with regards to singular/plural results.

Although, when typing I occasionally get repeating messages and others I do not get an announcement even when the list visually changes. I believe this due to the debounce.

Also, while typing and there is no changes, the announcement re-states the number of enabled / disabled views. Would having the announcement execute only when the list changes cause any accessibility problems?

andrewmacpherson’s picture

The tests are green, but this is still marked "needs tests". Some of the related Drupal.announce() issues already have some tests which are partly written. #2715663: Use Drupal.formatPlural for when announcing module-filter results for screenreader users is a good starting point.

If anyone wants to have a crack at those, make sure you understand how to run FunctionalJavascript tests in D8. See Javascript Testing Comes to Drupal 8.

andrewmacpherson’s picture

Status: Needs review » Needs work