Add keyboard shortcut to focus search field

[mdo]

Picks up #29834 and adds a little tag to the search input to show you can use the / key to focus on it. I'm not sure what bugs @MartijnCuppens was seeing based on his comment there, but this seems to work great for me locally.

Preview: https://deploy-preview-31702--twbs-bootstrap.netlify.app/docs/5.0/getting-started/introduction/

[patrickhlauke]

I would advise against this, as it would fail https://www.w3.org/TR/WCAG21/#character-key-shortcuts

[mdo]

Oh boy, didn't know there were guidelines for that. Wonder if the built-in Algolia feature mentioned helps with that at all. Also wonder if GitHub does anything like this for their shortcuts.

[patrickhlauke]

Using an additional modifier key like ALT + / or CTRL + / would pass the WCAG SC and may be worth considering.

[edit: for github itself, I would suggest a general override/ability to turn keyboard shortcuts off would make sense - showing it as part of the user account settings/preferences, and perhaps firing up a modal the first time a keyboard shortcut is fired to advise the user - maybe show the hint modal that comes up when pressing ? and add a prominent "Turn keyboard shortcuts off" option there as well]

[MartijnCuppens]

I'm not sure what bugs @MartijnCuppens was seeing based on his comment there

If an input or textarea is focused for example on the form controls page, the focus jumps to the search bar if / is typed.

We could make use of the native accesskey attribute, but I think it won't be clear enough which keyboard combo needs to be pressed.

[patrickhlauke]

accesskey has historically seen very little use because of issues of discoverability, and because it varied between browsers which modifier key you'd use to trigger them (so sites shied away from providing explicit hints like ALT + / or similar, because that may not match the user's browser/platform).

and yes, if you just register an event listener on the page as a whole, it will kick in when it shouldn't (when user's focus is actually on an input, textarea, select, etc), so would generally need extra checks in the code about "if any of these types of element are currently the document.activeElement, just bail out and do nothing)"

[mdo]

Pushed an update here to modify the shortcut from / to Ctrl /. I couldn't figure out how to do multiple keys in Algolia's autocomplete options, so I've stuck with the approach I started with. Thoughts?

[patrickhlauke]

I couldn't figure out how to do multiple keys in Algolia's autocomplete options

if you mean the actual "once the search is focused, pressing normal keys triggers autocomplete suggestions", then that's kosher per the WCAG criterion, as you're not triggering actual functionality. in short, this now looks good

[XhmikosR]

Please give me some time to look into this and get back to you

…

On Wed, Oct 28, 2020, 05:45 Mark Otto ***@***.***> wrote: Pushed an update here to modify the shortcut from / to Ctrl /. I couldn't figure out how to do multiple keys in Algolia's autocomplete options, so I've stuck with the approach I started with. Thoughts? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#31702 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNL6AUBK7YJMNOX3EV3SM6HWJANCNFSM4RSUQEMQ> .

[XhmikosR]

Not sure what's left here, it seems to work fine like @patrickhlauke said?

[einfallstoll]

Nice this even works with Ctrl + Shift + 7 (if / is created by typing Shift + 7).