Support tab and arrow key navigation through dropdowns

[robomalo]

Steps for Reproduction

1. Visit http://quilljs.com/playground/
2. Attempt to use tab key to select a headline format or normal
3. The options are in <span> tags which cannot be focused

Expected behavior:

1. Tab into format selector for heading, normal, etc.
2. Hit enter or space bar
3. Use tabs or arrow keys to select formatting
4. Hit enter select formatting

Actual behavior:

Tabs pass over span tags because they cannot be focused

Platforms:

Everywhere

Version:

All versions

Note:

This actually failed our accessibility audit within LinkedIn for Slate

[scottsheffield]

If I'm remembering correctly, you guys are actually constructing the markup for the toolbar in Slate. Is that markup not usable if it doesn't use spans for the dropdown items, say if you switch to something focusable (button, whatever)?

[jhchen]

Not sure Slate's exact implementation but the default picker does create <span>s. The quick solution is to change the label <span> into a <a> but then the obvious next Issue report would be inability to down arrow and select. So a satisfactory resolution to this Issue imo is a more full featured implementation.

[robomalo]

Anchors aren't totally semantically correct. Would it be possible to
control it with the actual select form item?
On Mon, Oct 10, 2016 at 10:34 PM Jason Chen [email protected]
wrote:

Not sure Slate's exact implementation but the default picker does create
s. The quick solution is to change the label into a but
then the obvious next Issue report would be inability to down arrow and
select.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1031 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AACMQnX9Puh04YXosMDS48pai4XwdutLks5qyx_KgaJpZM4KRU_c
.

[jhchen]

What is? A button? I'd rather get it right then make it configurable so other people can get it wrong.

[robomalo]

Buttons would be correct in the presentation side but I was wondering if we
could do something with the actual select element already in the page.
Isn't there one?
On Tue, Oct 11, 2016 at 11:25 PM Jason Chen [email protected]
wrote:

What is? A button? I'd rather get it right then make it configurable so
other people can get it wrong.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1031 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AACMQqJShpQSJwUfXHCGToOMH1opKBh0ks5qzH1cgaJpZM4KRU_c
.

[jhchen]

There is but the current state of HTML technology does not allow us to style <select> and <option>

[robomalo]

Oh, I know... I was thinking like positioning it off the page with CSS but
still have it in the markup to be controlled by tabs. But then that
wouldn't help with the focused elements on the screen. Seems like no
getting around the buttons maybe.
On Tue, Oct 11, 2016 at 11:55 PM Jason Chen [email protected]
wrote:

There is but the current state of HTML technology does not allow us to
style and — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com//issues/1031#issuecomment-253134040, or mute the thread https://github.com/notifications/unsubscribe-auth/AACMQmm6kKrzxRfvKmqSzhHZQl2Ccf0Wks5qzIRcgaJpZM4KRU_c .

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