Basically, if you use the keyboard to select a category tab in the "Add content" modal, then keyboard focus will be lost. This makes using this modal very difficult for people who use the web browser with an assistive technology of some kind.

I propose that keyboard focus is automatically given to the selected category tab the first element in the category after the new content is loaded via AJAX. I'll post a patch for this in a moment.

If you're using Chrome, it depends on this issue as well, since the commands buttons aren't currently focusable under Chrome: #2356449: Content type buttons not focusable under Chrome (accessibility problem)

(NOTE: This is part of an effort to make using Panels more accessible in Panopoly, and grew out of testing on this CTools issue: #2280853: Keyboard trap when using ctools modal)

CommentFileSizeAuthor
#13 panels-focus-add-content-tab-2390803-13.patch1.47 KBdsnopek
#8 Selection_008.png30.27 KBdsnopek
#8 panels-focus-add-content-tab-2390803-8.patch1.19 KBdsnopek
#5 panels-focus-add-content-tab-2390803-5.patch869 bytesdsnopek
#1 panels-focus-add-content-tab-2390803-1.patch845 bytesdsnopek

Comments

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Status: Active » Needs review
StatusFileSize
new panels-focus-add-content-tab-2390803-1.patch845 bytes

Patch is attached! Please let me know what you think.

cboyden’s picture

cboyden commented

Tested on Mac OSX 10.9.5 with Chrome 39.0.2171.95, Firefox 34.0.5 and Safari 7.1. It's working as expected.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +keyboard focus

I don't use Panels often. Would this be here admin/structure/pages/add/page-example/content

cboyden’s picture

cboyden commented

Yes, if you're creating a new page. Once the page is created, you can get back to it at admin/structure/pages/nojs/operation/page-page_manager_page/handlers/page_page_manager_page_panel_context/content

To test:

  1. From the page manager at admin/structure/pages, choose an existing page and follow the Edit link.
  2. Follow the "Content" link in the vertical tabs.
  3. Activate the gear icon link for a content region.
  4. A popup menu will appear.
  5. Tab to and activate the Add Content link.
  6. The ctools modal will appear.
  7. Tab to one of the content type links in the vertical tabs in the modal. For example, Page elements. If you don't have all of the accessibility patches applied (see linked issues), you may not be able to tab through the modal.
  8. Activate the link.
  9. If you don't have the patch applied, keyboard focus will be lost. If you do have the patch applied, you should still be focused on the vertical tab you just activated.
dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Title: Keyboard focus should be on selected category tab in the "Add content" model (accessibility issue) » Keyboard focus should be on the first element in the selected category tab in the "Add content" model (accessibility problem)
Issue summary: View changes
StatusFileSize
new panels-focus-add-content-tab-2390803-5.patch869 bytes

Some testing with a screenreader was done (not by me - I'm not that cool) and the suggestion was made that focus should REALLY be on the first element in the category that just got loaded.

Here is an updated patch that does that instead! If you're using Chrome, it depends on this issue as well, since the commands buttons aren't currently focusable under Chrome: #2356449: Content type buttons not focusable under Chrome (accessibility problem)

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Issue summary: View changes
Related issues: +#2356449: Content type buttons not focusable under Chrome (accessibility problem)
cboyden’s picture

cboyden commented
Status: Needs review » Needs work

This is working when using the IPE on Firefox, Chrome, and Safari (Mac). Unfortunately it's not working when I run this from the Page Manager page editing interface. Keyboard focus is lost entirely (Firefox) or outside the modal (Chrome, Safari). In Chrome and Safari, I can tab in and out of the modal, backward and forward.

  1. From the page manager at admin/structure/pages, choose an existing page and follow the Edit link.
  2. Follow the "Content" link in the vertical tabs.
  3. Activate the gear icon link for a content region.
  4. A popup menu will appear.
  5. Tab to and activate the Add Content link.
  6. The ctools modal will appear.
  7. Tab to one of the content type links in the vertical tabs in the modal. For example, Widgets.
  8. Activate the link.
  9. Note that nothing appears to be focused.
  10. Tab forward.
  11. Note that keyboard focus is outside the modal (Chrome, Safari) or lost (Firefox).
dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Status: Needs work » Needs review
StatusFileSize
new panels-focus-add-content-tab-2390803-8.patch1.19 KB
new Selection_008.png30.27 KB

@cboyden: Thanks for the testing! So, just to be clear to anyone following along, your steps also involve using the patch from #2280853: Keyboard trap when using ctools modal. This issue is only about having focus start on a particular element when the dialog opens - which is what I'd like to focus on here. The tabbing stuff we can continue on #2280853.

I'm testing with a vanilla Drupal 7.34 site, with Panels 3.x (cd0ded6) + this patch, and CTools 1.x (fb6c216) + no patches. Following a sub-set of your steps (#1-9), everything works fine for me on Chrome 40.0.2214.91 on Linux, ie. on step #9 I see the first item focused. Here's a screenshot right after activating a category link:

Under Firefox 34.0 on Linux, the same element gets focused (I can tell by the URL shown at the bottom of the window), however it isn't visually marked in anyway. :-/ Unfortunately, I don't have Safari to test.

But here is a new patch that adds some CSS to put a box around focused elements. Does this fix the issues you were seeing (only with regard to this patch)?

cboyden queued 8: panels-focus-add-content-tab-2390803-8.patch for re-testing.

cboyden’s picture

cboyden commented
Status: Needs review » Needs work

It's possible that the errors in this and the linked issue #2280853: Keyboard trap when using ctools modal are caused by the same thing: jQuery errors. See my latest comment in that issue for stack traces of the error I see when tabbing within the modal.

This is happening on Mac, Firefox 35.0.1 and Chrome 40.0.2214.94. I tested with the absolute latest Panels, Panelizer, and ctools, plus the latest patch in this issue and the linked issue.

The error I see when activating a category link is:
Error: Syntax error, unrecognized expression: focusable

Since the exact same code is working fine in the IPE, I don't think "focusable" or "tabbable" pseudo-selectors are actually the problem.

Stack trace from Firebug:

uncaught exception: Syntax error, unrecognized expression: Syntax error, unrecognized expression: focusable
k.error()jquery.js?v=1.4.4 (line 85)
g = "Syntax error, unrecognized expression: focusable"
k.selectors.filter.PSEUDO()jquery.js?v=1.4.4 (line 93)
g = div.panels-section-column.panels-section-column-1
i = [":focusable", "focusable", undefined, undefined]
n = 0
m = [div.panels-section-column.panels-section-column-1, div.inside, div.content-type-button.clearfix, 13 more...]
k.filter()jquery.js?v=1.4.4 (line 84)
g = ":focusable:first"
i = [div.panels-section-column.panels-section-column-1, div.inside, div.content-type-button.clearfix, 13 more...]
n = undefined
m = undefined
L()jquery.js?v=1.4.4 (line 104)
g = "*"
i = [div.panels-section-columns]
k()jquery.js?v=1.4.4 (line 81)
g = ":focusable:first"
i = Document content
n = Object[]
m = undefined
k()jquery.js?v=1.4.4 (line 102)
m = ".panels-add-content-moda...olumns :focusable:first"
p = Document content
q = Object[]
u = undefined
.find()jquery.js?v=1.4.4 (line 105)
a = ".panels-add-content-moda...olumns :focusable:first"
c</b.prototype.init()jquery.js?v=1.4.4 (line 26)
j = ".panels-add-content-moda...olumns :focusable:first"
s = undefined
$.fn.init()drupal.js?nj4lpj (line 26)
selector = ".panels-add-content-moda...olumns :focusable:first"
context = undefined
rootjQuery = undefined
c</b()jquery.js?v=1.4.4 (line 23)
j = ".panels-add-content-moda...olumns :focusable:first"
s = undefined
Drupal.ajax.prototype.commands.invoke()ajax.js?v=7.34 (line 604)
ajax = Object { url="/panels/ajax/editor/sele...A%3A%3A/middle/activity", event="click", keypress=true, more...}
response = Object { command="invoke", selector=".panels-add-content-moda...olumns :focusable:first", method="focus", more...}
status = "success"
Drupal.ajax.prototype.success()ajax.js?v=7.34 (line 400)
response = [Object { command="settings", settings={...}, merge=true}, Object { command="modal_display", title="Add content to Middle column", output="<div class="panels-add-c...\n </div>\n </div>\n"}, Object { command="invoke", selector=".panels-add-content-moda...olumns :focusable:first", method="focus", more...}]
status = "success"
Drupal.ajax/ajax.options.success()ajax.js?v=7.34 (line 164)
response = [Object { command="settings", settings={...}, merge=true}, Object { command="modal_display", title="Add content to Middle column", output="<div class="panels-add-c...\n </div>\n </div>\n"}, Object { command="invoke", selector=".panels-add-content-moda...olumns :focusable:first", method="focus", more...}]
status = "success"
.handleSuccess()jquery.js?v=1.4.4 (line 143)
a = Object { url="/panels/ajax/editor/sele...A%3A%3A/middle/activity", global=true, type="POST", more...}
b = XMLHttpRequest { readyState=4, timeout=0, withCredentials=false, more...}
d = "success"
e = [Object { command="settings", settings={...}, merge=true}, Object { command="modal_display", title="Add content to Middle column", output="<div class="panels-add-c...\n </div>\n </div>\n"}, Object { command="invoke", selector=".panels-add-content-moda...olumns :focusable:first", method="focus", more...}]
.ajax/w.onreadystatechange()jquery.js?v=1.4.4 (line 142)
m = readystatechange

...{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,N...

jquery.js?v=1.4.4 (line 85)
cboyden’s picture

cboyden commented

This may be it: When the core Overlay is disabled, I get the jQuery error. When it's enabled, I don't, and the code works as intended. @dsnopek can you try disabling Overlay on your test site and see what you get?

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented

Great catch! The key is that the :focusable selector comes from jQuery UI core.js (which overlay loads), so we need to make sure that is loaded in this dialog as well. It's a super small file (basically just defining the selectors and some other super small utility things:

https://github.com/jquery/jquery-ui/blob/9d0f44fd7b16a66de1d9b0d8c5e4ab9...

So, it really shouldn't slow anything down by being loaded -- and it's necessary for the accessibily changes to CTools over in #2280853: Keyboard trap when using ctools modal and accessibility is important.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Status: Needs work » Needs review
StatusFileSize
new panels-focus-add-content-tab-2390803-13.patch1.47 KB

Ok, here is a new patch that should fix this! We'll probably fix in CTools too in #2280853: Keyboard trap when using ctools modal, but I think it's important that Panels load this library as well in the case that someone updates Panels without also updating CTools.

cboyden’s picture

cboyden commented
Status: Needs review » Reviewed & tested by the community

Excellent! The Panels part of this issue looks good to me. There was an IE 8 problem in #2280853: Keyboard trap when using ctools modal, but I did a quick fix and posted a new patch over there.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Issue tags: +panopoly

Woohoo! Thanks. :-)

japerry’s picture

japerry
Location KOMK
commented

Added to my list of stuff to review for 1.7 (maybe 1.8)?

damienmckenna’s picture

damienmckenna
Location TN, USA
commented
Parent issue: » #2423733: Plan for Panels 7.x-3.6 release

cboyden queued 13: panels-focus-add-content-tab-2390803-13.patch for re-testing.

japerry’s picture

japerry
Location KOMK
commented
Status: Reviewed & tested by the community » Fixed

Thanks for everyone's work on this! Committed.

  • japerry committed 21bdea4 on 7.x-3.x authored by dsnopek 
    Issue #2390803 by dsnopek, cboyden: Keyboard focus should be on the...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.