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
Comment #2
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedThis 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)
Comment #3
criscomI will take this task over at Drupalcon 2016.
Comment #4
criscomThis will take me longer as expected. I need to catch my flight. If anyone would want to take this over, you are welcome. Thanks.
Comment #5
Ehud CreditAttribution: Ehud commentedMatthew Lambert (xiwar) and me (Ehud) are taking over. Thanks. On Dublin2016
Comment #6
Ehud CreditAttribution: Ehud commentedPatch by Matthew Lambert (xiwar) and Ehud Ovadia (Ehud).
Comment #8
mgiffordComment #9
mgiffordComment #10
kiwimind CreditAttribution: kiwimind at Investis Digital commentedRe-rolling patch to fix indentation issues.
Comment #11
emcoward CreditAttribution: emcoward at Investis Digital commentedTesting 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.
Comment #12
DuaelFrAs 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.
Comment #14
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedThanks 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.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.
Comment #15
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedAnother 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.
Comment #16
emcoward CreditAttribution: emcoward at Investis Digital commentedUpdated 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.
Comment #17
emcoward CreditAttribution: emcoward at Investis Digital commentedComment #20
mgiffordComment #21
emcoward CreditAttribution: emcoward at Investis Digital commentedUpdated patch to include drupal.announce as a dependency.
Comment #22
mgiffordGo bot go.
Comment #24
ok_lyndsey CreditAttribution: ok_lyndsey as a volunteer commentedTested 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).
Comment #25
BarisW CreditAttribution: BarisW at LimoenGroen for Historisch Centrum Overijssel commentedThis should use placeholders, like '@enabledviews and @disabledviews are available are available in the modified list'
Comment #26
BarisW CreditAttribution: BarisW as a volunteer and at LimoenGroen commentedThis patch uses placeholders in the Drupal.t().
Comment #27
left CreditAttribution: left commentedI 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.
Comment #28
mgiffordOk, 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?
Comment #29
John Cook CreditAttribution: John Cook commentedI'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?
Comment #30
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedThe 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.
Comment #31
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedComment #33
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedSince we're now actively pursuing WCAG 2.1, I'm reclassifying this as a bug report.
It relates to the new WCAG 2.1 "Change of Content" success criterion. Under WCAG 2.0 the announcement was a nice-to-have, but under WCAG 2.1 it becomes a must-have. For a longer explanation, see #2864791-33: Implement new Success Criteria from WCAG 2.1.
Comment #36
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedThere's a parent plan about this now.
Comment #43
mgiffordTagging https://www.w3.org/WAI/WCAG21/Understanding/name-role-value