When using the Panels IPE to customize a page, there is no visual indicator of tab focus on the Region style or Add new pane buttons per region, nor on the Settings, Style, or Delete buttons per pane.

Using Drupal 7.28 with the following modules/themes enabled:
Chaos Tools 7.x-1.4
Page Manager 7.x-1.4
Panelizer 7.x-3.1
Panels 7.x-3.4
Panels In-Place Editor 7.x-1.4
Bartik 7.28 set as front-end theme
Seven 7.28 set as admin theme

No other contrib modules or themes are enabled.

To reproduce:

  1. Enable the node view page in Page Manager
  2. Configure Panelizer for the Basic Page content type
  3. Create a node of type Basic Page
  4. After saving, click Customize this page
  5. Use the Tab key to navigate through the controls on the page
  6. Note that the icon buttons do not highlight or otherwise change appearance when you are focused on them
  7. Hover over the buttons using the mouse
  8. Note that the appearance of the button changes

Possible solution:
Add a :focus pseudoclass along with the :hover pseudoclass on the selectors
div.panels-ipe-handlebar-wrapper li a, div.panels-ipe-dragtitle span, div.panels-ipe-newblock a, span.panels-ipe-draghandle-icon

CommentFileSizeAuthor
#2 panels-ipe-keyboard-focus-2280797-2.patch2.92 KBcboyden

Comments

cboyden’s picture

cboyden commented
Assigned: Unassigned » cboyden
cboyden’s picture

cboyden commented
Status: Active » Needs review
StatusFileSize
new panels-ipe-keyboard-focus-2280797-2.patch2.92 KB

This patch adds :focus pseudoclasses to all selectors in the Panels IPE CSS file where :hover pseudoclasses are added to focusable elements (links, buttons, and form controls).

There are some :hover effects being applied to non-focusable elements. For example, the divs that contain a pane and its controls have a dotted outline applied on hover. It's probably not worthwhile to make the div focusable.

mgifford’s picture

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

This is an important element for sure. It is very common for CSS to ignore focus and to remove outline making it very difficult for keyboard only users to identify where they are.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
commented
Status: Needs review » Reviewed & tested by the community

This is a huge accessibility fix. Without it, the IPE is essentially unusable from the keyboard! Tested and it works great, code looks perfect. We're using this patch in Panopoly now!

  • japerry committed e612dbf on 7.x-3.x authored by cboyden 
    Issue #2280797 by cboyden: Add a visual indicator of tab focus on IPE...
japerry’s picture

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

Agreed, this is a much needed patch, looks good to me. Fixed!

Status: Fixed » Closed (fixed)

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