Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#7775 closed defect (fixed)

accordion pane: focus on accordion tab should be more visible

Reported by: Becky Gibson Owned by: Becky Gibson
Priority: high Milestone: 1.4
Component: Accessibility Version: 1.2beta
Keywords: Cc: nonken, Sam Foster, Adam Peller
Blocked By: Blocking:

Description

The background color of the accordion title bar changes when an accordion is open but it is hard to see when the focus is on that title. We might consider changing the color like what is done for mouse over or applying a more visible border on focus.

Using dijit/tests/layout/test_AccordionContainer.html tab to the first example (with a b c as title). With focus on a, press the down arrow to put focus on b - there is a border at that bottom of the title but it is hard to see. Now press tab to move focus into the pane associated with b. Press shift tab to get focus back to the b title bar. Notice how hard it is to determine where focus is. It is a bit too subtle.

Tested with tundra and FF3 and IE7 on Windows. Focus is a little more visible in IE but still not great.

Attachments (2)

7775.patch (733 bytes) - added by Joseph Scheuhammer 11 years ago.
7775bg.patch (630 bytes) - added by Becky Gibson 11 years ago.
use underline and solid top and bottom border to indicate focus

Download all attachments as: .zip

Change History (12)

comment:1 Changed 11 years ago by Joseph Scheuhammer

Cc: Sam Foster Adam Peller added

Attaching "7775.patch" that implements the background colour option, using the same colour scheme as for mouse over. Note that I'm not a CSS wizard, and there may be (probably is) a better approach (e.g. the "outline" selector).

I had a discussion with becky, and she suggested that sfoster is someone who could own this ticket -- adding to the cc list.

Changed 11 years ago by Joseph Scheuhammer

Attachment: 7775.patch added

Changed 11 years ago by Becky Gibson

Attachment: 7775bg.patch added

use underline and solid top and bottom border to indicate focus

comment:2 Changed 11 years ago by Becky Gibson

I've provided another patch that underlines the accordionTitle to indicate focus. It also changes the top and bottom border to solid black. We really don't need both - one of the other would do. My preference is to just underline the title but I'd like feedback from others before committing since this affects look and feel. The other issue is I can't get this to work in Safari - which isn't critical since we don't support keyboard use there but it does make the appearance different since clicking on a title in other browsers will underline the title and in safari it will not. Any help there would also be appreciated.

comment:3 Changed 11 years ago by Becky Gibson

Priority: normalhigh

comment:4 Changed 11 years ago by bill

See also #8195, I'm waiting for the Ux group to give a general strategy about focus indication.

comment:5 Changed 11 years ago by Becky Gibson

Milestone: 1.31.4
Priority: highnormal

moving to 1.4 to work on consistent focus across widgets rather than changing focus in this widget more than once.

comment:6 Changed 10 years ago by Becky Gibson

Priority: normalhigh

Since there has been no change to this in over a year, I would at least like to check in a fix to put an underline under the title of the focused widget for 1.4. I'll skip the borders top and bottom since that changes the look and feel more dramatically. But, this is really hard to use via the keyboard when you can't see the focus. As an example, in the current test_accordionContainter.html page on the first example, the container for the "A Simple Pane" drop down can receive focus. If you put focus on the select box in that pane, then press shift tab, focus goes to the container. You think focus would be on the title bar and it is not so when you press the down arrow the pane scrolls rather than focus moving to the next accordion title. I thought keyboard was broken for the accordion pane because I couldn't tell that focus was not on the title bar.

comment:7 Changed 10 years ago by Becky Gibson

fixed via [20507]

comment:8 Changed 10 years ago by Becky Gibson

Resolution: fixed
Status: newclosed

comment:9 Changed 10 years ago by Becky Gibson

[20508] remove partial, ugly focus border around title bar in Firefox and Safari

comment:10 Changed 10 years ago by bill

(In [20562]) Shaving a few bytes, refs #7775.

Note: See TracTickets for help on using tickets.