Opened 11 years ago

Closed 11 years ago

#6987 closed defect (fixed)

Tab keystrokes should not be used for navigation among grid cells.

Reported by: Joseph Scheuhammer Owned by: Bryan Forbes
Priority: high Milestone: 1.2
Component: DojoX Grid Version: 1.1.1
Keywords: a11y Cc: Becky Gibson, davidb
Blocked By: Blocking:

Description

Although desktop spreadsheets support the use of the TAB key to navigate among cells, this is not a good idea for a webapp. The rule of thumb here is, roughly, "use Tab/Shift?+Tab to move between widgets and landmarks, and use arrow keys to move within a widget".

Consider keyboard-only users: if the grid contains a relatively large number of cells, they would have to tab many times just to get past the grid. That is frustrating.

Relevant portions quoted from the DTHML style guide (http://dev.aol.com/dhtml_style_guide#table)

  • Tab
    • The initial tab enters the grid with focus on the first header cell.
    • Once in the grid a second tab moves out of the grid to the next tab stop.
    • Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus.
  • Left and Right Arrow Navigation between columns.
  • Up and Down Arrow Navigation between Rows.

Attachments (6)

6987.patch (1.2 KB) - added by Joseph Scheuhammer 11 years ago.
6987a.patch (12.4 KB) - added by Joseph Scheuhammer 11 years ago.
6987b.patch (11.9 KB) - added by Joseph Scheuhammer 11 years ago.
6987c.patch (12.0 KB) - added by Joseph Scheuhammer 11 years ago.
6987d.patch (12.0 KB) - added by Joseph Scheuhammer 11 years ago.
6987e.patch (11.3 KB) - added by Joseph Scheuhammer 11 years ago.

Download all attachments as: .zip

Change History (18)

comment:1 Changed 11 years ago by Joseph Scheuhammer

The attached patch file shows the first step towards the suggested tab-navigation in and out of the grid. It's best viewed with ".../grid/tests/test_keyboard.html".

It's a "first step" since all it does is tab into the grid from without and tab out again; likewise for shift-tab. The cell that had focus is stored such that (shift-)tabbing back to the grid lands the user on that cell.

What should happen is, for example, a shift-tab from within the grid should focus the column header. That is, the column header is a tab stop with respect to tab navigation, where users can arrow among the headers. Working on it...

Changed 11 years ago by Joseph Scheuhammer

Attachment: 6987.patch added

comment:2 Changed 11 years ago by Joseph Scheuhammer

The patch, "6987a.patch", allows for navigation and activation of column headers:

  • TAB navigation from outside the grid, to the column headers, to the grid itself, then out the bottom. Shift+TAB moves in the opposite direction.
  • when in header, left and right cursor keys navigate the column headers.
  • when in header, space bar activates the sort for the currently focused column header.
  • when in the grid, left, right, up, and down cursor keys navigate among the cells in the grid proper.

Tested FF2 and FF3 on Mac OS X Leopard, and WinXP; and IE7 and IE6 on WinXP. Test file used: ".../dojox/grid/tests/test_keyboard.html".

Known issues: In IE6 and IE7, when navigation left among the column headers, they scroll indepedently of the grid. Scrolling is fine when navigating right.

Focus indicator (defined as 'focusClass' property in _FocusManager) is either not visible or just barely visible when column header has focus. I suspect the cascade, but am not sure why the style is not seen. Perhaps another style specifically for focusing column headers is needed.

Changed 11 years ago by Joseph Scheuhammer

Attachment: 6987a.patch added

comment:3 Changed 11 years ago by Joseph Scheuhammer

New patch (6987b.patch) that partly addresses focus styling on the column headers. Still not quite right in that it interferes with the mouse-over styling. But, at least one can see what header has focus. Also, fixed use of tab characters as per coding style guide.

Changed 11 years ago by Joseph Scheuhammer

Attachment: 6987b.patch added

comment:4 Changed 11 years ago by Joseph Scheuhammer

New patch (6987c.patch) that removes visual focus indicator from a cell when focussed is on a column header, or if the user has tab navigated completely away from the grid.

Note that the focus manager maintains the last focused cell such that when tab navigating back to the grid, that cell (re)acquires the focus, and is drawn as such. It may be useful to have some form of "ghost" focus such that the user can see what cell that is even if they have navigated away.

Changed 11 years ago by Joseph Scheuhammer

Attachment: 6987c.patch added

comment:5 Changed 11 years ago by Becky Gibson

While the ghost focus would be nice for people to be able to see what cell will get focus when they return to the grid, I don't see it as an immediate a11y requirement. Since the user may scroll the grid when focus is in the header cells, the visual indication of the last focused cell in the grid may be off screen and thus no longer useful. Also, it would be difficult to make this distinguishable in high contrast mode.

comment:6 Changed 11 years ago by Bryan Forbes

I applied the latest patch to trunk and there are a few problems:

  1. After the page has loaded, I hit tab 3 times to get into the grid (once to get to the text element, once to get to the grid header, and once to get into the grid content) and it takes me to the last text element on the page.
  1. When using the arrow keys to navigate cells, the left and right arrow keys move two cells at a time.

comment:7 in reply to:  6 Changed 11 years ago by Joseph Scheuhammer

Replying to BryanForbes:

I'm not sure what happened. When I tried to apply 6987c.patch against the latest revision of trunk, it refused to change one of the files (_Events.js). So...

  1. Checked out fresh version of trunk (rev 14485).
  2. Generated the patch against that version -- 6987d.patch.
  3. Checked out fresh copy of trunk (rev 14486) and applied 6987d.patch (on Mac OSX).
    • tested FF3/Mac - success.
  4. Checked out fresh copy of trunk (rev 14489) and applied 6987d.patch (on WinXP).
    • tested FF2/Win and IE7 - success.

Hopefully this works now.

Changed 11 years ago by Joseph Scheuhammer

Attachment: 6987d.patch added

comment:8 Changed 11 years ago by Joseph Scheuhammer

Patch file 6987e.patch moves all handling of a 'space bar' keystroke to _Events.js.

Note: I found a bug in IE6/IE7/WinXP when presssing 'space bar' on a cell. Not only did it select the row, but it also scrolled vertically (like "more" processing). Adding a 'dojo.stopEvent()' fixed it. That stopEvent() is in this patch.

Changed 11 years ago by Joseph Scheuhammer

Attachment: 6987e.patch added

comment:9 Changed 11 years ago by Bryan Forbes

The patch looks great. Please apply this patch and commit. Thanks!

comment:10 in reply to:  9 ; Changed 11 years ago by Joseph Scheuhammer

Replying to BryanForbes:

The patch looks great. Please apply this patch and commit. Thanks!

I don't have commit privileges. However, a co-worker does (David Bolter), and he is willing to apply and commit. I'll keep you posted.

comment:11 in reply to:  10 Changed 11 years ago by Bryan Forbes

Replying to clown:

Replying to BryanForbes:

The patch looks great. Please apply this patch and commit. Thanks!

I don't have commit privileges. However, a co-worker does (David Bolter), and he is willing to apply and commit. I'll keep you posted.

I'll go ahead and commit. Thanks.

comment:12 Changed 11 years ago by Bryan Forbes

Resolution: fixed
Status: newclosed

(In [14534]) fixes #6987 !strict

  • Committing patch from Joseph Scheuhammer (clown).
  • Changed cell keyboard navigation from using tabs to using arrow keys.
Note: See TracTickets for help on using tickets.