New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select with custom menu not keyboard accessible in 1.1 rc1 #3658

Closed
toddparker opened this Issue Feb 28, 2012 · 14 comments

Comments

Projects
None yet
2 participants
@toddparker
Contributor

toddparker commented Feb 28, 2012

Both the native and custom menu selects will open when focused and the spacebar is pressed. However, the custom menu version doesn't seem to ever gain in focus when opened - no options have hte ui-focus class and no keystrokes seem to affect it.
http://jquerymobile.com/test/docs/forms/forms-all.html

This should have the same keyboard shortcuts as the native menu - arrow up/down changes the selected option, spacebar or Enter selects the option and closes the select.

This is an issue in 1.0.1 so it's not a recent regression.

@ghost ghost assigned scottjehl Feb 28, 2012

scottjehl pushed a commit that referenced this issue Feb 28, 2012

scottjehl
make sure the first "active" link is found and focused when a custom …
…select is opened. This addresses issue #3658, but doesn't fix it visually yet (only audibly and for keyboard)
@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 28, 2012

Contributor

This definitely works in the betas, so it's a regression. I think it came from moving things over to native dom methods (maybe a tabindex was misplaced somewhere?).

Contributor

scottjehl commented Feb 28, 2012

This definitely works in the betas, so it's a regression. I think it came from moving things over to native dom methods (maybe a tabindex was misplaced somewhere?).

@scottjehl scottjehl closed this in 99e27a1 Feb 28, 2012

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 28, 2012

Contributor

I think this is good. @Wilto - if you get a chance, I would love a second opinion on the roving tabs and such. I didn't get a chance to do a full ARIA overview, but the keyboard and roving focus appear to be good now, and things are certainly working from a visual keyboard access perspective. thanks!

Contributor

scottjehl commented Feb 28, 2012

I think this is good. @Wilto - if you get a chance, I would love a second opinion on the roving tabs and such. I didn't get a chance to do a full ARIA overview, but the keyboard and roving focus appear to be good now, and things are certainly working from a visual keyboard access perspective. thanks!

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 28, 2012

Contributor

So odd this isn't working for us after that commit. We'll have to try and get this in for 1.1 final.

Contributor

toddparker commented Feb 28, 2012

So odd this isn't working for us after that commit. We'll have to try and get this in for 1.1 final.

@toddparker toddparker reopened this Feb 28, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 28, 2012

Contributor

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.

Contributor

toddparker commented Feb 28, 2012

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 28, 2012

Contributor

you're not getting visuals? In chrome? I am….

hmmm

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)

Contributor

scottjehl commented Feb 28, 2012

you're not getting visuals? In chrome? I am….

hmmm

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 28, 2012

Contributor

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)

Contributor

scottjehl commented Feb 28, 2012

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 28, 2012

Contributor

Hmmm….I see that now. Maybe we can add the focus class to the selected option?
Broken on this page tho - see last select.

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:07 PM | February 28, 2012, Scott Jehl wrote:

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

Contributor

toddparker commented Feb 28, 2012

Hmmm….I see that now. Maybe we can add the focus class to the selected option?
Broken on this page tho - see last select.

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:07 PM | February 28, 2012, Scott Jehl wrote:

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 28, 2012

Contributor

full page ones may need a little extra help, yes.

On Feb 29, 2012, at 12:40 AM, Todd Parker wrote:

Hmmm….I see that now. Maybe we can add the focus class to the selected option?
Broken on this page tho - see last select.

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:07 PM | February 28, 2012, Scott Jehl wrote:

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

Contributor

scottjehl commented Feb 28, 2012

full page ones may need a little extra help, yes.

On Feb 29, 2012, at 12:40 AM, Todd Parker wrote:

Hmmm….I see that now. Maybe we can add the focus class to the selected option?
Broken on this page tho - see last select.

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:07 PM | February 28, 2012, Scott Jehl wrote:

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 28, 2012

