Feature Request: Modals: input autofocus attr, and keyboard focus (has-PR)
Created by: bkdotcom
Spinoff of #22362 (closed)
a) Bootstrap should automatically exhibit this behavior:
$(document).on("shown.bs.modal", function (e) {
$("[autofocus]:first", e.target).focus();
});
(ie, when opening a modal, find the first input with the autofocus
attribute and focus it
The autofocus
attribute is currently ineffective in modals without the user implementing something like the above.
This would be a non-breaking change.
b) new modal option/data-attr
<div class="modal" data-keyboard-bnav="true"></div>
Common use case: confirmation dialog. Enabled, this would allow the user to arrow between "Cancel" and "OK" (just like a native confirm dialog). I know I always audibly *sigh* when I open a non-native confirmation dialog and a) nothing's focused by default, and b) I can't select an option via keyboard/arrow-keys
(Keyboard functionality is a requirement for Accessibility Compliance)
See the documentation demo modals https://v4-alpha.getbootstrap.com/components/modal/#live-demo
There are 9 "live demos"
4 of the demos are true confirmation dialogs and would benefit from data-keyboard-nav="true"
and/or having a default/autofocused action
3 of the demo modals are email forms which would benefit from having autofocus
on the message textarea
(The remaining 2 demos have no content)
Edit: It appears that autofocus has been suggested before (#12525 (closed)) but poo-poo'd out of consideration for mobile devices (don't want to trigger virtual keyboard). Does focusing a button trigger virtual keyboard? Potential solution: if touch device and element to focus is of the text/textarea variety: don't autofocus? My opinion: the accessibility benefits gained by autofocusing are worth the challenge of dealing with the virtual-keyboard exception.