In the "Add content" dialog, it's impossible to focus on the content type buttons (what you click to add a specific pane) under Chrome. I've tested under Linux using both Chrome 36 and 38 (currently the most recent stable release).

This is an accessibility problem, as it makes it impossible to TAB to a specific content type using the keyboard.

Steps to reproduce

  1. Install Panels and all dependencies
  2. Create a new Page in the page manager
  3. Open the "Add content" dialog in some region
  4. Click into the dialog and attempt to press TAB to select the "Existing node" or "New custom content" buttons
  5. It is not possible to do so!

Proposed solution

Apparently, having floated items inside of a link makes the link unfocusable under Chrome (but not under Firefox which I also tested).

So, I propose that we attempt to achieve the same visual appearance of the buttons without using float in panels_dnd.css

Remaining tasks

Test on the following browsers/versions and make sure there are no regressions:

  • Chrome (latest stable) - TESTED (version 39)
  • Firefox (latest stable) - TESTED (version 34)
  • Safari (latest stable) - TESTED (version 7.1)
  • Internet Explorer 11 - TESTED
  • Internet Explorer 10 - TESTED (with IE Developer Tools emulation)
  • Internet Explorer 9 - TESTED (with IE Developer Tools emulation)
  • Internet Explorer 8 - TESTED (with IE Developer Tools emulation)
  • Internet Explorer 7 - ??? (is this really necessary?)
  • Internet Explorer 6 - ??? (is this really necessary?)
CommentFileSizeAuthor
#1 panels-chrome-a11y-2356449-1.patch709 bytesdsnopek

Comments

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new panels-chrome-a11y-2356449-1.patch709 bytes

Here is a patch that works for me under Chrome 38, Firefox 26 and Internet Explorer 11.

However, more testing will be necessary, especially under older IE version and Safari on MacOS.

dsnopek’s picture

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

Adding accessibility tag.

cboyden’s picture

cboyden commented
Issue summary: View changes

This patch is working for me. Add Content buttons are focusable. Tested on Mac OSX 10.9.5 with Chrome 39.0.2171.95. I was able to add content panes to a page both using the standard Panels/Page Manager method, and also with the Panels IPE.

I found no regressions in Firefox 34.0.5 or Safari 7.1. (They both suffer from keyboard accessibility bugs - see #2280853: Keyboard trap when using ctools modal - in Page Manager mode even after all of the patches in the linked issue, but that's not a regression.)

Updated summary with the results of my testing.

mgifford’s picture

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

So we can test that here easily enough.
http://simplytest.me/project/panels/7.x-3.x?patch[]=https://www.drupal.o...

You still need to enable to Page manager, but then it should be able to replicate this, right?

mgifford queued 1: panels-chrome-a11y-2356449-1.patch for re-testing.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented

@mgifford: Yes, I was able test the patch using the simplytest.me link you provided! In the future, I may start putting simplytest.me links in my issues, but that's a pretty cool way to help people test patchs. :-) But, obviously, you should try without the patch first to reproduce the broken behaviour. Thanks!

cboyden’s picture

cboyden commented
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

Tested with IE 8, 9, and 10 using IE's built-in Developer Tools emulator. The styling for the vertical tabs is working. Looks like this is good to go. (There were a few modal tab-order problems with IE, but those will go into the linked ctools issue.)

japerry’s picture

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

Thats enough testing to make me happy! Committed.

  • japerry committed d0e593f on 7.x-3.x authored by dsnopek 
    Issue #2356449 by dsnopek: Content type buttons not focusable under...
dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented

Thanks, @japerry! :-)

Status: Fixed » Closed (fixed)

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