Contributor

No, that is a small custom menu example. Maybe bad syntax?

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:49 PM | February 28, 2012, Scott Jehl wrote:

full page ones may need a little extra help, yes.

On Feb 29, 2012, at 12:40 AM, Todd Parker wrote:

Hmmm….I see that now. Maybe we can add the focus class to the selected option?
Broken on this page tho - see last select.

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:07 PM | February 28, 2012, Scott Jehl wrote:

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

Contributor

toddparker commented Feb 28, 2012

No, that is a small custom menu example. Maybe bad syntax?

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:49 PM | February 28, 2012, Scott Jehl wrote:

full page ones may need a little extra help, yes.

On Feb 29, 2012, at 12:40 AM, Todd Parker wrote:

Hmmm….I see that now. Maybe we can add the focus class to the selected option?
Broken on this page tho - see last select.

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:07 PM | February 28, 2012, Scott Jehl wrote:

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 28, 2012

Contributor

oh sorry ok - well both do then :)

maybe syntax. I'll see tomorrow!

On Feb 29, 2012, at 12:52 AM, Todd Parker wrote:

No, that is a small custom menu example. Maybe bad syntax?

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:49 PM | February 28, 2012, Scott Jehl wrote:

full page ones may need a little extra help, yes.

On Feb 29, 2012, at 12:40 AM, Todd Parker wrote:

Hmmm….I see that now. Maybe we can add the focus class to the selected option?
Broken on this page tho - see last select.

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:07 PM | February 28, 2012, Scott Jehl wrote:

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

Contributor

scottjehl commented Feb 28, 2012

oh sorry ok - well both do then :)

maybe syntax. I'll see tomorrow!

On Feb 29, 2012, at 12:52 AM, Todd Parker wrote:

No, that is a small custom menu example. Maybe bad syntax?

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:49 PM | February 28, 2012, Scott Jehl wrote:

full page ones may need a little extra help, yes.

On Feb 29, 2012, at 12:40 AM, Todd Parker wrote:

Hmmm….I see that now. Maybe we can add the focus class to the selected option?
Broken on this page tho - see last select.

filament
filamentgroup.com | 102 south street #3 boston, ma 02111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
todd.parker .: . todd@filamentgroup.com .: . (tel) 617.482.7120 (fax) 617.687.0212

On Feb 28, 2012, at 12:07 PM | February 28, 2012, Scott Jehl wrote:

Right now on http://jquerymobile.com/test/docs/forms/selects/custom.html

I can tab to the first select, press space to open it, and arrow up and down to change the hover/focus before hitting space to make a choice.

The hover is subtle, same as our hover state, so maybe it's light enough it's hard to see? Could that maybe be the problem?

On Feb 28, 2012, at 11:17 PM, Todd Parker wrote:

Sounds from the commit message that @scottjehl's fix makes this work on screenreaders but we still need the visual feedback to work for sighted users.


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 29, 2012

Contributor

Todd are you talking about the blue select at the end of the page? (second to last one?)

That one works for me, but the hover state and active state are all themed pretty similar, so it's almost impossible to see the shift. Something else for you?

Contributor

scottjehl commented Feb 29, 2012

Todd are you talking about the blue select at the end of the page? (second to last one?)

That one works for me, but the hover state and active state are all themed pretty similar, so it's almost impossible to see the shift. Something else for you?

@scottjehl scottjehl closed this in 63052f5 Feb 29, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 29, 2012

Contributor

I think @Wilto fixed this and added the btn-down class to menu items to provide better visual feedback because hover is too subtle.

The only issue left was making keyboard nav work in the full screen dialog selects.

On Feb 29, 2012, at 4:32 AM, "Scott Jehl" reply@reply.github.com wrote:

Todd are you talking about the blue select at the end of the page? (second to last one?)

That one works for me, but the hover state and active state are all themed pretty similar, so it's almost impossible to see the shift. Something else for you?


Reply to this email directly or view it on GitHub:
#3658 (comment)

Contributor

toddparker commented Feb 29, 2012

I think @Wilto fixed this and added the btn-down class to menu items to provide better visual feedback because hover is too subtle.

The only issue left was making keyboard nav work in the full screen dialog selects.

On Feb 29, 2012, at 4:32 AM, "Scott Jehl" reply@reply.github.com wrote:

Todd are you talking about the blue select at the end of the page? (second to last one?)

That one works for me, but the hover state and active state are all themed pretty similar, so it's almost impossible to see the shift. Something else for you?


Reply to this email directly or view it on GitHub:
#3658 (comment)

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 29, 2012

Contributor

@Wilto's fix looks like it improved the keyboard nav itself when headers are involved.

It's using button-down now on focus? That seems unexpected to me… even if it might look better with our default theme. Shouldn't it just use hover/focus classes? Maybe our hover just needs more punch?

That aside, this latest change added ui-focus classes to focused buttons. Before, we were relying only on the :focus pseudo class on buttons themselves, but that doesn't bubble for focused child elements, so it didn't show up in listviews - list view markup is odd (links inside "buttons").

Anyway, I think the combined changes bring good coverage for custom selects.

Fullscreens are still an issue, yeah. I'll reopen

On Feb 29, 2012, at 7:20 PM, Todd Parker wrote:

I think @Wilto fixed this and added the btn-down class to menu items to provide better visual feedback because hover is too subtle.

The only issue left was making keyboard nav work in the full screen dialog selects.

On Feb 29, 2012, at 4:32 AM, "Scott Jehl" reply@reply.github.com wrote:

Todd are you talking about the blue select at the end of the page? (second to last one?)

That one works for me, but the hover state and active state are all themed pretty similar, so it's almost impossible to see the shift. Something else for you?


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

Contributor

scottjehl commented Feb 29, 2012

@Wilto's fix looks like it improved the keyboard nav itself when headers are involved.

It's using button-down now on focus? That seems unexpected to me… even if it might look better with our default theme. Shouldn't it just use hover/focus classes? Maybe our hover just needs more punch?

That aside, this latest change added ui-focus classes to focused buttons. Before, we were relying only on the :focus pseudo class on buttons themselves, but that doesn't bubble for focused child elements, so it didn't show up in listviews - list view markup is odd (links inside "buttons").

Anyway, I think the combined changes bring good coverage for custom selects.

Fullscreens are still an issue, yeah. I'll reopen

On Feb 29, 2012, at 7:20 PM, Todd Parker wrote:

I think @Wilto fixed this and added the btn-down class to menu items to provide better visual feedback because hover is too subtle.

The only issue left was making keyboard nav work in the full screen dialog selects.

On Feb 29, 2012, at 4:32 AM, "Scott Jehl" reply@reply.github.com wrote:

Todd are you talking about the blue select at the end of the page? (second to last one?)

That one works for me, but the hover state and active state are all themed pretty similar, so it's almost impossible to see the shift. Something else for you?


Reply to this email directly or view it on GitHub:
#3658 (comment)


Reply to this email directly or view it on GitHub:
#3658 (comment)

@scottjehl scottjehl reopened this Feb 29, 2012

@scottjehl scottjehl closed this in 4a05277 Feb 29, 2012

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 29, 2012

Contributor

Okay just closed this out, but I still question the ui-btn-down- class usage. @toddparker and @Wilto what do you think? With focus in place now, we've got additional "glow" from our ui-focus class. I think down should be reserved for actual down state, like a tap or spacebar click...

Contributor

scottjehl commented Feb 29, 2012

Okay just closed this out, but I still question the ui-btn-down- class usage. @toddparker and @Wilto what do you think? With focus in place now, we've got additional "glow" from our ui-focus class. I think down should be reserved for actual down state, like a tap or spacebar click...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment